Beispielcode für einen HTML5-Webmusik-Player

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

Die Audio- und Video-Tags wurden in HTML5 eingeführt, wodurch wir Audio und Video direkt abspielen können, 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 Lied und nächstes Lied

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

3. Wechseln Sie das aktuelle Lied entsprechend der Liste

Werfen wir zunächst 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 Player-Teil. Legen Sie zunächst drei Audio-Tags zur Wiedergabe in den Player:

 <audio id=music1>Der Browser unterstützt das Audio-Tag nicht<source src=media/Beyond - The Glorious Years.mp3></source></audio><audio id=music2>Der Browser unterstützt das Audio-Tag nicht <source src=media /Daniel Powter - Free Loop.mp3></source></audio><audio id=music3>Der Browser unterstützt das Audio-Tag<source nicht src=media/Jay Chou, Fei Yuqing-Thousands of Miles Away.mp3></source></audio>

Die folgende Playlist entspricht auch drei Audio-Tags:

 <div id=playList> <ul> <li id=m0>Beyond-Glory Years</li> <li id=m1>Daniel Powter-Free Loop</li> <li id=m2>Jay Chou, Fei Yuqing- Tausend Meilen außerhalb</li> </ul></div>

Als nächstes beginnen wir mit der schrittweisen Implementierung der oben genannten Funktionen. Schließen Sie zunächst die Wiedergabe- und Pausenfunktionen ab. Wenn Sie die Wiedergabetaste drücken, müssen wir den Fortschrittsbalken mit dem Fortschritt des Songs vorantreiben. und die Wiedergabeschaltfläche zur Pauseschaltfläche wird, ändert sich auch der Stil der Wiedergabeliste entsprechend.

Bevor wir die Funktion ausführen, müssen wir zunächst 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];

Wir können nun die Funktion der Wiedergabetaste abschließen. Setzen Sie zunächst ein Flag, um den Wiedergabestatus der Musik zu markieren, und legen Sie dann einen Standardwert für den Index des Arrays fest:

Beurteilen Sie dann den Wiedergabestatus, rufen Sie die entsprechende Funktion auf und ändern Sie den Flag-Wert und den entsprechenden Elementstil der 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 = true;

Der obige Code ruft mehrere Funktionen auf, 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.

Die erste ist die Fortschrittsbalkenfunktion, die die gesamte Dauer des Songs ermittelt und dann die Position des Fortschrittsbalkens basierend auf dem aktuellen Wiedergabefortschritt multipliziert mit der Gesamtlänge des Fortschrittsbalkens berechnet.

 function progressBar(){var lenth=mList[index].duration;timer1=setInterval(function(){ cur=mList[index].currentTime;//Erhalten Sie die aktuelle Wiedergabezeit 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);//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+; }else{ playTime.innerText= minute+:+ cur%60+; } } },1000);}

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 zum Anzeigen des Effekts zu verwenden. Fügen Sie zunächst einen Ereignis-Listener zum Fortschrittsbalken hinzu. Wenn Sie mit der Maus auf den Fortschrittsbalken klicken, wird die Mausposition ermittelt und der aktuelle Wiedergabefortschritt basierend auf der Position dividiert durch die Gesamtlänge des Fortschrittsbalkens berechnet Lied ist eingestellt.

 //Wiedergabefortschritt anpassen 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. Die Idee besteht darin, der Knopfkugel der Lautstärkeleiste eine Ereignisüberwachung hinzuzufügen und dann die Position der Knopfkugel relativ zur Gesamtlautstärkeleiste zu berechnen Gezogene Position Schließlich wird das Ergebnis gemäß der Berechnung mit dem Volumen multipliziert, um das aktuelle Volumen zu erhalten:

 volBtn.addEventListener(mousedown,function(event){var e = event || window.event;var that =this;//Verhindern Sie das Standard-Drag-Ereignis des Balls 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;}}})

Abschließend implementieren wir die komplexere Song-Umschaltfunktion.

Schauen wir uns zunächst die Verwendung der Schaltflächen „Zurück“ und „Weiter“ zum Wechseln an. Beim Wechseln der Musik müssen wir auf mehrere Probleme achten: Erstens müssen wir die aktuelle Musikwiedergabe stoppen und zum nächsten Musiktitel wechseln Die Zeit muss gelöscht und neu berechnet werden. Drittens müssen sich die Songinformationen entsprechend ändern, und auch der Wiedergabelistenstil unter dem Player muss sich ändern. Nachdem wir die oben genannten drei Punkte herausgefunden haben, können wir mit der Implementierung der Funktion beginnen.

 //Funktion des vorherigen Songs 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);}} //Nächste Liedfunktion 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 wechselt die Songs, indem Sie auf die Liste klicken.

 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. Farbe= 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 eine Playlist zu wechseln, ähnelt der des Umschaltens über eine Schaltfläche. Es wird lediglich festgelegt, welcher Song entsprechend dem entsprechenden Listenelement aktuell abgespielt werden soll.

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

Die erste besteht darin, die Songinformationen zu ändern:

 function changeInfo(index){if (index==0) { musicName.innerHTML = Glory Days;}if (index==1) { musicName.innerHTML = Free Loop; }if (index==2) { musicName.innerHTML = Thousands of Miles Away; Singer.innerHTML = Jay Chou, Fei Yuqing;}}

Dann löschen Sie beide Timer:

 //Fortschrittsbalken auf 0 setzen function cleanProgress(timer1){if(timer1!=undefined){ clearInterval(timer1);}progress.style.width=0;progressBtn.style.left=60px;} function qingkong(timer2) { if (timer2!=undefiniert){ clearInterval(timer2);}}

Stoppen Sie die Musikwiedergabe und setzen Sie die Wiedergabe fort.

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

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

 Funktion 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 den Musikplayer im Grunde fertiggestellt. Schauen wir uns den Effekt der Animation an:

Autor: Jerry Education

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.