有關(guān)HTML5中背景音樂(lè)的自動(dòng)播放功能

音樂(lè)的自動(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ī)定一旦音頻就緒馬上開(kāi)始播放。
如果設(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> <!--這里是音樂(lè)--> <img id="btn" class="active" src="img/music.png" alt="" /> <!--這里是一個(gè)可以控制背景音樂(lè)播放暫停的開(kāi)關(guān)-->
在js文件中采用如下代碼
var audio = document.getElementById('music1'); $("#btn").bind("touchstart", function bf() { if(audio !== null) { //檢測(cè)播放是否已暫停.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") } } })
寫(xiě)到了這里大部分安卓機(jī)就基本可以實(shí)現(xiàn)自動(dòng)播放了,但是蘋(píng)果手機(jī)在這個(gè)時(shí)候還是不行的
這里我采用了一個(gè)在加載頁(yè)中加入一個(gè)按鈕,當(dāng)加載完成的時(shí)候,點(diǎn)擊按鈕,引導(dǎo)用戶完成背景音樂(lè)的自動(dòng)播放,代碼如下:
$("html").one('touchstart',function(){ audio.play(); })
到了這里就實(shí)現(xiàn)了背景音樂(lè)的自動(dòng)播放,這個(gè)辦法適用于有加載頁(yè),并且需要點(diǎn)擊進(jìn)入h5的項(xiàng)目......
總結(jié)
以上所述是小編給大家介紹的有關(guān)HTML5中背景音樂(lè)的自動(dòng)播放功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
html5視頻自動(dòng)橫過(guò)來(lái)自適應(yīng)頁(yè)面且點(diǎn)擊播放功能的實(shí)現(xiàn)
這篇文章主要介紹了h5視頻自動(dòng)橫過(guò)來(lái)自適應(yīng)頁(yè)面且點(diǎn)擊播放,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-03HTML5聲音錄制/播放功能的實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家介紹了HTML5聲音錄制/播放功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-03HTML5 解決蘋(píng)果手機(jī)不能自動(dòng)播放音樂(lè)問(wèn)題
這篇文章主要介紹了HTML5 解決蘋(píng)果手機(jī)不能自動(dòng)播放音樂(lè)問(wèn)題的相關(guān)資料,需要的朋友可以參考下2017-12-27HTML5頁(yè)面音視頻在微信和app下自動(dòng)播放的實(shí)現(xiàn)方法
現(xiàn)在大部分的H5頁(yè)面都有實(shí)現(xiàn)播放背景音樂(lè),播放視頻功能。那怎么實(shí)現(xiàn)自動(dòng)播放呢?下面小編給大家?guī)?lái)了HTML5頁(yè)面音視頻在微信和app下自動(dòng)播放的實(shí)現(xiàn)方法2016-10-20短視頻滑動(dòng)播放在 H5 下的實(shí)現(xiàn)方式
短視頻已經(jīng)無(wú)數(shù)不在了,但是主體還是使用 app 來(lái)承載的,本文講述 H5 如何實(shí)現(xiàn) app 的視頻滑動(dòng)體驗(yàn),本文對(duì)實(shí)現(xiàn)過(guò)程中踩到的坑做一個(gè)總結(jié),結(jié)合示例代碼給大家介紹的非常詳2023-01-05