Código de muestra del reproductor de música web HTML5

Este artículo presenta el código de muestra del reproductor de música web HTML5 y lo comparte con todos. Los detalles son los siguientes:

Las etiquetas de audio y video se introdujeron en HTML5, lo que nos permite reproducir audio y video directamente sin usar otros complementos. A continuación usaremos la etiqueta de audio de H5 y sus atributos y métodos relacionados para crear un reproductor de música simple. Incluye principalmente las siguientes funciones:

1. Reproducir pausa, canción anterior y siguiente canción.

2. Ajusta el volumen y la barra de progreso de reproducción.

3. Cambie la canción actual según la lista.

Primero echemos un vistazo al resultado final:

La estructura de este reproductor de música se divide principalmente en tres partes: información de la canción, reproductor y lista de reproducción. Centrémonos en la parte del reproductor. Primero coloque tres etiquetas de audio en el reproductor para reproducirlas:

 <audio id=music1>El navegador no admite la etiqueta de audio<source src=media/Beyond - The Glorious Years.mp3></source></audio><audio id=music2>El navegador no admite la etiqueta de audio <fuente src=media /Daniel Powter - Free Loop.mp3></fuente></audio><audio id=music3>El navegador no admite la etiqueta de audio<fuente src=media/Jay Chou, Fei Yuqing-Miles de millas de distancia.mp3></source></audio>

La lista de reproducción a continuación también corresponde a tres etiquetas de audio:

 <div id=playList> <ul> <li id=m0>Años más allá de la gloria</li> <li id=m1>Daniel Powter-Free Loop</li> <li id=m2>Jay Chou, Fei Yuqing- Mil millas afuera</li> </ul></div>

A continuación, comenzaremos a implementar gradualmente las funciones mencionadas anteriormente. Primero, complete las funciones de reproducción y pausa. Al presionar el botón de reproducción, debemos hacer que la barra de progreso avance con el progreso de la canción, el tiempo de reproducción también aumenta gradualmente. y el botón de reproducción se convierte en el botón de Pausa, el estilo de la lista de reproducción también cambia en consecuencia.

Antes de realizar la función, primero debemos obtener los ID de las tres etiquetas de audio y almacenarlos en una matriz para su uso posterior.

 var música1= document.getElementById(música1);var música2= document.getElementById(música2);var música3= document.getElementById(música3);var mList = [música1,música2,música3];

Ahora podemos completar la función del botón de reproducción. Primero, establezca una bandera para marcar el estado de reproducción de la música y luego establezca un valor predeterminado para el índice de la matriz:

Luego juzgue el estado de reproducción, llame a la función correspondiente y modifique el valor de la bandera y el estilo del elemento correspondiente de la lista:

 function reproducirMusic(){if(flag&&mList[index].paused){ ​​​​mList[index].play(); document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index) .style .color = blanco;progressBar(); playTimes(); play.style.backgroundImage = url(media/pause.png); bandera = false;}else{ mList[index].pause(); play.style.backgroundImage = url(media/play.png);}}

El código anterior llama a múltiples funciones, entre las cuales reproducir y pausar son los métodos que vienen con la etiqueta de audio, mientras que otras funciones las definimos nosotros mismos. Echemos un vistazo a cómo se implementan estas funciones y a qué funciones corresponden.

