我想應(yīng)該有很多人在做H5場(chǎng)景應(yīng)用、H5微刊、H5微雜志的時(shí)候加入背景音樂(lè)吧（客戶(hù)需求），相信很多人一定碰過(guò)不能自動(dòng)播放的時(shí)候，即使是相同的iPhone 5s也有不播放的時(shí)候，很蛋疼吧！？

之前我的解決方案：

<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>

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

我最近在瞎逛前端BLOG淘淘經(jīng)驗(yàn)偶遇這個(gè)解決方案，至于哪個(gè)網(wǎng)站我忘記了，但是我做了摘錄：

原理就是通過(guò)new一張圖片，監(jiān)聽(tīng)一張圖片的onload事件，結(jié)束后回調(diào)執(zhí)行音頻播放audio.play()即可，原理估計(jì)是動(dòng)了dom結(jié)構(gòu)，相當(dāng)于執(zhí)行了一次交互。

PS：

1. 音樂(lè)不宜過(guò)長(zhǎng)，30s為佳，而且音樂(lè)要加上漸現(xiàn)漸隱效果，方便循環(huán)播放；
2. 音樂(lè)體積要小，音質(zhì)和流量，在手機(jī)上還是優(yōu)先考慮流量吧。

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

轉(zhuǎn)載于:https://www.cnblogs.com/viphchok/articles/5315031.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。