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

標籤：amp   ati   click   測試   log   oop   timestamp   sap   ios   

最近，做項目時，需要使用背景音樂。大家都知道，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();            }  });

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

　

　　

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