M-binary
Tu cherches à impressionner avec un lecteur audio moderne, visuel et immersif ? Ce projet est fait pour toi. Inspiré des interfaces futuristes et du style néon, ce lecteur de musique au design 3D combine esthétique et interactivité. Idéal pour ton portfolio, un site personnel ou une landing page produit.
Avec ses effets de profondeur et son interface responsive, ce lecteur est pensé pour capter l’attention dès la première seconde. Tu pourras y intégrer tes musiques préférées et personnaliser l’apparence facilement.
Code HTML (structure)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Lecteur de Musique Moderne</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="player-container">
<h2><i class="fas fa-headphones"></i> Mon Lecteur de Musique</h2>
<input type="file" id="fileInput" accept="audio" hidden multiple>
<button id="uploadBtn"><i class="fas fa-upload"></i> Ajouter votre musique</button>
<div class="cover">
<img id="cover" src="images/1.jpg" alt="Cover">
</div>
<div class="music-info">
<p id="title">Sélectionne une chanson</p>
</div>
<audio id="audio" src=""></audio>
<div class="controls">
<button id="prev"><i class="fas fa-backward"></i></button>
<button id="play"><i class="fas fa-play"></i></button>
<button id="next"><i class="fas fa-forward"></i></button>
</div>
<div class="progress-container">
<div class="progress" id="progress"></div>
</div>
<input type="text" id="search" placeholder=" Rechercher une chanson..." />
<ul class="playlist" id="playlist">
<li data-src="music/1.mp3" data-cover="images/1.jpg"><i class="fas fa-music"></i> Chill Vibes</li>
<li data-src="music/2.mp3" data-cover="images/2.jpg"><i class="fas fa-music"></i> Electro Beat</li>
<li data-src="music/3.mp3" data-cover="images/3.jpg"><i class="fas fa-music"></i> Relax Piano</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
Code CSS (design + responsive)
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Segoe UI", sans-serif;
background: #121212;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
}
.player-container {
background: #1f1f1f;
padding: 20px;
border-radius: 20px;
width: 90%;
max-width: 400px;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
text-align: center;
}
.cover img {
width: 100%;
max-height: 250px;
border-radius: 15px;
object-fit: cover;
margin-bottom: 15px;
}
h2 {
margin-bottom: 10px;
font-size: 1.5rem;
}
.music-info {
font-size: 18px;
margin-bottom: 15px;
}
.controls {
display: flex;
justify-content: space-around;
margin-bottom: 15px;
}
.controls button {
background: #333;
border: none;
color: white;
font-size: 24px;
padding: 10px 20px;
border-radius: 50px;
transition: 0.3s;
}
.controls button:hover {
background: #555;
}
.progress-container {
width: 100%;
height: 8px;
background: #333;
border-radius: 4px;
margin-bottom: 20px;
cursor: pointer;
}
.progress {
width: 0%;
height: 100%;
background: #00ff88;
border-radius: 4px;
}
#search {
width: 90%;
padding: 0.8rem;
margin-bottom: 10px;
border: none;
border-radius: 8px;
font-size: 16px;
background: #333;
color: #fff;
outline: none;
}
#uploadBtn {
background: #444;
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
margin-bottom: 15px;
font-size: 16px;
}
.playlist {
list-style: none;
padding: 0;
margin: 0;
max-height: 150px;
overflow-y: auto;
}
.playlist li {
padding: 10px;
border-bottom: 1px solid #333;
cursor: pointer;
transition: 0.3s;
text-align: left;
}
.playlist li:hover {
background: #2a2a2a;
}
=== Responsive design ===
@media (max-width: 600px) {
.player-container {
padding: 15px;
width: 95%;
}
h2 {
font-size: 1.3rem;
}
.controls button {
font-size: 20px;
padding: 8px 16px;
}
#search,
#uploadBtn {
font-size: 14px;
}
.music-info {
font-size: 16px;
}
.playlist li {
font-size: 14px;
}
.cover img {
max-height: 200px;
}
}
@media (max-width: 400px) {
.controls button {
font-size: 18px;
padding: 6px 14px;
}
.player-container {
border-radius: 10px;
}
.cover img {
max-height: 180px;
}
h2 {
font-size: 1.1rem;
}
}
Code JavaScript (fonctions audio)
const audio = document.getElementById("audio");
const playBtn = document.getElementById("play");
const nextBtn = document.getElementById("next");
const prevBtn = document.getElementById("prev");
const progressContainer = document.querySelector(".progress-container");
const progress = document.getElementById("progress");
const title = document.getElementById("title");
const cover = document.getElementById("cover");
const playlistEl = document.getElementById("playlist");
const search = document.getElementById("search");
const fileInput = document.getElementById("fileInput");
const uploadBtn = document.getElementById("uploadBtn");
let songs = [];
let covers = [];
let titles = [];
let currentSongIndex = 0;
function loadPlaylist() {
const items = playlistEl.querySelectorAll("li");
songs = [];
covers = [];
titles = [];
items.forEach((item, index) => {
songs.push(item.getAttribute("data-src"));
covers.push(item.getAttribute("data-cover"));
titles.push(item.textContent);
item.onclick = () => {
currentSongIndex = index;
loadSong(index);
playSong();
};
});
}
function loadSong(index) {
audio.src = songs[index];
title.textContent = titles[index];
cover.src = covers[index] || "images/1.jpg";
}
function playSong() {
audio.play();
playBtn.textContent = "⏸";
}
function pauseSong() {
audio.pause();
playBtn.textContent = "▶️";
}
playBtn.onclick = () => {
if (audio.paused) playSong();
else pauseSong();
};
nextBtn.onclick = () => {
currentSongIndex = (currentSongIndex + 1) % songs.length;
loadSong(currentSongIndex);
playSong();
};
prevBtn.onclick = () => {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
loadSong(currentSongIndex);
playSong();
};
audio.ontimeupdate = () => {
const progressPercent = (audio.currentTime / audio.duration) * 100;
progress.style.width = `${progressPercent}%`;
};
progressContainer.onclick = (e) => {
const width = progressContainer.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
};
search.oninput = () => {
const filter = search.value.toLowerCase();
const items = playlistEl.querySelectorAll("li");
items.forEach(item => {
const match = item.textContent.toLowerCase().includes(filter);
item.style.display = match ? "block" : "none";
});
};
uploadBtn.onclick = () => fileInput.click();
fileInput.onchange = () => {
const files = [...fileInput.files];
files.forEach(file => {
const url = URL.createObjectURL(file);
const li = document.createElement("li");
li.textContent = "🎵 " + file.name;
li.setAttribute("data-src", url);
li.setAttribute("data-cover", "images/1.jpg");
playlistEl.appendChild(li);
});
loadPlaylist();
};
loadPlaylist();
🚀 Points forts du lecteur
• 🔊 Lecture/pause et gestion du son en JS pur
• 🎧 Interface élégante et adaptable à tous les écrans
• 🌌 Animation de mise en avant de la musique jouée
• 📱 Compatible mobile & tablette
🎁 Télécharge-le ou copie/colle directement le code ci-dessous pour l’utiliser dès maintenant. Tu peux facilement changer les couleurs, les images ou même connecter une playlist externe.
💡 Astuce : pense à compresser tes fichie,rs audio pour une expérience fluide sur tous les appareils.
N'hésite pas à liker commenter et partager pour plsu de contenus