html代碼

<a href="javascript:;" class="musicBtn functionBtn2 on" id="mc_play">音樂開<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代碼
之前在做音樂播放的時候，移動端需要用戶有操作才能識別進行播放的機制被沿用到谷歌瀏覽器， 無用戶行為禁止自動播放音樂， 否則會報錯。 我看很多都是在audio標簽給了一個靜音“muted ”的標識， 等加載完后靜音取消， 就可以播放。 但是我親測了好幾次都無效。最后用最粗暴的方法搞定了。
移動端目前已經可以自動播放了，只是在微信內部需要特殊處理。

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

其次在pc端瀏覽器中， 需要加一層蒙版，如果是移動端直接刪除蒙版， 如果pc端 用戶點擊后刪除蒙版播放音樂：
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; }

最后，通過音樂圖標點擊控制音樂播放與關閉。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。