技術標籤：javascriptjavascripthtml5

1. 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>

效果圖這樣

2. 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;
}

3. 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();
        }
    })