手機瀏覽器音樂無法自動播放的問題

最近，做項目時，需要使用背景音樂。大家都知道，html5的<audio>標簽即可播放音樂，其格式為：

 <audio loop="loop">
        <source  src="音樂鏈接地址">
 </audio>

如果需要音樂是自動播放，給<audio>標簽加上autoplay屬性即可。如果需要點擊某個圖標能夠暫停或開始播放，需要用js來控制：

var music=$('.music');
var audio=document.querySelector('audio');
music.on('click',function(e){
e.stopPropagation();
var _this=$(this);
if(_this.hasClass('on')){
_this.addClass('off').removeClass('on');
audio.pause();
}
else{
_this.removeClass('off').addClass('on');
audio.play();
}
});　　

測試頁面時，問題來了：1.在部分蘋果的微信瀏覽器里面音樂不會自動播放，必須要手指接觸屏幕后才能開始播放；2.在UC瀏覽器中，音樂也無法自動播放。造成這個的原因是因為瀏覽器禁止音樂自動播放，必須有實體事件才能夠觸發音樂播放。

針對微信，寫上：

 //部分ios微信瀏覽器默認播放音樂
    function autoPlayAudio() {
        wx.config({
            // 配置信息, 即使不正確也能使用 wx.ready
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
            document.querySelector('audio').play();
        });
    }

需要引入js：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

針對UC瀏覽器，只能期待用戶誤點屏幕，就開始播放：

  $('html').one('touchstart',function(){
      if(music.hasClass('on')){
                audio.play();
            }
  });

通過以上的方法，即可大部分解決背景音樂在手機上播放的問題了。