本篇文章為大家展示了如何使用按鈕控制HTML5背景音樂開關，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
我們有時會在頁面上加上背景音樂，允許用戶自己開啟和關閉背景音樂，尤其基于手機html5制作的多媒體頁面，HTML5的audio音頻標簽可以獲取音頻的播放狀態，通過觸摸按鈕就可以關閉和開啟背景音樂。
建立一個HTML5頁面，放置<audio>標簽，設置音頻文件源，設置循環播放。準備兩張圖片，分別表示開啟和暫停背景音樂兩種狀態，可以點擊。
<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腳本，playPause()函數。函數中判斷audio音頻播放狀態，如果已經停止（paused）則調用.play()繼續播放，如果是在播放狀態，則立即暫停播放.pause()，兩種狀態切換時及時更新按鈕圖片，請看代碼：
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代碼可以這樣寫：
<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>
注意的是要記得加載jQuery庫文件。
上述內容就是如何使用按鈕控制HTML5背景音樂開關，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
