前言
最近在做一個移動端項目，需要為H5配一段背景音樂且要自動播放，按照以往的方法將自動播放代碼加入進去就可以了，可以卻發生了點小插曲（捂臉），下面話不多說了，來一起看看詳細的介紹吧。
移動端音頻播放代碼
css
.pause { position: absolute; z-index: 10000; bottom: 10px; right: 10px;}.pause a { width:30px; height:30px; background:url(http://mat1.gtimg.com/zj/maxbao/reai/imgs/units-icons.png) 0 0 no-repeat; display:block; background-size: 90px auto;}.pause a.on { -webkit-animation:reverseRotataZ 1.2s linear infinite}.pause a.off { }.pause span{ color: #fff; font-size: 16px; position:absolute; left:-40px; top:5px; text-shadow:1px 1px 1px #000; letter-spacing:2px; -webkit-transition:all .2s linear; opacity:0; -webkit-transform:translateX(-20px) }.pause span.z-show { opacity:1; -webkit-transform:translateX(0px)}.coffee-steam-box { -webkit-transform:translate(-40px,-40px)}@-webkit-keyframes reverseRotataZ { 0% { -webkit-transform:rotateZ(0deg) } 100% { -webkit-transform:rotateZ(-360deg) }}.audio{position: absolute; z-index:10; visibility: hidden; opacity: 0; left: 0px; top:0px; width: 100px ; height: 30px;}html
<div class="pause"> <a class="on" href="#" rel="external nofollow" > </a> <span>開啟</span></div><div class="audio"> <audio src="http://mat1.gtimg.com/ln/images/2016zt/12Dec/dlsdbm/music.mp3" controls="controls" preload="auto" autoplay="autoplay" id="audio" loop></audio></div>
javascript
//播放器(function($) { $(document).ready(function() { var musicControl = function(obj){ var classname = $.trim(obj.attr('class')); //alert(classname); if (classname == 'on') { document.getElementById('audio').pause(); obj.removeClass('on').addClass('off'); obj.siblings('span').text('關閉'); $('.pause span').addClass('z-show'); $('.music-icon').removeClass('active'); setTimeout(function(){ $('.pause span').removeClass('z-show'); },500); } else if (classname == 'off') { document.getElementById('audio').play(); obj.removeClass('off').addClass('on'); obj.siblings('span').text('開啟'); $('.music-icon').addClass('active'); $('.pause span').addClass('z-show'); setTimeout(function(){ $('.pause span').removeClass('z-show'); },500); }; return false; } $('.pause a').click(function () { musicControl($(this)); }); var audio = document.getElementById('audio'); audio.play(); $(document).one("touchstart", function() { audio.play() }) });})(jQuery);問題解決
加進去后用微信（iOS系統）瀏覽頁面發現居然沒有自動播放，點擊暫停后再次點擊播放正常，這就說明播放功能沒有問題，將頁面用iOS自帶瀏覽器Safari打開后也不能自動播放，往年都是用這段代碼，屢試不爽難道突然就不好使了？隨即用android手機打開頁面，居然可以自動播放，那就證明代碼本身是沒有問題的，隨后查了相關文獻，是因為iOS Safari 限制不允許 audio autoplay, 必須用戶主動交互(例如 click)后才能播放 audio, 因此我們通過一個用戶交互事件來主動play一下audio應該就可以解決問題了，代碼如下：
document.getElementById('idName').play();這個時候Safari可以自動播放了但是發現微信里面居然還是不行，難道是微信做了什么處理？將代碼修改如下：
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> //一般情況下，這樣就可以自動播放了，但是一些奇葩iPhone機不可以 document.getElementById('idName').play(); //微信必須加入Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('idName').play(); document.getElementById('video').play(); //視頻自動播放 }, false); </script>至此已經完美解決了自動播放的問題，其實對于不允許音頻視頻自動播放的問題來說不一定就是壞事，因為你想畢竟大家流量那么貴，一個音頻視頻動輒就幾MB甚至十幾MB、幾十MB，自動播放流量瞬間就出去了，哭都來不及，所以如果不是必要情況還是不要自動播放的好，聽不聽看不看交給用戶來選擇。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
