H5

网站

移动端H5不能自动播放背景音乐解决方法

相信很多开发者都遇到了这个坑，在PC上用浏览器调试也都能播放，但实际在微信或者手机浏览器中，又不能正常播放，解决的办法也很简单，参照如下代码修改即可： 1、先加载背景音乐

<audio id="bgmusic" style="display:none;" src="music/back.mp3" autoplay preload controls></audio><!--加载背景音乐-->

1	<audio id="bgmusic" style="display:none;" src="music/back.mp3" autoplay preload controls></audio><!--加载背景音乐-->

2、利用微信的jssdk突破了限制

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

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>

添加如上代码后，即可实…

蓝洛水深

2020年2月19日

1504.9K9