Exemple de code du lecteur de musique Web HTML5

Cet article présente l'exemple de code du lecteur de musique Web HTML5 et le partage avec tout le monde. Les détails sont les suivants :

Les balises audio et vidéo ont été introduites dans HTML5, ce qui nous permet de lire l'audio et la vidéo directement sans utiliser d'autres plug-ins. Nous utiliserons ensuite la balise audio de H5 et ses attributs et méthodes associés pour créer un lecteur de musique simple. Il comprend principalement les fonctions suivantes :

1. Lecture pause, chanson précédente et chanson suivante

2. Ajustez le volume et la barre de progression de la lecture

3. Changez la chanson actuelle en fonction de la liste

Voyons d'abord le résultat final :

La structure de ce lecteur de musique est principalement divisée en trois parties : informations sur la chanson, lecteur et playlist. Concentrons-nous sur la partie lecteur. Mettez d’abord trois balises audio dans le lecteur pour la lecture :

 <audio id=music1>Le navigateur ne prend pas en charge la balise audio<source src=media/Beyond - The Glorious Years.mp3></source></audio><audio id=music2>Le navigateur ne prend pas en charge la balise audio <source src=media /Daniel Powter - Free Loop.mp3></source></audio><audio id=music3>Le navigateur ne prend pas en charge la balise audio<source src=media/Jay Chou, Fei Yuqing-Des milliers de miles loin.mp3></source></audio>

La playlist ci-dessous correspond également à trois balises audio :

 <div id=playList> <ul> <li id=m0>Au-delà des années de gloire</li> <li id=m1>Daniel Powter-Free Loop</li> <li id=m2>Jay Chou, Fei Yuqing- Mille milles dehors</li> </ul></div>

Ensuite, nous commencerons à mettre en œuvre progressivement les fonctions mentionnées ci-dessus. Tout d'abord, complétez les fonctions de lecture et de pause. Lorsque vous appuyez sur le bouton de lecture, nous devons faire avancer la barre de progression avec la progression de la chanson, le temps de lecture augmente également progressivement. et le bouton de lecture devient le bouton Pause, le style de la playlist change également en conséquence.

Avant d'exécuter la fonction, nous devons d'abord obtenir les identifiants des trois balises audio et les stocker dans un tableau pour une utilisation ultérieure.

 var music1= document.getElementById(music1);var music2= document.getElementById(music2);var music3= document.getElementById(music3);var mList = [music1,music2,music3];

Nous pouvons maintenant compléter la fonction du bouton de lecture. Tout d'abord, définir un indicateur pour marquer l'état de lecture de la musique, puis définir une valeur par défaut pour l'index du tableau :

Jugez ensuite l'état de lecture, appelez la fonction correspondante et modifiez la valeur de l'indicateur et le style d'élément correspondant de la liste :

 function playMusic(){if(flag&&mList[index].paused){ ​​​​mList[index].play(); document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index) .style .color = blanc;progressBar(); playTimes(); play.style.backgroundImage = url(media/pause.png); flag = false;}else{ mList[index].pause(); flag = true; play.style.backgroundImage = url(media/play.png);}}

Le code ci-dessus appelle plusieurs fonctions, parmi lesquelles play et pause sont les méthodes fournies avec la balise audio, tandis que d'autres fonctions sont définies par nous-mêmes. Voyons comment ces fonctions sont implémentées et à quelles fonctions elles correspondent.

