首頁 > web前端 > H5教程 > 主體

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

不言
發布: 2018-06-09 16:56:09
原創
6975 人瀏覽過

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

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

效果圖如下:

檢視示範效果    原始碼下載

HTML

建立一個HTML5頁面,放置

<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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!