共计 1347 个字符，预计需要花费 4 分钟才能阅读完成。
相信很多开发者都遇到了这个坑，在 PC 上用浏览器调试也都能播放，但实际在 微信 或者手机浏览器中，又不能正常播放，解决的办法也很简单，参照如下代码修改即可：
1、先加载 背景音乐
JavaScript
|
1
|
<audio id=“bgmusic” style=“display:none;” src=“music/back.mp3” autoplay preload controls></audio><!—加载背景音乐—>
|
2、利用微信的 jssdk 突破了限制
JavaScript
|
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>
|
添加如上代码后，即可实现在手机端自动播放背景 音乐。
可以直接打开以下网址测试：
https://cdn.lanluo.cn/wp-content/uploads/2020/02/1.html
demo 下载：点击下载（右键另存为）
正文完