La première est la fonction de barre de progression, qui obtient la durée totale de la chanson, puis calcule la position de la barre de progression en fonction de la progression de la lecture actuelle multipliée par la longueur totale de la barre de progression.

 function progressBar(){var lenth=mList[index].duration;timer1=setInterval(function(){ cur=mList[index].currentTime;//Obtenir l'heure de lecture actuelle progress.style.width=+parseFloat(cur/ longueur)*300+px; progressBtn.style.left= 60+parseFloat(cur/lenth)*300+px;},10)}

Ce qui suit est la fonction de modification du temps de lecture. Ici, nous configurons une fonction de synchronisation et l'exécutons de temps en temps pour modifier le temps de lecture. Étant donné que la durée de la chanson que nous avons obtenue est calculée en secondes, nous devons utiliser l'instruction if pour convertir le jugement de durée et modifier le temps de lecture pour l'afficher en minutes et secondes.

 function playTimes(){timer2=setInterval(function(){ cur=parseInt(mList[index].currentTime);//Seconds var minute=parseInt(cur/60); if (minute<10) { if(cur% 60 <10){ playTime.innerHTML=0+minute+:0+cur%60+ }else{ playTime.innerHTML=0+minute+:+cur%60+; } } else{ if(cur%60<10){ playTime.innerText= minute+:0+cur%60+; cur%60+; } } },1000);}

Complétons ensuite les fonctions de réglage de la progression de la lecture et de réglage du volume via la barre de progression.

La fonction d'ajustement de la progression de la lecture est implémentée à l'aide de l'objet événement. Étant donné que l'attribut offsetX n'est disponible que dans les événements IE, il est recommandé d'utiliser le navigateur IE pour visualiser l'effet. Ajoutez d'abord un écouteur d'événement à la barre de progression Lorsque vous cliquez avec la souris sur la barre de progression, la position de la souris est obtenue et la progression de la lecture actuelle est calculée en fonction de la position divisée par la longueur totale de la barre de progression, puis de la barre de progression. la chanson est réglée.

 //Ajuster la progression de la lecture total.addEventListener(click,function(event){var e = event || window.event;document.onmousedown = function(event){ var e = event || window.event; var mousePos1 = e. offsetX; var maxValue1 = total.scrollWidth; mList[index].currentTime = (mousePos1/300)*mList[index].duration; progress.style.width = mousePos1+px; progressBtn.style.left = 60+ mousePos1 +px;}})

Voici la fonction de réglage du volume. Nous utilisons le glisser pour régler le volume. L'idée est d'ajouter une surveillance des événements à la boule de bouton de la barre de volume, puis de calculer la position de la boule de bouton par rapport à la barre de volume globale en fonction de la fonction de réglage du volume. position glissée Enfin, selon le calcul Le résultat est multiplié par le volume pour obtenir le volume actuel :

 volBtn.addEventListener(mousedown,function(event){var e = event || window.event;var that =this;//Empêcher l'événement de glissement par défaut de la balle e.preventDefault();document.onmousemove = function(event){ var e = événement || window.event;var mousePos2 = e.offsetY;var maxValue2 = vol.scrollHeight;if(mousePos2<0){ mousePos2 = 0;}if(mousePos2>maxValue2){ mousePos2=maxValue2;}mList[index].volume = (1-mousePos2/maxValue2);console.log(mList[index ].volume);volBtn.style.top = (mousePos2)+px;volBar.style.height = 60-(mousePos2)+px;document.onmouseup = function(event){ document.onmousemove = null; document.onmouseup = null;}}})

Enfin, nous implémenterons la fonction de changement de chanson plus complexe.

Examinons d'abord l'utilisation des boutons précédent et suivant pour basculer. Il y a plusieurs problèmes auxquels nous devons prêter attention lors du changement de musique : premièrement, nous devons arrêter la musique en cours de lecture et passer à la seconde musique suivante, à la barre de progression et à la lecture ; le temps doit être effacé et recalculé ; troisièmement, les informations sur la chanson doivent changer en conséquence, et le style de la liste de lecture sous le lecteur doit également changer. Après avoir compris les trois points ci-dessus, nous pouvons commencer à implémenter la fonction.

 //Fonction de chanson précédente prevM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();--index;if(index==-1){ index=mList.length - 1;}clearListBgc();document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.backgroundImage = url(media/play.png);}else{ play.style.backgroundImage = url(media/pause.png);}} // Fonction de la chanson suivante nextM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();++index;if(index = =mList.length){ index=0;}clearListBgc();document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.backgroundImage = url(media/play.png);}else{ play.style.backgroundImage = url(media/pause.png);}}

Le code ci-dessous change de chanson en cliquant sur la liste.

 m0.onclick = function (){clearInterval(timer1);clearInterval(timer2);qingkong();flag = false;stopM();index = 0;pauseall();play.style.backgroundImage = url(media/pause. png);clearListBgc();document.getElementById(m0).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;mList[index].play();cleanProgress();progressBar();changeInfo(index);playTimes();}m1.onclick = function (){clearInterval(timer1);clearInterval(timer2);flag = false;qingkong();stopM();index = 1;pauseall();clearListBgc();play.style.backgroundImage = url(media/pause.png);document.getElementById(m1).style.backgroundColor = #A71307;document.getElementById(m+index).style. couleur= blanc;mList[index].play();cleanProgress();changeInfo(index);progressBar();playTimes();}m2.onclick = function (){clearInterval(timer1);clearInterval(timer2);flag = false ;qingkong();stopM();index = 2;pauseall();play.style.backgroundImage = url(media/pause.png);clearListBgc();document.getElementById(m2).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;mList[index].play() ;cleanProgress();changeInfo(index);progressBar();playTimes();}

L'idée de changer de chanson via une liste de lecture est similaire à celle de basculer via un bouton. Elle définit simplement quelle chanson doit être jouée actuellement en fonction de l'élément de liste correspondant.

Plusieurs méthodes sont appelées dans la fonction de changement de chanson ci-dessus. Jetons un coup d'œil aux utilisations de ces méthodes.

La première consiste à changer les informations sur la chanson :

 function changeInfo(index){if (index==0) { musicName.innerHTML = Glory Days; singer.innerHTML = Beyond;}if (index==1) { musicName.innerHTML = Free Loop; }if (index==2) { musicName.innerHTML = À des milliers de kilomètres de là ; singer.innerHTML = Jay Chou, Fei Yuqing ;}}

Effacez ensuite les deux minuteries :

 //Définissez la barre de progression sur 0 function cleanProgress(timer1){if(timer1!=undefined){ clearInterval(timer1);}progress.style.width=0;progressBtn.style.left=60px;} function qingkong(timer2) { if (timer2!=undefined){ clearInterval(timer2);}}

Arrêtez la lecture de la musique et reprenez le temps de lecture.

 function stopM(){if(mList[index].played){ mList[index].pause(); mlist[index].currentTime=0 flag=false;}}

Enfin, changez le style de la playlist ci-dessous :

 function clearListBgc(){document.getElementById(m0).style.backgroundColor = #E5E5E5;document.getElementById(m1).style.backgroundColor = #E5E5E5;document.getElementById(m2).style.backgroundColor = #E5E5E5;document.getElementById (m0).style.color = noir;document.getElementById(m1).style.color = noir;document.getElementById(m2).style.color = noir;}

À ce stade, nous avons pratiquement terminé le lecteur de musique. Jetons un coup d’œil à l’effet de l’animation :

Auteur : Jerry Education

Source : http://www.cnblogs.com/jerehedu/

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.