利用HTML5實作使用按鈕控制背景音樂開關_html5教學技巧

效果圖如下：

查看簡報效果    原始碼下載

HTML

建立一個HTML5頁面，放置

1. audio id=id=id=; 🎜> src="music.mp3"  loop"loop">你的瀏覽器不支援audio標籤。 audio>
    
2. a hrefPause ();">img src src >"pause.gif" width="48" ="50" id="music_btn2"="music_btn2"border="0">a

a

aaa>a >  

Javascript

我們在點擊開關圖片按鈕的時候呼叫了javascript腳本，playPause()函數。函數中判斷audio音訊播放狀態，如果已經停止（paused）則呼叫.play()繼續播放，如果是在播放狀態，則立即暫停播放.pause()，兩種狀態切換時及時更新按鈕圖片，請看程式碼：
 JavaScript Code複製內容到剪貼簿

1. function playPause() {    
2.     var music = document.getElementById('music2'    
3. var music_btn = document.getElementById('music_btn2'

       if (music.paused){    

4.         music.play();             music_btn.src = 
5. 'play.gif';    
6. ;     ;    
;    
7. ;    
8. ;         }    
9.     else
10. {             music.pause();    
11.         music_btn.src = 'pause.gif'
12. ;    
; 

    }    

}   

如果使用jQuery程式碼可以這樣寫： JavaScript Code複製內容到剪貼簿

1. "音樂" src="http://cctv3.qiniudn.com/zu " autoplay="自動播放" loop="循環">您的瀏覽器不支援音訊瀏覽器不支援音訊瀏覽器不支援音訊瀏覽器不支援音訊瀏覽器不支援音訊瀏覽器不支援音訊瀏覽器標籤。 音訊>    
2. "audio_btn">"play.gif"寬度寬度"48" 高度="50" id="music_btn" id="music_btn""0"
>    
    
4. $("#audio_btn").click(函數
(){     >
5.     var 音樂 = document.getElementById("音樂"     
若
6. （音樂.暫停）{             music.play();    
7.         $(
"#music_btn"
8. ).attr("src").attr( "play.gif");         }其他
9. {             music.pause();    
10.         $("#music_btn"
11. ).attr("src").attr( 「暫停.gif」);         }    
});    
腳本>