Menggunakan HTML5 untuk mengawal suis muzik latar belakang menggunakan kemahiran tutorial buttons_html5

Rendering adalah seperti berikut:

Lihat kesan demo Muat turun kod sumber

HTML

Buat halaman HTML5, letakkan teg

1. <audio id="muzik2" src="muzik.mp3" gelung="gelung">Pelayar anda tidak menyokong teg audio. audio> 
2. <a href="javascript: playPause();"><img src="pause.gif" lebar="48" ketinggian="50" id="music_btn2"<> sempadan="0">a> 

Javascript

Kami memanggil skrip javascript, fungsi playPause() apabila kami mengklik butang suis imej. Fungsi menentukan keadaan main balik audio Jika ia telah dihentikan (jeda), panggil .play() untuk meneruskan permainan Jika ia berada dalam keadaan main, segera jeda main balik.pause(). imej dikemas kini dalam masa. Sila lihat Kod:
Kod JavaScriptSalin kandungan ke papan keratan

1. fungsi playPause() {
2.  var muzik = document.getElementById('music2'); 
3.  var music_btn = document.getElementById('music_btn2'); 
4. jika (muzik.dijeda){ ​​
5. music.play();
6. music_btn.src = 'play.gif';
7. }  
8.  lain{ 
9. muzik.jeda();
10. music_btn.src = 'pause.gif';
11. }  
12. } 

Jika anda menggunakan kod jQuery, anda boleh menulisnya seperti ini:

Kod JavaScriptSalin kandungan ke papan keratan

1. "muzik" src="http://cctv3.qiniudn.com/zuixingfuderen. mp3" automain="automain" gelung="gelung">你的浏览器不支audio标签。    
2. "audio_btn">"play.gif" lebar="48" tinggi="50" id="music_btn" sempadan="0">    
3.     
4. $("#audio_btn").klik(fungsi(){    
5.     var muzik = document.getElementById("muzik");    
6.     jika(muzik.dijeda){    
7.         music.play();    
8.         $("#music_btn").attr("src", "play.gif");    
9.     }lain{    
10.         muzik.jeda();    
11.         $("#music_btn").attr("src", "pause.gif");    
12.     }    
13. });    
14.