這篇文章主要介紹了HTML5使用按鈕控制背景音樂開關(guān)的案例，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)是專業(yè)的桐廬網(wǎng)站建設(shè)公司，桐廬接單;提供成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行桐廬網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

我們有時會在頁面上加上背景音樂，允許用戶自己開啟和關(guān)閉背景音樂，尤其基于手機(jī)html5制作的多媒體頁面，HTML5的audio音頻標(biāo)簽可以獲取音頻的播放狀態(tài)，通過觸摸按鈕就可以關(guān)閉和開啟背景音樂。

效果圖如下所示：

查看演示效果    源碼下載

HTML

建立一個HTML5頁面，放置

Javascript

我們在點擊開關(guān)圖片按鈕的時候調(diào)用了javascript腳本，playPause()函數(shù)。函數(shù)中判斷audio音頻播放狀態(tài)，如果已經(jīng)停止（paused）則調(diào)用.play()繼續(xù)播放，如果是在播放狀態(tài)，則立即暫停播放.pause()，兩種狀態(tài)切換時及時更新按鈕圖片，請看代碼：
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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享HTML5使用按鈕控制背景音樂開關(guān)的案例內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來學(xué)習(xí)!

標(biāo)題名稱：HTML5使用按鈕控制背景音樂開關(guān)的案例-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://weahome.cn/article/hhgdj.html