So schreiben Sie einen Web-Musikplayer mit HTML5

Funktionseinführung

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 HTML5 und die zugehörigen Attribute und Methoden, um einen einfachen Musikplayer zu erstellen. In Bezug auf die Produktion von Web-Musikplayern in HTML5 umfasst es hauptsächlich die folgenden Funktionen:

1. Wiedergabe und Pause, vorheriger und nächster Titel

2

3. Wechseln Sie das aktuelle Lied entsprechend der Liste

Werfen wir einen Blick auf den endgültigen Effekt:

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

 <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 drei Audio-Tags:

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

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

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

Wiedergabe und Pause:

Wir können jetzt die Funktion der Wiedergabetaste abschließen. Zuerst ein Flag setzen, um den Wiedergabestatus der Musik zu markieren, und dann den Index festlegen Das Array. Ein Standardwert:

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

Wird im aufgerufen Code der obigen HTML-Seite 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.

Fortschrittsbalken und Wiedergabezeit:

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

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

Wiedergabefortschritt und Lautstärke anpassen:

Als nächstes schließen wir die Funktionen zum Anpassen des Wiedergabefortschritts und 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 Mausposition ermittelt und der aktuelle Wiedergabefortschritt basierend auf der Position dividiert durch die Gesamtlänge des Fortschrittsbalkens berechnet Lied ist 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 Schaltflächenkugel der Lautstärkeleiste eine Ereignisüberwachung hinzuzufügen und dann die relative Position der Schaltfläche zu berechnen Ball basierend auf der gezogenen Position und schließlich die aktuelle Lautstärke, indem das Berechnungsergebnis mit der Lautstärke multipliziert wird:

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

Songwechsel

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 müssen wir auf mehrere Punkte achten: Zuerst müssen wir die aktuell abgespielte Musik stoppen und zur nächsten wechseln. Ein Musikstück; 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 besteht darin, auf die Liste zu klicken, um die Songs zu wechseln.

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.

Die erste besteht darin, Songinformationen zu wechseln: In der oben genannten Funktion zum Wechseln von Songs werden mehrere Methoden aufgerufen.

Ändern Sie zunächst 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 setzen Sie die Spielzeit fort.

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

Zu diesem Zeitpunkt haben wir den in HTML5 geschriebenen Musikplayer im Grunde fertiggestellt. Nach der Fertigstellung ist der Effekt immer noch sehr gut. Beeilen Sie sich und holen Sie es sich. Ich hoffe, Sie können Ihren eigenen Player mit HTML5 basierend auf dem obigen Tutorial schreiben.