這篇文章主要介紹了關於HTML5實現使用按鈕控制背景音樂開關的方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
我們有時會在頁面上加上背景音樂，讓使用者自行開啟和關閉背景音樂，尤其基於手機html5製作的多媒體頁面，HTML5的audio音訊標籤可以取得音訊的播放狀態，透過觸控按鈕即可關閉並開啟背景音樂。
效果圖如下：
檢視示範效果 原始碼下載
HTML
建立一個HTML5頁面，放置
<audio id="music2" src="music.mp3" loop="loop">你的浏览器不支持audio标签。</audio> <a href="javascript:playPause();"><img src="pause.gif" width="48" height="50" id="music_btn2" border="0"></a>
Javascript
我們在點擊開關圖片按鈕的時候呼叫了javascript腳本，playPause( )函數。函數中判斷audio音訊播放狀態，如果已經停止（paused）則呼叫.play()繼續播放，如果是在播放狀態，則立即暫停播放.pause()，兩種狀態切換時及時更新按鈕圖片，請看程式碼：
JavaScript
function playPause() {
var music = document.getElementById('music2');
var music_btn = document.getElementById('music_btn2');
if (music.paused){
music.play();
music_btn.src = 'play.gif';
}
else{
music.pause();
music_btn.src = 'pause.gif';
}
} 如果使用jQuery代码可以这样写：JavaScript
<audio id="music" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop">你的浏览器不支持audio标签。</audio>
<a id="audio_btn"><img src="play.gif" width="48" height="50" id="music_btn" border="0"></a>
<script>
$("#audio_btn").click(function(){
var music = document.getElementById("music");
if(music.paused){
music.play();
$("#music_btn").attr("src","play.gif");
}else{
music.pause();
$("#music_btn").attr("src","pause.gif");
}
});
</script>以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是HTML5實作使用按鈕控制背景音樂開關的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
