Menggunakan HTML5 untuk mengontrol sakelar musik latar

Kadang -kadang kami menambahkan musik latar ke halaman, memungkinkan pengguna untuk menghidupkan dan keluar dari musik latar sendiri, terutama halaman multimedia yang dibuat berdasarkan HTML5 seluler. Tag audio HTML5 dapat memperoleh status pemutaran audio, dan musik latar dapat dimatikan dan dihidupkan dengan menyentuh tombol.

Rendering adalah sebagai berikut:

Buat halaman HTML5, tempatkan tag <dial>, atur sumber file audio, dan atur pemutaran loop. Siapkan dua gambar, menunjukkan dua keadaan menyalakan dan berhenti musik latar, Anda dapat mengklik.

Kode XML/HTML Salin Konten ke Clipboard

1. <AudioID = MUSIC2SRC = MUSIC.MP3LOOP = LOOP> browser Anda tidak mendukung tag audio. </audio>
2. <ahref = javaScript: playpause ();> <imgsrc = pause.gifwidth = 48Height = 50id = music_btn2border = 0> </a>

Ketika kami mengklik tombol sakelar gambar, kami memanggil skrip JavaScript dan fungsi playpause (). Dalam fungsi tersebut, menilai status pemutaran audio audio. Jika telah dihentikan (berhenti), hubungi .Play () untuk terus bermain. Jika ada dalam status pemutaran, pemutaran. Jeda () akan segera ditangguhkan. Saat beralih di antara kedua status, silakan lihat kode:

Kode javascript menyalin konten ke clipboard

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

Jika Anda menggunakan kode jQuery, Anda dapat menulisnya seperti ini:

Kode javascript menyalin konten ke clipboard

1. <audioID = musicsrc = http: //cctv3.qiniudn.com/zuixingfuderen.mp3autoplay=autoplayloop=loop> browser Anda tidak mendukung tag 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 (musik);
6. if (music.paused) {
7. music.play ();
8. $ (#music_btn) .attr (src, play.gif);
9. }kalau tidak{
10. music.pause ();
11. $ (#music_btn) .attr (src, pause.gif);
12. }
13. });
14. </script>