我想應該有很多人在做H5場景應用、H5微刊、H5微雜志的時候加入背景音樂吧（客戶需求），相信很多人一定碰過不能自動播放的時候，即使是相同的iPhone 5s也有不播放的時候，很蛋疼吧！？

之前我的解決方案：

<audio id="bgm" src="media/bgm.mp3" autoplay="autoplay" loop="" style="display: none; width: 0; height: 0;"></audio><script type="text/javascript"> //方法一 var firstTouch = true; $("body").bind("touchstart",function(e) {if ( firstTouch ) {firstTouch = false;document.getElementById('bgm').play();}else{return;} }); //方法二 $("body").one("touchstart",function() { document.getElementById('bgm').play(); }); </script>

　　原理就是若遇到禁止自動播放的手機，用戶第一次觸摸屏幕的時候就執行播放事件，我試過很多什么window.onload = function(){}，預加載圖片后回調執行播放事件，插件jquery.imgpreload.min.js?圖片加載完畢回調都然并卵......沒有辦法的辦法只能用上面方法。

我最近在瞎逛前端BLOG淘淘經驗偶遇這個解決方案，至于哪個網站我忘記了，但是我做了摘錄：

原理就是通過new一張圖片，監聽一張圖片的onload事件，結束后回調執行音頻播放audio.play()即可，原理估計是動了dom結構，相當于執行了一次交互。

PS：

1. 音樂不宜過長，30s為佳，而且音樂要加上漸現漸隱效果，方便循環播放；
2. 音樂體積要小，音質和流量，在手機上還是優先考慮流量吧。

一般背景音樂體積可以接受的范圍是200K以下，若太大，可以使用格式工廠等軟件，降低它的比特率和聲道來改變體積。

轉載于:https://www.cnblogs.com/viphchok/articles/5315031.html

總結

以上是生活随笔為你收集整理的关于微信H5页面开发中音乐不自动播放的解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。