相信很多开发者都遇到了这个坑，在PC上用浏览器调试也都能播放，但实际在微信或者手机浏览器中，又不能正常播放，解决的办法也很简单，参照如下代码修改即可：
1、先加载背景音乐
|
1 |
<audio id="bgmusic" style="display:none;" src="music/back.mp3" autoplay preload controls></audio><!--加载背景音乐--> |
2、利用微信的jssdk突破了限制
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> var audioStatus = "paused"; var audio = document.getElementById("bgmusic"); audio.addEventListener("playing", function(){ audioStatus = "playing"; }); audio.addEventListener("pause", function(){ audioStatus = "paused"; }); document.addEventListener("WeixinJSBridgeReady", function () { if(audioStatus=="paused"){ //判断播放状态，如果未播放就执行播放 document.getElementById("bgmusic").play(); } }); </script> |
添加如上代码后，即可实现在手机端自动播放背景音乐。
可以直接打开以下网址测试：
demo下载：点击下载（右键另存为）
原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/8217
微信扫一扫 
支付宝扫一扫 
评论列表（9条）
https://www.ilanluo.com/8217
我怎么不行呢，把上面的代码复制过来后无效，用congsole试发现没有触发WeixinJSBridgeReady 事件
把你引用后部署的页面发我看看，我对比一下区别。
抱歉，我刚刚试了，已经不能正常播放。稍后我看看怎么弄
720.gyxlck.com/wankedonghua/
看这个页面的源代码，能在微信正常播放的。
我复制过来后在pc端也达不到这种效果，我看了您网页上每次点进去首次加载都是可以的。https://www.ilanluo.com/wp-content/uploads/2020/02/1.html就是上面这个地址
1.html我测试在微信中无法自动播放，720.gyxlck.com/wankedonghua/是可以的，但是需要完整的引用jssdk的代码进行部署，参考https://www.ilanluo.com/6301
大佬有pc端不能自动播放的解决方案吗，网上那些都试过了效果都不好
PC的就按正常的html代码写就行了，audio/embed都可以，audio简单一点，属性设置自动播放和循环播放即可。