La primera es la función de barra de progreso, que obtiene la duración total de la canción y luego calcula la posición de la barra de progreso en función del progreso de reproducción actual multiplicado por la longitud total de la barra de progreso.

 function ProgressBar(){var lenth=mList[index].duration;timer1=setInterval(function(){ cur=mList[index].currentTime;//Obtener el tiempo de reproducción actual Progress.style.width=+parseFloat(cur/ longitud)*300+px; progresoBtn.style.left= 60+parseFloat(cur/lenth)*300+px;},10)}

La siguiente es la función de cambiar el tiempo de reproducción. Aquí configuramos una función de sincronización y la ejecutamos de vez en cuando para cambiar el tiempo de reproducción. Debido a que la duración de la canción que obtuvimos se calcula en segundos, necesitamos usar la declaración if para convertir el juicio de duración y cambiar el tiempo de reproducción para que se muestre en minutos y segundos.

 function playTimes(){timer2=setInterval(function(){ cur=parseInt(mList[index].currentTime);//Segundos var minuto=parseInt(cur/60); if (minuto<10) { if(cur% 60 <10){ playTime.innerHTML=0+minuto+:0+cur%60+ }else{ playTime.innerHTML=0+minuto+:+cur%60+; } } else{ if(cur%60<10){ playTime.innerText= minuto+:0+cur%60+ }else{ playTime.innerText= minuto+:+; cur%60+; } } },1000);}

A continuación, completemos las funciones de ajustar el progreso de la reproducción y ajustar el volumen a través de la barra de progreso.

La función de ajustar el progreso de la reproducción se implementa mediante el uso del objeto de evento. Debido a que el atributo offsetX solo está disponible en eventos de IE, se recomienda utilizar el navegador IE para ver el efecto. Primero agregue un detector de eventos a la barra de progreso. Cuando se hace clic con el mouse en la barra de progreso, se obtiene la posición del mouse y el progreso de reproducción actual se calcula en función de la posición dividida por la longitud total de la barra de progreso, y luego el la canción está configurada.

 //Ajustar el progreso de reproducción 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].duración; progreso.estilo.ancho = mousePos1+px; progresoBtn.style.left = 60+ mousePos1 +px;}})

La siguiente es la función de ajuste de volumen. Usamos arrastrar para ajustar el volumen. La idea es agregar monitoreo de eventos a la bola de botón de la barra de volumen y luego calcular la posición de la bola de botón en relación con la barra de volumen general en función de la función. posición arrastrada Finalmente, según el cálculo El resultado se multiplica por el volumen para obtener el volumen actual:

 volBtn.addEventListener(mousedown,function(event){var e = event || window.event;var that =this;//Evitar el evento de arrastre predeterminado de la pelota e.preventDefault();document.onmousemove = function(event){ var e = evento || ventana.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] ].volumen);volBtn.style.top = (mousePos2)+px;volBar.style.height = 60-(mousePos2)+px;document.onmouseup = function(event){ document.onmousemove = null; document.onmouseup = null;}}})

Finalmente, implementaremos la función de cambio de canción más compleja.

Primero veamos cómo usar los botones anterior y siguiente para cambiar. Hay varios problemas a los que debemos prestar atención al cambiar de música: primero, debemos detener la música que se está reproduciendo actualmente y, en segundo lugar, cambiar a la siguiente música, la barra de progreso y la reproducción; el tiempo debe borrarse y recalcularse; en tercer lugar, la información de la canción debe cambiar en consecuencia y el estilo de la lista de reproducción en el reproductor también debe cambiar. Después de comprender los tres puntos anteriores, podemos comenzar a implementar la función.

 // Función de canción anterior 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);}} // Función de siguiente canción 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(medios/pausa.png);}}

El siguiente código cambia de canción haciendo clic en la lista.

 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 = función (){clearInterval(temporizador1);clearInterval(temporizador2);bandera = false;qingkong();stopM();índice = 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 = blanco;mList[index].play() ;cleanProgress();changeInfo(index);progressBar();playTimes();}

La idea de cambiar de canción a través de una lista de reproducción es similar a la de cambiar a través de un botón: simplemente establece qué canción se debe reproducir actualmente de acuerdo con el elemento de la lista correspondiente.

Se llaman varios métodos en la función de cambiar de canción anterior. Echemos un vistazo a los usos de estos métodos.

La primera es cambiar la información de la canción:

 función changeInfo(index){if (index==0) { musicName.innerHTML = Glory Days; cantante.innerHTML = Más allá;}if (index==1) { musicName.innerHTML = Free Loop; }if (index==2) { musicName.innerHTML = Miles de millas de distancia cantante.innerHTML = Jay Chou, Fei Yuqing;}}

Luego borre ambos temporizadores:

 //Establece la barra de progreso en 0 function cleanProgress(timer1){if(timer1!=undefinido){ clearInterval(timer1);}progress.style.width=0;progressBtn.style.left=60px;} function qingkong(timer2) { if (temporizador2!=indefinido){ clearInterval(temporizador2);}}

Detenga la reproducción de música y reanude el tiempo de reproducción.

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

Finalmente, cambia el estilo de la lista de reproducción a continuación:

 función clearListBgc(){document.getElementById(m0).style.backgroundColor = #E5E5E5;document.getElementById(m1).style.backgroundColor = #E5E5E5;document.getElementById(m2).style.backgroundColor = #E5E5E5;document.getElementById (m0).estilo.color = negro;document.getElementById(m1).style.color = negro;document.getElementById(m2).style.color = negro;}

En este punto, básicamente hemos completado el reproductor de música. Echemos un vistazo al efecto de la animación:

Autor: Jerry Educación

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

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.