這篇文章將為大家詳細(xì)講解有關(guān)html5如何實(shí)現(xiàn)背景音樂的自動(dòng)播放，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有新平免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

                                                           

自動(dòng)播放屬性：

<audio controls="controls" autoplay="autoplay">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

autoplay 屬性規(guī)定一旦音頻就緒馬上開始播放。如果設(shè)置了該屬性，音頻將自動(dòng)播放。

但是在實(shí)際運(yùn)用中，經(jīng)常會(huì)遇到不能自動(dòng)播放的現(xiàn)象，主要是因?yàn)橛行g覽器或者手機(jī)會(huì)阻止或不支持autoplay這個(gè)屬性，在這里我介紹一下我采用的方法。

首先：在html中代碼如下

<audio id="music1" controls="controls" autoplay="autoplay" preload id="music1" hidden>
<source src="music/bgmusic.mp3" />
</audio>
<!--這里是音樂-->
<img id="btn" class="active" src="img/music.png" alt="" />
<!--這里是一個(gè)可以控制背景音樂播放暫停的開關(guān)-->

在js文件中采用如下代碼：

var audio = document.getElementById('music1');
$("#btn").bind("touchstart", function bf() {
 
if(audio !== null) {
//檢測播放是否已暫停.audio.paused 在播放器播放時(shí)返回false.
//alert(audio.paused);
if(audio.paused) {
audio.play(); //audio.play();// 這個(gè)就是播放
$("#btn").addClass("active")
} else {
audio.pause(); // 這個(gè)就是暫停
$("#btn").removeClass("active")
}
}
})

寫到了這里大部分安卓機(jī)就基本可以實(shí)現(xiàn)自動(dòng)播放了，但是蘋果手機(jī)在這個(gè)時(shí)候還是不行的

這里我采用了一個(gè)在加載頁中加入一個(gè)按鈕，當(dāng)加載完成的時(shí)候，點(diǎn)擊按鈕，引導(dǎo)用戶完成背景音樂的自動(dòng)播放，代碼如下：

$("html").one('touchstart',function(){
audio.play();
})

關(guān)于html5如何實(shí)現(xiàn)背景音樂的自動(dòng)播放就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前文章：html5如何實(shí)現(xiàn)背景音樂的自動(dòng)播放
網(wǎng)站URL：http://www.aaarwkj.com/article32/gopcsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、外貿(mào)建站、網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、定制開發(fā)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)