首頁  >  文章  >  web前端  >  HTML5實作使用按鈕控制背景音樂開關的方法

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

不言
不言原創
2018-06-09 16:56:097002瀏覽

這篇文章主要介紹了關於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(&#39;music2&#39;);    
    var music_btn = document.getElementById(&#39;music_btn2&#39;);    
    if (music.paused){    
        music.play();    
        music_btn.src = &#39;play.gif&#39;;    
    }    
    else{    
        music.pause();    
        music_btn.src = &#39;pause.gif&#39;;     
    }    
}   如果使用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實作留言與回覆的頁面

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn