Usando HTML5 para controlar os interruptores de música de fundo

Às vezes, adicionamos música de fundo à página, permitindo que os usuários liguem e desativem a música em segundo plano, especialmente as páginas multimídia feitas com base no Mobile HTML5. A tag de áudio do HTML5 pode obter o status de reprodução de áudio, e a música de fundo pode ser desligada e ligada tocando o botão.

As renderizações são as seguintes:

Crie uma página HTML5, coloque a tag <Audio>, defina a fonte do arquivo de áudio e defina reprodução de loop. Prepare duas fotos, indicando os dois estados de ligar e fazer uma pausa na música de fundo, você pode clicar.

Código XML/HTML Copito de Conteúdo para a área de transferência

1. <udioid = music2src = music.mp3loop = loop> Seu navegador não suporta a tag de áudio. </udio>
2. <ahref = javascript: playpause ();> <imgsrc = pause.gifwidth = 48Height = 50id = music_btn2border = 0> </a>

Quando clicamos no botão Switch Image, chamamos o script JavaScript e a função PlayPause (). Na função, julgue o status de reprodução de áudio. Se tiver sido interrompido (pausado), ligue para .Play () para continuar jogando. Se estiver no status de reprodução, reprodução. Pausa () será suspensa imediatamente. Ao alternar entre os dois estados, consulte o código:

JavaScript Code Copy Content para a área de transferência

1. functionplayPause () {
2. varmusic = document.getElementById ('music2');
3. varmusic_btn = document.getElementById ('music_btn2');
4. if (music.paUsed) {
5. music.play ();
6. music_btn.src = 'play.gif';
7. }
8. outro{
9. music.Pause ();
10. music_btn.src = 'pause.gif';
11. }
12. }

Se você usar o código jQuery, pode escrevê -lo assim:

JavaScript Code Copy Content para a área de transferência

1. ) </udio>
2. <id = audio_btn> <imgsrc = play.gifwidth = 48Height = 50id = music_btnborder = 0> </a>
3. <Cript>
4. $ (#audio_btn) .Click (function () {
5. varmusic = document.getElementById (música);
6. if (music.paUsed) {
7. music.play ();
8. $ (#music_btn) .attr (src, play.gif);
9. }outro{
10. music.Pause ();
11. $ (#music_btn) .attr (src, pause.gif);
12. }
13. });
14. </script>