Comment écrire un lecteur de musique Web en utilisant HTML5

Introduction aux fonctions

Les balises audio et vidéo ont été lancées en 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 HTML5 et ses attributs et méthodes associés pour créer un lecteur de musique simple. Concernant la production de lecteurs de musique web en HTML5, elle comprend principalement les fonctions suivantes :

1. Lecture et pause, chansons précédentes et suivantes

2. Régler le volume et la barre de progression de la lecture

.

3. Changez la chanson actuelle en fonction de la liste

Jetons un coup d'œil à l'effet final :

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

 <audio id="music1">浏览器不支持audio标签
<source src="media/Beyond - 光辉岁月.mp3"></source>
</audio>
<audio id="music2">浏览器不支持audio标签
<source src="media/Daniel Powter - Free Loop.mp3"></source>
</audio>
<audio id="music3">浏览器不支持audio标签
<source src="media/周杰伦、费玉清 - 千里之外.mp3"></source>
</audio>

La playlist suivante correspond également à trois balises audio :

 <div id="playList">
<ul>
<li id="m0">Beyond-光辉岁月</li>
<li id="m1">Daniel Powter-Free Loop</li>
<li id="m2">周杰伦、费玉清-千里之外</li>
</ul>
</div>
接下来我们就开始逐步实现上面提到的功能吧，先来完成播放和暂停功能，在按下播放按钮时我们要做到进度条随歌曲进度前进，播放时间也逐渐增加，同时播放按钮变成暂停按钮，播放列表的样式也对应改变。

Avant d'exécuter la fonction, il faut d'abord obtenir le ID des trois balises audio et stockez-les 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];

Lecture et pause :

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 l'index de. le tableau. Une valeur par défaut :

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

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

Appelé dans le code de la page HTML ci-dessus Il existe 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.

Barre de progression et temps de lecture :

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

function progressBar(){
var lenth=mList[index].duration;
timer1=setInterval(function(){
cur=mList[index].currentTime;//获取当前的播放时间
progress.style.width=""+parseFloat(cur/lenth)*300+"px";
progressBtn.style.left= 60+parseFloat(cur/lenth)*300+"px";
},10)
}

Ce qui suit est la fonction de modification de la durée de lecture. Ici, nous configurons une fonction de synchronisation et l'exécutons de temps en temps pour modifier la durée 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);//秒数
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+"";
}else{
playTime.innerText= minute+":"+cur%60+"";
}
}
},1000);
}

Ajuster la progression de la lecture et le volume :

Ensuite, complétons 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, et puis la chanson est réglée.

//调整播放进度
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";
}
})

Ce qui suit est 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 du bouton de la barre de volume, puis de calculer la position relative du bouton. balle en fonction de la position glissée. La position globale de la barre de volume, et enfin le volume actuel est obtenu en multipliant le résultat du calcul par le volume :

volBtn.addEventListener("mousedown",function(event){
var e = event || window.event;
var that =this;
//阻止球的默认拖拽事件
e.preventDefault();
document.onmousemove = function(event){
var e = event || 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;
}
}
})

Changement de chanson

Enfin, nous implémenterons une 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 faire attention lorsque nous changeons de musique : Tout d'abord, nous devons arrêter la musique en cours de lecture et passer à la suivante. Un morceau de musique ; deuxièmement, la barre de progression et le temps de lecture doivent être effacés et recalculés ; troisièmement, les informations sur la chanson doivent être modifiées 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.

//上一曲
function 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)";
}
}
//下一曲
function 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 suivant 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.color = "white";
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 à travers les listes de lecture est similaire à celle de changer de bouton. Elle définit simplement quelle chanson doit être jouée actuellement en fonction de l'élément de liste correspondant.

La première consiste à changer les informations de la chanson : 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.

Tout d'abord, changez les informations de la chanson :

function changeInfo(index){
if (index==0) {
musicName.innerHTML = "光辉岁月";
singer.innerHTML = "Beyond";
}
if (index==1) {
musicName.innerHTML = "Free Loop";
singer.innerHTML = "Daniel Powter";
}
if (index==2) {
musicName.innerHTML = "千里之外";
singer.innerHTML = "周杰伦、费玉清";
}
}

Ensuite, effacez les deux minuteries :

//将进度条置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 ensuite la lecture de la musique et reprenez la durée de lecture.

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

À ce stade, nous avons essentiellement terminé le lecteur de musique écrit en HTML5. Une fois terminé, l'effet est toujours très bon. Dépêchez-vous de le récupérer. J'espère que vous pourrez écrire votre propre lecteur en utilisant HTML5 sur la base du didacticiel ci-dessus.