Verwendung von HTML5 zur Implementierung eines Web-Musikplayers

In diesem Artikel wird hauptsächlich der Beispielcode des HTML5-Webmusikplayers vorgestellt. Der Inhalt ist ziemlich gut. Ich werde ihn jetzt als Referenz verwenden.

In diesem Artikel wird der Beispielcode des HTML5-Webmusik-Players vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

1 Funktionseinführung

Eingeführt in HTML5. Mit dem Audio- und Video-Tag können wir Audio und Video direkt abspielen, ohne andere Plug-Ins zu verwenden. Als Nächstes verwenden wir das Audio-Tag von H5 und die zugehörigen Attribute und Methoden, um einen einfachen Musikplayer zu erstellen. Es umfasst hauptsächlich die folgenden Funktionen:

1. Wiedergabepause, vorheriges und nächstes Lied

2. Passen Sie die Lautstärke und den Wiedergabefortschrittsbalken an

3 Song

Werfen wir einen Blick auf das Endergebnis:

Die Struktur dieses Musikplayers ist hauptsächlich in drei Teile unterteilt: Songinformationen, Player und Playlist Konzentrieren wir uns auf den Spielerteil. Legen Sie zunächst drei Audio-Tags für die Wiedergabe in den Player:

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

Die folgende Wiedergabeliste entspricht auch den drei Audio-Tags:

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

Als nächstes beginnen wir mit der schrittweisen Implementierung der oben genannten Funktion, lasst uns abschließen Zuerst müssen wir die Wiedergabe- und Pausenfunktionen nutzen, um den Fortschrittsbalken mit dem Fortschritt des Songs voranzutreiben. Gleichzeitig wird die Wiedergabetaste zur Pausentaste Auch der Stil der Playlist ändert sich entsprechend.

Bevor wir die Funktion ausführen, müssen wir die IDs der drei Audio-Tags abrufen und sie zur späteren Verwendung in einem Array speichern.

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

2 Wiedergabe und Pause:

Wir können nun die Funktion der Wiedergabetaste abschließen. Setzen Sie zunächst ein Flag, um den Wiedergabestatus der Musik zu markieren, und dann Der Indexindex des Arrays wird auf einen Standardwert gesetzt:

Anschließend wird der Wiedergabestatus beurteilt, die entsprechende Funktion aufgerufen und der Wert des Flags und der entsprechende Elementstil der Liste geändert:

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

Im obigen Code aufgerufen. Es gibt mehrere Funktionen, darunter Wiedergabe und Pause als Methoden, die mit dem Audio-Tag geliefert werden, während andere Funktionen von uns selbst definiert werden. Schauen wir uns an, wie diese Funktionen implementiert sind und welchen Funktionen sie entsprechen.

3 Fortschrittsbalken und Wiedergabezeit:

Die erste ist die Fortschrittsbalkenfunktion, die die gesamte Dauer des Songs ermittelt und dann den aktuellen Wiedergabefortschritt damit vergleicht die Gesamtlänge des Fortschrittsbalkens. Multiplizieren Sie, um die Position des Fortschrittsbalkens zu berechnen.

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

Das Folgende ist die Funktion zum Ändern der Wiedergabezeit. Hier richten wir eine Timing-Funktion ein und führen sie von Zeit zu Zeit aus, um die Wiedergabezeit zu ändern. Da die von uns erhaltene Lieddauer in Sekunden berechnet wird, müssen wir die if-Anweisung verwenden, um die Dauerbeurteilung umzuwandeln und die Wiedergabezeit so zu ändern, dass sie in Minuten und Sekunden angezeigt wird.

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 Passen Sie den Wiedergabefortschritt und die Lautstärke an:

Als nächstes schließen wir die Funktionen zum Anpassen des Wiedergabefortschritts und zum Anpassen der Lautstärke über den Fortschrittsbalken ab.

Die Funktion zum Anpassen des Wiedergabefortschritts wird mithilfe des Ereignisobjekts implementiert. Da das OffsetX-Attribut nur in IE-Ereignissen verfügbar ist, wird empfohlen, den IE-Browser zu verwenden, um den Effekt anzuzeigen. Fügen Sie zunächst einen Ereignis-Listener zum Fortschrittsbalken hinzu. Wenn Sie mit der Maus auf den Fortschrittsbalken klicken, wird die Position der Maus ermittelt und der aktuelle Wiedergabefortschritt basierend auf der Position dividiert durch die Gesamtlänge des Fortschrittsbalkens berechnet dann ist das Lied eingestellt.

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

Das Folgende ist die Lautstärkeanpassungsfunktion. Wir verwenden Ziehen, um die Lautstärke anzupassen. Die Idee besteht darin, der Knopfkugel der Lautstärkeleiste eine Ereignisüberwachung hinzuzufügen und dann die Knopfkugel relativ zur Lautstärkeleiste zu berechnen Basierend auf der gezogenen Position wird die Gesamtposition und schließlich die aktuelle Lautstärke durch Multiplikation des Berechnungsergebnisses mit der Lautstärke erhalten:

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

5 Song Switching

Schließlich Wir werden eine komplexere Song-Umschaltfunktion implementieren.

Schauen wir uns zunächst die Verwendung der Zurück- und Weiter-Tasten zum Wechseln an. Beim Wechseln der Musik sollten wir auf mehrere Punkte achten: Zuerst müssen wir die aktuell abgespielte Musik stoppen und zur nächsten wechseln Zweitens müssen der Fortschrittsbalken und die Wiedergabezeit gelöscht und neu berechnet werden. Drittens müssen die Songinformationen entsprechend geändert werden, und auch der Wiedergabelistenstil unter dem Player muss geändert werden. Nachdem wir die oben genannten drei Punkte herausgefunden haben, können wir mit der Implementierung der Funktion beginnen.

//上一曲
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)";
}
}

Der folgende Code dient zum Wechseln der Songs durch Klicken auf die 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();
}

Die Idee, Songs über Playlists zu wechseln, ähnelt dem Umschalten über Schaltflächen. Es wird lediglich festgelegt, welcher Song entsprechend dem entsprechenden Listenelement aktuell abgespielt werden soll.

In der Funktion zum Wechseln von Songs werden oben mehrere Methoden aufgerufen. Schauen wir uns die Verwendung dieser Methoden an.

Ändern Sie zuerst die Songinformationen:

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 = "周杰伦、费玉清";
}
}

Dann löschen Sie die beiden Timer:

//将进度条置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);
}
}

Stoppen Sie dann die Musikwiedergabe und stellen Sie die Spielzeit wieder her.

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

Ändern Sie abschließend den Stil der Wiedergabeliste unten:

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

An diesem Punkt haben wir im Grunde den Musikplayer fertiggestellt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Lösung für das Problem, dass der Video-Tag in HTML5 mp4 nicht abspielen kann

Über die Kontrollanalyse der neuen H5-Attribute Audio und Video

Das obige ist der detaillierte Inhalt vonVerwendung von HTML5 zur Implementierung eines Web-Musikplayers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!