html代碼

<a href="javascript:;" class="musicBtn functionBtn2 on" id="mc_play">音樂(lè)開(kāi)<audio id="music" loop="loop" autoplay="autoplay" preload="auto" muted><source src="/test/bgMp3.mp3" type="audio/mpeg"></audio> </a>

效果圖這樣

css代碼

.musicBtn{ right: 20px; width: 45px; padding-top: 45px;background: url(../img/closeMusic.png) no-repeat top center; background-size: 100% auto; text-align: center; font-size: 12px } .musicBtn.on{background: url(../img/openMusic.png) no-repeat top center; background-size: 45px 45px; }

js代碼
之前在做音樂(lè)播放的時(shí)候，移動(dòng)端需要用戶有操作才能識(shí)別進(jìn)行播放的機(jī)制被沿用到谷歌瀏覽器， 無(wú)用戶行為禁止自動(dòng)播放音樂(lè)， 否則會(huì)報(bào)錯(cuò)。 我看很多都是在audio標(biāo)簽給了一個(gè)靜音“muted ”的標(biāo)識(shí)， 等加載完后靜音取消， 就可以播放。 但是我親測(cè)了好幾次都無(wú)效。最后用最粗暴的方法搞定了。
移動(dòng)端目前已經(jīng)可以自動(dòng)播放了，只是在微信內(nèi)部需要特殊處理。

let audi = document.getElementById('music'); // 音樂(lè)document.addEventListener("WeixinJSBridgeReady", function () { // wx 音樂(lè)播放audi.play();audi.volume = 1;}, false);

其次在pc端瀏覽器中， 需要加一層蒙版，如果是移動(dòng)端直接刪除蒙版， 如果pc端 用戶點(diǎn)擊后刪除蒙版播放音樂(lè)：
html：

<div id="mask"></div>

js：

let _screenType = IsPC(); //刪除蒙版 if(!_screenType) $('#mask').remove()$('#mask').one('click',function(){audi.play();audi.muted = false;$(this).remove()});// 判斷是否為pc端 function IsPC() {var userAgentInfo = navigator.userAgent;var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];var flag = true;for (var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {flag = false;break;}}return flag; }

最后，通過(guò)音樂(lè)圖標(biāo)點(diǎn)擊控制音樂(lè)播放與關(guān)閉。

//音樂(lè)開(kāi)/關(guān)$(".musicBtn").click(function () {$(this).toggleClass("on");let _text = $(this).hasClass("on")?'音樂(lè)開(kāi)':'音樂(lè)關(guān)';$(this).text(_text);if($(this).hasClass("on")){audi.play();}else{audi.pause();}})

總結(jié)

以上是生活随笔為你收集整理的h5 ＜audio＞音乐自动播放，谷歌禁止音乐自动播放处理方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。