這篇文章主要介紹了關於HTML5實現使用按鈕控制背景音樂開關的方法,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
我們有時會在頁面上加上背景音樂,讓使用者自行開啟和關閉背景音樂,尤其基於手機html5製作的多媒體頁面,HTML5的audio音訊標籤可以取得音訊的播放狀態,透過觸控按鈕即可關閉並開啟背景音樂。
效果圖如下:
檢視示範效果 原始碼下載
HTML
建立一個HTML5頁面,放置b97864c2e0ef2353a16c4d64c7734e92標籤,設定音訊檔案來源,設定循環播放。準備兩張圖片,分別表示開啟和暫停背景音樂兩種狀態,可點選。
XML/HTML
<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中文網其他相關文章!