par Salut, aujourd’hui, dans cet article, vous apprendrez à créer un lecteur de musique mp3 en html css et JavaScript. Créez cet incroyable lecteur de musique en utilisant HTML CSS et JavaScript pur.
Maintenant je vais créer un lecteur de musique mp3 en JavaScript. Ce projet JavaScript Music Player a plusieurs fonctionnalités. B. Vous pouvez répéter, boucler, mélanger, lire / mettre en pause une chanson et lire la chanson suivante ou précédente.
Vous pouvez également afficher la liste des chansons, voir les chansons en cours de lecture et sélectionner les chansons à lire dans la liste.
Dans cet tutorel, vous avez vu le magnifique lecteur de musique et ses nombreuses fonctionnalités ainsi que la façon dont je l’ai créé en utilisant uniquement HTML CSS et JavaScript.
Je pense que vous aimez ce lecteur de musique et que vous avez également compris certains codes de base de ce projet. Si vous êtes trop débutant et que vous n’avez pas de connaissances de base en JavaScript, vous ne comprendrez certainement pas les codes de ce projet.
Mais si vous connaissez JavaScript de base, j’ai essayé d’expliquer chaque ligne JavaScript avec des commentaires écrits et veuillez regarder le code pour comprendre facilement et profondément. Vous avez peut-être une question sur la façon d’ajouter plus de musique à ce lecteur, n’est-ce pas ?
Pour créer un lecteur de musique mp3 en html css et javascript.
Eh bien, vous n’avez pas besoin de faire plus de choses, ouvrez simplement le fichier music-list.js et dupliquez les éléments du tableau et transmettez-y les détails de la musique.
J’ai également écrit des commentaires dans ce fichier à ce sujet, alors ne vous inquiétez pas après avoir téléchargé les fichiers source de ce lecteur de musique, vous pouvez facilement le faire.
créer un lecteur de musique mp3 en html css et JavaScript [ les Codes]
Pour [créer un lecteur de musique mp3 en html css et javascript]. Tout d’abord, vous devez créer quatre fichiers, un fichier HTML, un fichier CSS et un fichier JavaScript. Après avoir créé ces fichiers, collez simplement les codes suivants dans vos fichiers. Vous pouvez également télécharger les fichiers de code source du lecteur de musique à partir du bouton de téléchargement donné.
passé au code pour créer un lecteur de musique mp3 en html css et javascript
Tout d’abord, créez un fichier HTML avec le nom de index.html et collez les codes donnés dans votre fichier HTML. N’oubliez pas que vous devez créer un fichier avec l’extension .html et les images utilisées sur ce lecteur de musique n’apparaîtront pas. Vous devez télécharger des fichiers à partir du bouton de téléchargement donné pour utiliser également des images.
<!DOCTYPE html>
<!-- Codage par sonoretech - youtube.com/sonoretech -->
< html lang = "fr" >
< tête >
< jeu de caractères méta = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< titre > Lecteur de musique | sonoretech </ title >
< lien rel = "feuille de style" href = "style.css" >
< lien rel = "feuille de style" href = "https://fonts.googleapis.com/icon?family=Material+Icons" >
</ tête >
< corps >
< div class = "wrapper" >
< div class = "top-bar" >
< i class = "material-icons" > expand_more </ i >
< span > Lecture en cours </ span >
< i class = "material-icons" > more_horiz </ i >
</ div >
< div class = "img-zone" >
< img src = "" alt = "" >
</ div >
< div class = "détails de la chanson" >
< p class = "nom" > </ p >
< p class = "artiste" > </ p >
</ div >
< div class = "progress-area" >
< div class = "barre de progression" >
< identifiant audio = "main-audio" src = "" > </ audio >
</ div >
< div class = "song-timer" >
< span class = "current-time" > 0:00 </ span >
< span class = "max-duration" > 0:00 </ span >
</ div >
</ div >
< div class = "contrôles" >
< i id = "repeat-plist" class = "material-icons" title = "Playlist en boucle" > répéter </ i >
< i id = "prev" class = "material-icons" > skip_previous </ i >
< div class = "play-pause" >
< i class = "matériel-icônes jouer" > play_arrow </ i >
</ div >
< i id = "next" class = "material-icons" > skip_next </ i >
< i id = "more-music" class = "material-icons" > queue_music </ i >
</ div >
< div class = "liste-musique" >
< classe div = "en-tête" >
< classe div = "ligne" >
< i class = "list material-icons" > queue_music </ i >
< span > Liste de musique </ span >
</ div >
< i id = "close" class = "material-icons" > close </ i >
</ div >
< ul >
<!-- ici ma liste vient de js -->
</ ul >
</ div >
</ div >
< script src = "js/music-list.js" > </ script >
< script src = "js/script.js" > </ script >
</ corps >
</ html >Deuxièmement, créez un fichier CSS avec le nom de style.css et collez les codes donnés dans votre fichier CSS.
N’oubliez pas que vous devez créer un fichier avec l’extension .css
@import url ('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap') ;
* {
marge : 0 ;
rembourrage : 0 ;
box-sizing : border-box;
font-family : "Poppins" , sans-serif;
}
*:: avant , *:: après {
rembourrage : 0 ;
marge : 0 ;
}
: racine {
--rose : #ff74a4 ;
--violette : #9f6ea3 ;
--noir clair : #515C6F ;
--white : #ffffff ;
--darkwhite : #cecaca ;
--pinkshadow : #ffcbdd ;
--lightbshadow : rgba ( 0 , 0 , 0 , 0.15 ) ;
}
corps {
affichage : flexible ;
align-items : center;
justifier-contenu : center;
hauteur min : 100vh ;
fond : dégradé linéaire ( var ( --pink ) 0% , var ( --violet ) 100% ) ;
}
.emballage {
largeur : 380px ;
rembourrage : 25px 30px ;
débordement : masqué ;
position : relative ;
rayon de bordure : 15px ;
fond : var ( --white ) ;
box-shadow : 0px 6px 15px var ( --lightbshadow ) ;
}
.wrapper je {
curseur : pointeur;
}
.top-bar , .progress-area .song-timer ,
.controls , .music-list .header , .music-list ul li {
affichage : flexible ;
align-items : center;
justifier-contenu : espace-entre;
}
.top-bar je {
taille de police : 30px ;
couleur : var ( --lightblack ) ;
}
.top-bar i :premier-enfant {
marge-gauche : -7px ;
}
.top-bar span {
taille de police : 18px ;
marge-gauche : -3px ;
couleur : var ( --lightblack ) ;
}
.img-zone {
largeur : 100% ;
hauteur : 256px ;
débordement : masqué ;
marge-haut : 25px ;
rayon de bordure : 15px ;
box-shadow : 0px 6px 12px var ( --lightbshadow ) ;
}
.img-zone img {
largeur : 100% ;
hauteur : 100% ;
conforme à l'objet : couverture ;
}
.song-details {
text-align : center;
marge : 30px 0 ;
}
.song-details p {
couleur : var ( --lightblack ) ;
}
.chanson-détails .nom {
taille de police : 21px ;
}
.chanson-détails .artiste {
taille de police : 18px ;
opacité : 0,9 ;
hauteur de ligne : 35px ;
}
.progress-area {
hauteur : 6px ;
largeur : 100% ;
rayon de bordure : 50px ;
fond : #f0f0f0 ;
curseur : pointeur;
}
.progress-area .progress-bar {
hauteur : hériter ;
largeur : 0% ;
position : relative ;
border-radius : hériter ;
fond : dégradé linéaire ( 90deg , var ( --pink ) 0% , var ( --violet ) 100% ) ;
}
.progress-bar :: avant {
contenu : "" ;
position : absolue ;
hauteur : 12px ;
largeur : 12px ;
rayon de bordure : 50% ;
haut : 50% ;
droite : -5px ;
indice z : 2 ;
opacité : 0 ;
événements de pointeur : aucun ;
transformer : translateY ( -50% ) ;
arrière -plan : hériter ;
transition : opacité 0,2 s facilité ;
}
.progress-area :hover .progress-bar ::before {
opacité : 1 ;
événements de pointeur : auto ;
}
.progress-area .song-timer {
marge-haut : 2px ;
}
.song-timer durée {
taille de police : 13px ;
couleur : var ( --lightblack ) ;
}
.contrôles {
marge : 40px 0 5px 0 ;
}
.contrôles je {
taille de police : 28px ;
sélection de l'utilisateur : aucun ;
fond : dégradé linéaire ( var ( --pink ) 0% , var ( --violet ) 100% ) ;
clip d'arrière-plan : texte ;
-webkit-background-clip : texte ;
-webkit-text-fill-color : transparent ;
}
.controls i :nth-enfant ( 2 ),
.controls je :nth-child ( 4 ) {
taille de police : 43px ;
}
.controls #prev {
marge-droite : -13px ;
}
.controls #suivant {
marge-gauche : -13px ;
}
.contrôles .play-pause {
hauteur : 54px ;
largeur : 54px ;
affichage : flexible ;
curseur : pointeur;
align-items : center;
justifier-contenu : center;
rayon de bordure : 50% ;
fond : dégradé linéaire ( var ( --white ) 0% , var ( --darkwhite ) 100% ) ;
box-shadow : 0px 0px 5px var ( --pink ) ;
}
.play-pause :: avant {
position : absolue ;
contenu : "" ;
hauteur : 43px ;
largeur : 43px ;
border-radius : hériter ;
fond : dégradé linéaire ( var ( --pink ) 0% , var ( --violet ) 100% ) ;
}
.play-pause je {
hauteur : 43px ;
largeur : 43px ;
hauteur de ligne : 43px ;
text-align : center;
arrière -plan : hériter ;
clip d'arrière-plan : texte ;
-webkit-background-clip : texte ;
-webkit-text-fill-color : transparent ;
position : absolue ;
}
.music-list {
position : absolue ;
fond : var ( --white ) ;
largeur : 100% ;
gauche : 0 ;
bas : -55% ;
opacité : 0 ;
événements de pointeur : aucun ;
indice z : 5 ;
rembourrage : 15px 30px ;
rayon de bordure : 15px ;
box-shadow : 0px -5px 10px rgba ( 0 , 0 , 0 , 0.1 ) ;
transition : tous les 0,15 s d'assouplissement ;
}
.music-list .show {
bas : 0 ;
opacité : 1 ;
événements de pointeur : auto ;
}
.en -tête .ligne {
affichage : flexible ;
align-items : center;
taille de police : 19px ;
couleur : var ( --lightblack ) ;
}
.en -tête .ligne je {
curseur : par défaut ;
}
.header .row span {
marge-gauche : 5px ;
}
.header #fermer {
taille de police : 22px ;
couleur : var ( --lightblack ) ;
}
.music-list ul {
marge : 10px 0 ;
hauteur max : 260px ;
débordement : auto ;
}
.music-list ul ::- webkit-scrollbar {
largeur : 0px ;
}
.music-list ul li {
style de liste : aucun ;
affichage : flexible ;
curseur : pointeur;
rembourrage en bas : 10px ;
marge-bas : 5px ;
couleur : var ( --lightblack ) ;
bordure inférieure : 1px solide #E5E5E5 ;
}
.music-list ul li :dernier-enfant {
bordure inférieure : 0px ;
}
.music-list ul li .row span {
taille de police : 17px ;
}
.music-list ul li .row p {
opacité : 0,9 ;
}
ul li .audio-duration {
taille de police : 16px ;
}
ul li .playing {
événements de pointeur : aucun ;
couleur : var ( --violet ) ;
}Troisièmement, créez un fichier JavaScript nommé musiclist.js et collez le code spécifié dans le fichier JavaScript.
Notez que vous devez créer un fichier avec une extension .js. Ce fichier JavaScript utilise un tableau pour stocker tous les détails de la musique.
// Pour ajouter plus de chansons, copiez simplement le code suivant et collez-le dans le tableau
// {
// name : "Voici le nom de la musique",
// artiste : "Voici le nom de l'artiste",
// img : "le nom de l'image ici - rappelez-vous que img doit être au format .jpg et qu'il se trouve dans le dossier images de ce dossier de projet",
// src : "le nom de la musique ici - rappelez-vous que img doit être au format .mp3 et qu'il se trouve dans le dossier des chansons de ce dossier de projet"
// }
// collez-le à l'intérieur du tableau autant que vous voulez de la musique, vous n'avez rien d'autre à faire
laissez allMusic = [
{
nom: "Harley Bird - Accueil" ,
artiste: "Jordan Schor" ,
img: "musique-1" ,
src : "musique-1"
} ,
{
nom : "Ikson Anywhere – Ikson" ,
artiste : "Bibliothèque audio" ,
img: "musique-2" ,
src : "musique-2"
} ,
{
nom : "Beauz & Jvna - Crazy" ,
artiste : "Beauz & Jvna" ,
img: "musique-3" ,
src : "musique-3"
} ,
{
nom : "Hardwind - Want Me" ,
artiste: "Mike Archangelo" ,
img: "musique-4" ,
src : "musique-4"
} ,
{
nom : "Jim - Le soleil se couche" ,
artiste: "Jim Yosef x Roy" ,
img: "musique-5" ,
src : "musique-5"
} ,
{
nom : "Ciel Perdu - Vision NCS" ,
artiste : "NCS Release" ,
img: "musique-6" ,
src : "musique-6"
} ,
// comme ceci, collez-le et n'oubliez pas de donner une virgule après la fin de cette parenthèse }
// {
// name : "Voici le nom de la musique",
// artiste : "Voici le nom de l'artiste",
// img : "le nom de l'image ici - rappelez-vous que img doit être au format .jpg et qu'il se trouve dans le dossier images de ce dossier de projet",
// src : "le nom de la musique ici - rappelez-vous que img doit être au format .mp3 et qu'il se trouve dans le dossier des chansons de ce dossier de projet"
// }
] ;Enfin, créez un fichier JavaScript avec le nom de script.js et collez les codes donnés dans votre fichier JavaScript.
N’oubliez pas que vous devez créer un fichier avec l’extension .js.
enveloppe const = document . querySelector ( ".wrapper" ) ,
musicImg = emballage. querySelector ( ".img-area img" ) ,
musicName = wrapper. querySelector ( ".song-details .name" ) ,
musicArtist = emballage. querySelector ( ".song-details .artist" ) ,
playPauseBtn = wrapper. querySelector ( ".play-pause" ) ,
prevBtn = wrapper. querySelector ( "#prev" ) ,
nextBtn = wrapper. querySelector ( "#suivant" ) ,
audio principal = emballage. querySelector ( "#main-audio" ) ,
progressArea = wrapper. querySelector ( ".progress-area" ) ,
barre de progression = zone de progression. querySelector ( ".progress-bar" ) ,
musicList = wrapper. querySelector ( ".music-list" ) ,
moreMusicBtn = wrapper. querySelector ( "#more-music" ) ,
closemoreMusic = listemusique. querySelector ( "#fermer" ) ;
laissez musicIndex = Math. floor ( ( Math. random ( ) * allMusic. length ) + 1 ) ;
isMusicPaused = true ;
fenêtre . addEventListener ( "charger" , ( ) => {
chargerMusique ( musicIndex ) ;
jouerChanson ( ) ;
} ) ;C’est tout, vous avez maintenant créé avec succès un lecteur de musique personnalisé en JavaScript.
Si votre code ne fonctionne pas ou si vous avez rencontré une erreur/un problème, veuillez télécharger les fichiers de code source à partir du bouton de téléchargement indiqué.
C’est gratuit et un fichier .zip sera téléchargé puis vous devrez l’extraire.
ou demander le code complet a cette adresse,
