Uso de HTML5 para controlar los interruptores de música de fondo

A veces agregamos música de fondo a la página, permitiendo a los usuarios encender y apagar la música de fondo por sí mismos, especialmente las páginas multimedia hechas en función de HTML5 móvil. La etiqueta de audio de HTML5 puede obtener el estado de reproducción de audio, y la música de fondo se puede apagar y encender tocando el botón.

Las representaciones son las siguientes:

Cree una página HTML5, coloque la etiqueta <Audio>, configure la fuente del archivo de audio y establezca la reproducción de bucle. Prepare dos imágenes, lo que indica los dos estados de encender y detener la música de fondo, puede hacer clic.

Código XML/HTML Copiar contenido al portapapeles

1. <audioID = music2src = music.mp3loop = loop> Su navegador no admite la etiqueta de audio. </audio>
2. <ahref = javaScript: playpause ();> <imgsrc = pause.gifwidth = 48Height = 50ID = music_btn2border = 0> </a>

Cuando hicimos clic en el botón Switch Image, llamamos al script JavaScript y la función PlayPause (). En la función, juzga el estado de reproducción de audio de audio. Si se ha detenido (pausa), llame. Play () para continuar jugando. Si está en el estado de reproducción, reproducción. Pausa () será suspendido inmediatamente. Al cambiar entre los dos estados, consulte el código:

Código JavaScript Copiar contenido al portapapeles

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. demás{
9. music.Pause ();
10. music_btn.src = 'pause.gif';
11. }
12. }

Si usa el código jQuery, puede escribirlo así:

Código JavaScript Copiar contenido al portapapeles

1. <audioID = MusicsRC = http: //cctv3.qiniudn.com/zuixingfuderen.mp3autoplay=autoplayloop=loop> Su navegador no es compatible con la etiqueta de audio. </audio>
2. <Aid = audio_btn> <imgsrc = play.gifwidth = 48Height = 50ID = music_btnborder = 0> </a>
3. <script>
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. }demás{
10. music.Pause ();
11. $ (#music_btn) .attr (src, pause.gif);
12. }
13. });
14. </script>