利用HTML5實現使用按鈕控制背景音樂開關

我們有時會在頁面上加上背景音樂，允許用戶自己開啟和關閉背景音樂，尤其基於手機html5製作的多媒體頁面，HTML5的audio音頻標籤可以獲取音頻的播放狀態，通過觸摸按鈕就可以關閉和開啟背景音樂。

效果圖如下所示：

建立一個HTML5頁面，放置<audio>標籤，設置音頻文件源，設置循環播放。準備兩張圖片，分別表示開啟和暫停背景音樂兩種狀態，可以點擊。

XML/HTML Code複製內容到剪貼板

1. <audioid=music2src=music.mp3loop=loop>你的瀏覽器不支持audio標籤。 </audio>
2. <ahref=javascript:playPause();><imgsrc=pause.gifwidth=48height=50id=music_btn2border=0></a>

我們在點擊開關圖片按鈕的時候調用了javascript腳本，playPause()函數。函數中判斷audio音頻播放狀態，如果已經停止（paused）則調用.play()繼續播放，如果是在播放狀態，則立即暫停播放.pause()，兩種狀態切換時及時更新按鈕圖片，請看代碼：

JavaScript Code複製內容到剪貼板

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

如果使用jQuery代碼可以這樣寫：

JavaScript Code複製內容到剪貼板

1. <audioid=musicsrc=http://cctv3.qiniudn.com/zuixingfuderen.mp3autoplay=autoplayloop=loop>你的瀏覽器不支持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(music);
6. if(music.paused){
7. music.play();
8. $(#music_btn).attr(src,play.gif);
9. }else{
10. music.pause();
11. $(#music_btn).attr(src,pause.gif);
12. }
13. });
14. </script>