Código de amostra do player de música da web HTML5

Este artigo apresenta o código de exemplo do reprodutor de música da web HTML5 e o compartilha com todos. Os detalhes são os seguintes:

As tags de áudio e vídeo foram introduzidas em HTML5, o que nos permite reproduzir áudio e vídeo diretamente sem utilizar outros plug-ins. A seguir usaremos a tag de áudio do H5 e seus atributos e métodos relacionados para criar um reprodutor de música simples. Inclui principalmente as seguintes funções:

1. Pausa na reprodução, música anterior e próxima música

2. Ajuste o volume e a barra de progresso da reprodução

3. Mude a música atual de acordo com a lista

Vamos dar uma olhada no resultado final primeiro:

A estrutura deste reprodutor de música é dividida principalmente em três partes: informações da música, reprodutor e lista de reprodução. Vamos nos concentrar na parte do reprodutor. Primeiro coloque três tags de áudio no player para reprodução:

 <audio id=music1>O navegador não suporta a tag de áudio<source src=media/Beyond - The Glorious Years.mp3></source></audio><audio id=music2>O navegador não suporta a tag de áudio <source src=media /Daniel Powter - Free Loop.mp3></source></audio><audio id=music3>O navegador não suporta a tag de áudio<source src=media/Jay Chou, Fei Yuqing-Milhares de milhas de distância.mp3></source></audio>

A playlist abaixo também corresponde a três tags de áudio:

 <div id=playList> <ul> <li id=m0>Anos Além da Glória</li> <li id=m1>Daniel Powter-Free Loop</li> <li id=m2>Jay Chou, Fei Yuqing- Mil milhas fora</li> </ul></div>

A seguir, começaremos a implementar gradativamente as funções mencionadas acima. Primeiro, conclua as funções de reprodução e pausa. Ao pressionar o botão play, precisamos fazer a barra de progresso avançar com o andamento da música, o tempo de reprodução também aumenta gradativamente. e o botão de reprodução se torna o botão de pausa, o estilo da lista de reprodução também muda de acordo.

Antes de executar a função, devemos primeiro obter os IDs das três tags de áudio e armazená-los em um array para uso posterior.

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

Agora podemos completar a função do botão play. Primeiro, defina um sinalizador para marcar o status de reprodução da música e, em seguida, defina um valor padrão para o índice do array:

Em seguida, avalie o status da reprodução, chame a função correspondente e modifique o valor do sinalizador e o estilo do item correspondente da lista:

 função playMusic(){if(flag&&mList[index].paused){ ​​​​mList[index].play(); document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index) .style .color = branco;progressBar(); url(media/pause.png); sinalizador = false;}else{ mList[index].pause sinalizador = true;

O código acima chama múltiplas funções, entre as quais play e pause são os métodos que acompanham a tag audio, enquanto outras funções são definidas por nós mesmos. Vamos dar uma olhada em como essas funções são implementadas e a quais funções elas correspondem.

A primeira é a função da barra de progresso, que obtém toda a duração da música e, em seguida, calcula a posição da barra de progresso com base no progresso da reprodução atual multiplicado pela duração total da barra de progresso.

 function progressBar(){var lenth=mList[index].duration;timer1=setInterval(function(){ cur=mList[index].currentTime;//Obter o tempo de reprodução atual progress.style.width=+parseFloat(cur/ comprimento)*300+px; progressBtn.style.left= 60+parseFloat(cur/lenth)*300+px;},10)}

A seguir está a função de alterar o tempo de reprodução. Aqui configuramos uma função de temporização e a executamos de vez em quando para alterar o tempo de reprodução. Como a duração da música obtida é calculada em segundos, precisamos usar a instrução if para converter o julgamento da duração e alterar o tempo de reprodução para exibição em minutos e 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+; cur%60+; } } },1000);}

A seguir, vamos completar as funções de ajuste do progresso da reprodução e ajuste do volume por meio da barra de progresso.

A função de ajustar o progresso da reprodução é implementada usando o objeto de evento Como o atributo offsetX está disponível apenas em eventos do IE, é recomendado usar o navegador IE para visualizar o efeito. Primeiro, adicione um ouvinte de evento à barra de progresso. Quando o mouse é clicado na barra de progresso, a posição do mouse é obtida e o progresso da reprodução atual é calculado com base na posição dividida pelo comprimento total da barra de progresso e, em seguida, o progresso da reprodução atual é calculado com base na posição dividida pelo comprimento total da barra de progresso. a música está definida.

 //Ajustar o progresso da reprodução 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;}})

A seguir está a função de ajuste de volume. Usamos arrastar para ajustar o volume. A ideia é adicionar monitoramento de eventos à bola de botão da barra de volume e, em seguida, calcular a posição da bola de botão em relação à barra de volume geral com base no. posição arrastada Finalmente, de acordo com o cálculo O resultado é multiplicado pelo volume para obter o volume atual:

 volBtn.addEventListener(mousedown,function(event){var e = event || window.event;var that =this;//Evita o evento de arrastar padrão da bola e.preventDefault();document.onmousemove = function(event){ var e = evento || janela.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;}}})

Finalmente, implementaremos a função de troca de música mais complexa.

Vejamos primeiro como usar os botões anterior e seguinte para alternar. Existem vários problemas aos quais devemos prestar atenção ao alternar a música: primeiro, precisamos parar a música que está sendo reproduzida no momento e passar para a próxima música, a barra de progresso e a reprodução; o tempo deve ser apagado e recalculado; em terceiro lugar, as informações da música devem ser alteradas de acordo e o estilo da lista de reprodução no player também deve ser alterado. Depois de descobrir os três pontos acima, podemos começar a implementar a função.

 //Função da música 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);}} //Função da próxima música 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);}}

O código abaixo alterna as músicas clicando na 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 = função (){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. cor = branco;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();}

A ideia de alternar as músicas por meio de uma playlist é semelhante à de alternar por um botão. Apenas define qual música deve ser reproduzida no momento de acordo com o item da lista correspondente.

Vários métodos são chamados na função de troca de músicas acima. Vamos dar uma olhada nos usos desses métodos.

A primeira é mudar as informações da música:

 function changeInfo(index){if (index==0) { musicName.innerHTML = Glory Days; cantor.innerHTML = Beyond;}if (index==1) { musicName.innerHTML = Free Loop; }if (index==2) { musicName.innerHTML = Milhares de milhas de distância; cantor.innerHTML = Jay Chou, Fei Yuqing;}}

Em seguida, limpe os dois temporizadores:

 //Defina a barra de progresso para 0 function cleanProgress(timer1){if(timer1!=undefined){ clearInterval(timer1);}progress.style.width=0;progressBtn.style.left=60px;} function qingkong(timer2) { if (timer2!=indefinido){ clearInterval(timer2);}}

Pare a reprodução da música e retome o tempo de reprodução.

 função stopM(){if(mList[index].played){ mList[index].pause();

Por fim, altere o estilo da playlist abaixo:

 função clearListBgc(){document.getElementById(m0).style.backgroundColor = #E5E5E5;document.getElementById(m1).style.backgroundColor = #E5E5E5;document.getElementById(m2).style.backgroundColor = #E5E5E5;document.getElementById (m0).estilo.cor = preto;document.getElementById(m1).style.color = preto;document.getElementById(m2).style.color = preto;}

Neste ponto, basicamente concluímos o reprodutor de música. Vamos dar uma olhada no efeito da animação:

Autor: Jerry Educação

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

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.