[TOC] ## 解決ios音樂不自動播放 時間：2018.11.08 ``` // 解決ios音樂不自動播放 myobj = document.getElementById("main_audio"); myaudio = $('#main_audio_ie8').attr('src'); myobj.src = myaudio; document.addEventListener("WeixinJSBridgeReady", function () { myobj.play(); }, false); ``` ## 方法一：h5 解決蘋果手機不能自動播放音樂 ### 1、引入JS `引用：<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> ` ### 2、功能實現 ``` <script> function autoPlayAudio() { wx.config({ // 配置信息, 即使不正確也能使用 wx.ready debug: false, appId: '', timestamp: 1, nonceStr: '', signature: '', jsApiList: [] }); wx.ready(function() { var globalAudio=document.getElementById("bgMusic"); globalAudio.play(); }); }; // 解決ios音樂不自動播放的問題 autoPlayAudio(); </script> ``` ### 3、說明 只限微信使用，瀏覽器不行 ### 4、網址參考 https://www.cnblogs.com/bky-seed/archive/2017/12/14/8036569.html ## 方法 二：IOS音樂不能自動播放 ### 1、問題描述 在微信端開發H5的時候，audio標簽在蘋果機上無法進行自動播放 ### 2、原因分析 ``` <audio controls="controls" id="music" loop="loop"> <source src="./assets/sound/music.mp3" type="audio/ogg" /> <source src="./assets/sound/music.ogg" type="audio/ogg" /> </audio> ``` 這是我html上的代碼，經過運行發現android機上能夠良好的呈現并播放，但是在蘋果機上呈現的是一條白杠和一個無法使用的三角形按鈕。 使用Audio標簽的屬性進行檢測 ``` Media = document.getElementById("music"); alert(Media.networkState);// 狀態碼顯示為3，表示Audio沒有找到資源路徑 ``` 于是嘗試使用js去注入一個路徑，發現蘋果機的音樂播放問題被解決了 ``` Media.src = "./assets/sound/music.mp3"; Media.play(); ``` ### 3、問題拓展 畢竟我和大家遇到的問題不一樣，也許這個方法并不能解決大家的問題。這里拓展一下其他的實現方法。 1. 應該是出于IOS系統本身的設計規范緣故，會不允許音樂的自動播放功能。這里我們可以給頁面一個touch事件來觸發播放功能。 2. 微信自己提供了一個**WeixinJSBridgeReady**事件，我們可以監聽這個事件觸發播放功能。[微信官方API](http://qydev.weixin.qq.com/wiki/index.php?fulltext=&search=WeixinJSBridgeReady) ``` document.addEventListener("WeixinJSBridgeReady", function () { Media.play(); }, false); ``` ### 4、網址參考 微信端開發H5頁面的時候，audio標簽在蘋果機上無法進行自動播放 https://blog.csdn.net/wp_boom/article/details/52161138?locationNum=7 ## 方法三：函數 手機端網頁蘋果手機用H5audio標簽無法自動播放音樂處理方法，代碼如下； ### 1、HTML ``` <audio id="bgmusic" src="mp3.mp3" autoplay="autoplay" loop="loop" style="display: block; width: 3%; height:3%;"></audio> ``` ### 2、JS ``` <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { functionaudioAutoPlay() { varaudio = document.getElementById('bgmusic'); audio.play(); document.addEventListener("WeixinJSBridgeReady", function() { audio.play() }, false) } audioAutoPlay() }); </script> ``` ### 3、網址參考 蘋果手機用H5audio標簽無法自動播放音樂處理方法 https://blog.csdn.net/wait9166/article/details/77573963?utm_source=blogxgwz0 ## 方法四：iOS蘋果和微信中音頻和視頻實現自動播放的方法 通過下面的方式可以解決，在iPhone手機微信中正常自動播放。 必須在微信Weixin JSAPI的WeixinJSBridgeReady才能生效，猜測微信接口做了處理~ ``` <audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop></audio> <video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png"> <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"> <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"> <p>Your user agent does not support the HTML5 Video element.</p> </video> <!-- 必須加在微信api資源 --> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> //一般情況下，這樣就可以自動播放了，但是一些奇葩iPhone機不可以 document.getElementById('car_audio').play(); //必須在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('car_audio').play(); document.getElementById('video').play(); }, false); </script> ``` https://www.cnblogs.com/kevin1220/p/5807466.html 微信頁面的音樂自動播放實現： https://www.cnblogs.com/kevin1220/p/6429366.html ## 方法五、一種解決h5頁面背景音樂不能自動播放的方案 場景：微信、瀏覽器、App 普通解決方案：采用audio標簽的autoplay屬性 ### 大部分IOS系統和少部分Android微信不支持自動播放 【解決方案】微信的JS API建立在微信殼瀏覽器的內置JS對象WeixinJSBridge上，WeixinJSBridge并不是WebView一打開就有了，客戶端需要初始化這個對象，當這個對象準備好的時候，客戶端會拋出事件"WeixinJSBridgeReady"。 發現部分機型，監聽DOMContentLoaded和load事件，在回調中也可以播放音樂； 所以，為了保險起見，可以同時監聽兩個事件，以增強其適用性。 【代碼如下】 `<audio style="display:none; height: 0" id="bg-music" preload="auto" src="../static/videos/bg-music.mp3" loop="loop"></audio>` ``` document.addEventListener('DOMContentLoaded', function () { function audioAutoPlay() { var audio = document.getElementById('bg-music'); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); } audioAutoPlay(); }); ``` ### 部分Android瀏覽器和所有IOS下Safari瀏覽器不支持自動播放 解決方案：通過手勢事件播放音樂 　　(1) 監聽body的touchstart事件，回調中播放音樂； 　　缺點：部分元素的touch事件可能會阻止冒泡，需要在對應的地方調起播放音樂函數 　　(2) 可以增加透明層，點擊到透明層，播放音樂，關閉透明層； 　　缺點：第一次點擊按鈕元素可能不響應，造成用戶體驗上的傷害。 部分App不支持webview音樂自動播放 　　解決方案：1.殼瀏覽器支持；2.通過手勢事件播放音樂 【完整代碼】 ``` // 音樂播放 function autoPlayMusic() { // 自動播放音樂效果，解決瀏覽器或者APP自動播放問題 function musicInBrowserHandler() { musicPlay(true); document.body.removeEventListener('touchstart', musicInBrowserHandler); } document.body.addEventListener('touchstart', musicInBrowserHandler); // 自動播放音樂效果，解決微信自動播放問題 function musicInWeixinHandler() { musicPlay(true); document.addEventListener("WeixinJSBridgeReady", function() { musicPlay(true); }, false); document.removeEventListener('DOMContentLoaded', musicInWeixinHandler); } document.addEventListener('DOMContentLoaded', musicInWeixinHandler); } function musicPlay(isPlay) { var media = document.querySelector('#bg-music'); if (isPlay && media.paused) { media.play(); } if (!isPlay && !media.paused) { media.pause(); } } ``` 網址參考：https://www.cnblogs.com/wmhuang/p/5452259.html