HTML5實作使用按鈕控制背景音樂開關的方法

這篇文章主要介紹了關於HTML5實現使用按鈕控制背景音樂開關的方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

我們有時會在頁面上加上背景音樂，讓使用者自行開啟和關閉背景音樂，尤其基於手機html5製作的多媒體頁面，HTML5的audio音訊標籤可以取得音訊的播放狀態，透過觸控按鈕即可關閉並開啟背景音樂。

效果圖如下：

檢視示範效果    原始碼下載

HTML

建立一個HTML5頁面，放置

<audio id="music2" src="music.mp3"  loop="loop">你的浏览器不支持audio标签。</audio>    
<a href="javascript:playPause();"><img  src="/static/imghwm/default1.png"  data-src="pause.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" id="music_btn2" border="0" alt="HTML5實作使用按鈕控制背景音樂開關的方法" ></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="/static/imghwm/default1.png"  data-src="play.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" id="music_btn" border="0" alt="HTML5實作使用按鈕控制背景音樂開關的方法" ></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實作留言與回覆的頁面

以上是HTML5實作使用按鈕控制背景音樂開關的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！