Javascript
Interface de lecture de musique
Par Malik • 03 July 2024
Bienvenue dans notre guide sur la création d'un lecteur de musique avec HTML, CSS et JavaScript. Cet article vous guidera à travers les étapes nécessaires pour construire une interface élégante et fonctionnelle pour écouter vos morceaux préférés directement depuis votre navigateur. Bien sûr, on est loin de rivaliser avec Spotify, mais hé, Rome ne s'est pas construite en un jour, et chaque grand développeur a commencé quelque part. Préparez-vous à plonger dans le code et à créer votre propre mini-Spotify maison !
Nous allons utiliser HTML pour la structure de la page, CSS pour le style, et JavaScript pour les fonctionnalités interactives. Vous apprendrez à intégrer des contrôles de lecture, afficher des informations sur la piste en cours, et ajouter des animations pour une expérience utilisateur enrichie.
Commençons par le code HTML qui définira la structure de notre lecteur de musique.
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lecteur de musique</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<body class="body">
<div class="album-cover">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/unity.jpeg" />
</div>
<div class="swiper-slide">
<img src="images/alam-walker-faded.jpg" />
</div>
<div class="swiper-slide">
<img src="images/darkside.jpg" />
</div>
<div class="swiper-slide">
<img src="images/on-my-way.jpg" />
</div>
<div class="swiper-slide">
<img src="images/spectre.jpg" />
</div>
<div class="swiper-slide">
<img src="images/drump.jpg" />
</div>
<div class="swiper-slide">
<img src="images/write-star.jpg" />
</div>
<div class="swiper-slide">
<img src="images/helo.jpg" />
</div>
<div class="swiper-slide">
<img src="images/physical.jpg" />
</div>
<div class="swiper-slide">
<img src="images/coping.jpg" />
</div>
</div>
</div>
</div>
<div class="music-player">
<h1>Title</h1>
<p>Song Name</p>
<audio id="song">
<source src="song-list/Luke-Bergs-Gold.mp3" type="audio/mpeg" />
</audio>
<input type="range" value="0" id="progress" />
<div class="controls">
<button class="backward">
<i class="fa-solid fa-backward"></i>
</button>
<button class="play-pause-btn">
<i class="fa-solid fa-play" id="controlIcon"></i>
</button>
<button class="forward">
<i class="fa-solid fa-forward"></i>
</button>
<button class="toggle-volume">
<i class="fa-solid fa-volume-up"></i>
</button>
<div class="volume-container" style="display: none">
<input
type="range"
id="volume"
min="0"
max="1"
step="0.1"
value="1"
/>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="./script.js"></script>
</body>
</html>
Ensuite, nous allons ajouter du CSS pour styliser notre lecteur de musique.
Code CSS
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600&display=swap");
:root {
--primary-clr: rgba(228, 228, 229, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Nunito", sans-serif;
}
body {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: black;
background-repeat: no-repeat;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
animation: slidein 120s forwards infinite alternate;
}
@keyframes slidein {
0%,
100% {
background-position: 20% 0%;
background-size: 3400px;
}
50% {
background-position: 100% 0%;
background-size: 2400px;
}
}
.album-cover {
width: 90%;
}
.swiper {
width: 100%;
padding: 40px 0 100px;
}
.swiper-slide {
position: relative;
max-width: 200px;
aspect-ratio: 1/1;
border-radius: 10px;
}
.swiper-slide img {
object-fit: cover;
width: 100%;
height: 100%;
border-radius: inherit;
-webkit-box-reflect: below -5px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
transform-origin: center;
transform: perspective(800px);
transition: 0.3s ease-out;
pointer-events: none;
user-select: none;
}
/* Music Player */
.music-player {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--primary-clr);
width: 380px;
padding: 10px 30px;
border-radius: 20px;
}
.music-player h1 {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.6;
}
.music-player p {
font-size: 1rem;
font-weight: 400;
opacity: 0.6;
}
/* Music Player Progress */
#progress {
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 7px;
background: rgba(163, 162, 164, 0.4);
border-radius: 4px;
margin: 32px 0 24px;
cursor: pointer;
}
#progress::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
background: rgba(163, 162, 164, 0.9);
width: 16px;
aspect-ratio: 1/1;
border-radius: 50%;
outline: 4px solid var(--primary-clr);
box-shadow: 0 6px 10px rgba(5, 36, 28, 0.3);
}
/* Music Player Controls */
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.controls button {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
aspect-ratio: 1/1;
margin: 20px;
background: rgba(163, 162, 164, 0.3);
color: var(--primary-clr);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
outline: 0;
font-size: 1.1rem;
box-shadow: 0 10px 20px rgba(5, 36, 28, 0.3);
cursor: pointer;
transition: all 0.3s linear;
}
.controls button:is(:hover, :focus-visible) {
transform: scale(0.96);
}
.controls button:nth-child(2) {
transform: scale(1.3);
}
.controls button:nth-child(2):is(:hover, :focus-visible) {
transform: scale(1.25);
}
.toggle-volume {
display: block;
}
CSS Pour la gestion de la responsivité
/* Responsive Styles */
@media screen and (max-width: 768px) {
.swiper {
padding: 20px 0 50px;
}
.swiper-slide {
max-width: 100%;
}
.music-player {
width: 300px;
padding: 10px 20px;
}
.music-player h1 {
font-size: 1.2rem;
}
.music-player p {
font-size: 0.875rem;
}
.controls button {
width: 40px;
font-size: 0.9rem;
margin: 10px;
}
.swiper-slide img {
width: 100%;
height: auto;
object-fit: contain;
}
.controls button:nth-child(2) {
transform: scale(1.2);
}
.toggle-volume {
display: none;
}
}
@media screen and (max-width: 480px) {
.toggle-volume {
display: none;
}
.swiper-slide {
max-width: 100%;
}
.swiper-slide img {
width: 100%;
height: auto;
object-fit: contain;
}
.music-player {
width: 260px;
padding: 10px 15px;
}
.music-player h1 {
font-size: 1rem;
}
.music-player p {
font-size: 0.75rem;
}
.controls button {
width: 35px;
font-size: 0.8rem;
margin: 8px;
}
.controls button:nth-child(2) {
transform: scale(1.1);
}
}
Et enfin, nous intégrerons JavaScript pour rendre notre lecteur de musique interactif.
Code JavaScript
const progress = document.getElementById("progress");
const song = document.getElementById("song");
const controlIcon = document.getElementById("controlIcon");
const playPauseButton = document.querySelector(".play-pause-btn");
const forwardButton = document.querySelector(".forward");
const backwardButton = document.querySelector(".backward");
const songName = document.querySelector(".music-player h1");
const artistName = document.querySelector(".music-player p");
const background = document.querySelector(".body");
const songs = [
{
title: "Unity",
name: "Alan Walker",
source: "song/Alan x Walkers - Unity.mp3",
background: "images/unity.jpeg",
},
{
title: "Faded",
name: "Alan Walker",
source: "song/Alan Walker-Faded.mp3",
background: "images/alam-walker-faded.jpg",
},
{
title: "Darkside",
name: "Alan Walker",
source: "song/Alan Walker-Darkside.mp3",
background: "images/darkside.jpg",
},
{
title: "On My Way",
name: "'Alan Walker, Farruko et Sabrina Carpenter",
source: "song/Alan Walker-Sabrina Carpenter-Farruko-Way.mp3",
background: "images/on-my-way.jpg",
},
{
title: "Spectre",
name: "Alan Walker",
source: "song/Alan Walker-The Spectre.mp3",
background: "images/spectre.jpg",
},
{
title: "Drump",
name: "Alan Walker",
source: "song/Alan Walker-The Drump.mp3",
background: "images/drump.jpg",
},
{
title: "Write The Star",
name: "Anne-Marie et James Arthur",
source: "song/Anne-Marie & James Arthur-Write The Stars.mp3",
background: "images/write-star.jpg",
},
{
title: "Hello",
name: "Adele",
source: "song/Adele-Hello.mp3",
background: "images/helo.jpg",
},
{
title: "Physical",
name: "Dua Lipa",
source:
"https://github.com/ecemgo/mini-samples-great-tricks/raw/main/song-list/Dua-Lipa-Physical.mp3",
background:
"https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/4c5c1727-8b32-48c1-91de-b0496ccf10f6",
},
{
title: "Coping",
name: "Rosie Darling",
source: "song/Rosie Darling - Coping .m4a",
background: "images/coping.jpg",
},
];
let currentSongIndex = 3;
function updateSongInfo() {
songName.textContent = songs[currentSongIndex].title;
artistName.textContent = songs[currentSongIndex].name;
song.src = songs[currentSongIndex].source;
background.style.backgroundImage = songs[currentSongIndex].background
? `url(${songs[currentSongIndex].background})`
: "";
song.addEventListener("loadeddata", function () {});
}
song.addEventListener("timeupdate", function () {
if (!song.paused) {
progress.value = song.currentTime;
}
});
song.addEventListener("loadedmetadata", function () {
progress.max = song.duration;
progress.value = song.currentTime;
});
function pauseSong() {
song.pause();
controlIcon.classList.remove("fa-pause");
controlIcon.classList.add("fa-play");
}
function playSong() {
song.play();
controlIcon.classList.add("fa-pause");
controlIcon.classList.remove("fa-play");
}
function playPause() {
if (song.paused) {
playSong();
} else {
pauseSong();
}
}
playPauseButton.addEventListener("click", playPause);
progress.addEventListener("input", function () {
song.currentTime = progress.value;
});
progress.addEventListener("change", function () {
playSong();
});
forwardButton.addEventListener("click", function () {
currentSongIndex = (currentSongIndex + 1) % songs.length;
updateSongInfo();
playPause();
swiper.slideTo(currentSongIndex);
});
backwardButton.addEventListener("click", function () {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
updateSongInfo();
playPause();
swiper.slideTo(currentSongIndex);
});
document.querySelectorAll(".swiper-slide").forEach((slide, index) => {
slide.addEventListener("click", () => {
currentSongIndex = index;
updateSongInfo();
playPause();
swiper.slideTo(currentSongIndex);
});
});
updateSongInfo();
var swiper = new Swiper(".swiper", {
effect: "coverflow",
centeredSlides: true,
initialSlide: 3,
slidesPerView: "auto",
allowTouchMove: true,
spaceBetween: 40,
coverflowEffect: {
rotate: 25,
stretch: 0,
depth: 50,
modifier: 1,
slideShadows: false,
},
navigation: {
nextEl: ".forward",
prevEl: ".backward",
},
});
document.addEventListener("DOMContentLoaded", function () {
const song = document.getElementById("song");
const volumeControl = document.getElementById("volume");
const volumeContainer = document.querySelector(".volume-container");
const toggleVolumeBtn = document.querySelector(".toggle-volume");
toggleVolumeBtn.addEventListener("click", function () {
if (
volumeContainer.style.display === "none" ||
volumeContainer.style.display === ""
) {
volumeContainer.style.display = "block";
} else {
volumeContainer.style.display = "none";
}
});
volumeControl.addEventListener("input", function () {
song.volume = volumeControl.value;
});
document.addEventListener("wheel", function (event) {
if (volumeContainer.style.display === "block") {
if (event.deltaY < 0) {
volumeControl.value = Math.min(
1,
parseFloat(volumeControl.value) + 0.1
);
} else {
volumeControl.value = Math.max(
0,
parseFloat(volumeControl.value) - 0.1
);
}
song.volume = volumeControl.value;
}
});
});
Cela vous permettra de créer une petit interface de lecteur de musique et personnalisable pour votre site web.
Suivez-moi
Conception de site vitrine personnalisé
Concevez un site web moderne qui attire et engage vos visiteurs dès la première vue.
Obtenez votre devis personnalisé