Utiliser HTML5 pour implémenter un lecteur de musique Web

Cet article présente principalement l'exemple de code du lecteur de musique Web HTML5. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

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 :

1 Introduction à la fonction

. Introduite en HTML5 La balise audio et vidéo nous permet de lire de l'audio et de la vidéo directement sans utiliser d'autres plug-ins. Nous utiliserons ensuite la balise audio 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 de la pause, de la chanson précédente et suivante

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

3. chanson

Jetons un coup d'œil au résultat final :

La structure de ce lecteur de musique est principalement divisée en trois parties : informations sur la chanson, lecteur et liste de lecture , concentrons-nous sur la partie joueur. Tout d'abord, placez 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 :

<p id="playList">
    <ul>
        <li id="m0">Beyond-光辉岁月</li>
        <li id="m1">Daniel Powter-Free Loop</li>
        <li id="m2">周杰伦、费玉清-千里之外</li>
    </ul>
</p>

Ensuite, nous commençons à la mettre en œuvre étape par étape. les fonctions mentionnées ci-dessus, complétons d'abord les fonctions de lecture et de pause. Lorsque nous appuyons 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 en même temps le bouton de lecture. devient un bouton pause, le style de la liste de lecture correspond également aux modifications.

Avant d'exécuter la fonction, nous devons obtenir les identifiants des trois balises audio et les enregistrer 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];

2 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. . Définissez ensuite une valeur par défaut pour l'index du tableau :

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 :

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)";
}
}

Ci-dessus Plusieurs fonctions sont appelées dans le code, 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.

3 Barre de progression et temps de lecture :

La première est la fonction de barre de progression, qui obtient la durée complète de la chanson, puis compare la progression de lecture actuelle avec la longueur totale de la barre de progression Multipliez pour calculer la position 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);
}

4 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, puis de la barre de progression. 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 5 chansons

Enfin, nous implémenterons la fonction de changement de morceau plus compliquée.

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 ci-dessous consiste à cliquer sur la liste pour changer de chanson.

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.

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;
}
}

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 = "black";
document.getElementById("m1").style.color = "black";
document.getElementById("m2").style.color = "black";
}

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Solution au problème selon lequel la balise vidéo en HTML5 ne peut pas lire mp4

À propos de l'analyse de contrôle des nouveaux attributs H5 audio et vidéo

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!