- 首先， 在html中定義audio 標簽的 autoplay屬性
-
<audio id="musicStar" src="文件路徑" autoplay="true" preload="auto" loop="loop"></audio> - 其次，在body結尾處添加重定義的audioAutoPlay方法
-
function audioAutoPlay(id){ var audio = document.getElementById(id); var play = function(){ audio.play(); audio.pause(); document.removeEventListener("touchstart",play, false); }; audio.play(); document.addEventListener("touchstart",play, false); } - 最后，需要在頁頭微信瀏覽器准備好以后，調用 audioAutoPlay方法
-
document.addEventListener("WeixinJSBridgeReady", function () { audioAutoPlay('musicStar'); /**musicStar為音樂audio的 id**/ }, false); -
綜合所有
-
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta name="msapplication-tap-highlight" content="no"> <script> /**微信環境中**/ document.addEventListener("WeixinJSBridgeReady", function () { audioAutoPlay('musicStar'); }, false); </script> </head> <body> ... <audio id="musicStar" src="source/music.mp3" autoplay="true" preload="auto" loop="loop"></audio> </body> <script> function audioAutoPlay(id){ var audio = document.getElementById(id); var play = function(){ audio.play(); //audio.pause(); 可以在控制打開頁面不播放，在沒有觸屏點擊的過程中的一段時間后播放，如預加載完成后播放設置audio的autoplay屬性為false document.removeEventListener("touchstart",play, false); }; audio.play(); audio.pause(); document.addEventListener("touchstart",play, false); } //如需要加載完成后的某個時間播放，可在相應的狀態先后執行暫停播放，設置音樂播放，無需點擊屏幕，都可自動播放，並且點擊屏幕后也不會暫停。 //暫停播放調用 function completeFun(){ musicStar.pause(); musicStar.play(); } </script> </html>
解決iphone 微信H5自動播放音樂問題
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。