背景音乐的自动播放（兼容 ios 和 android）

最新推荐文章于 2023-06-27 18:55:39 发布

原创最新推荐文章于 2023-06-27 18:55:39 发布 · 8.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#audio

微信|支付宝专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种解决iOS设备上自动播放背景音乐的技术方案。通过JavaScript触发音频播放，实现跨平台兼容，包括iOS和Android，并针对微信浏览器环境提供额外优化。

ios 为了节省用户流量，对于 audio 和 video标签的 preload 和 autopaly 标签会自动拦截，

除非用户手动点击交互才会执行。

但是对于背景音乐，又必须加载的时候就要执行，怎么办，直接调用js 来自动触发。

<audio id="bgaudio" src="./media/bg-music.mp3" loop="loop"></audio>
	<script type="text/javascript">
			document.getElementById('bgaudio').play();
	</script>

不用怀疑，就这几行代码，兼容ios 和 android

当然有特别的 ios 设置后不兼容，我们可以采用下面的方式，不过注意只能在微信浏览器里面打开

<audio preload="preload" controls id="car_audio" src="./media/bg-music.mp3" loop></audio>

	<script>
	 setTimeout(function(){
	     $(window).scrollTop(1);
	 },0);
	  document.getElementById('car_audio').play();
	  document.addEventListener("WeixinJSBridgeReady", function () {
			WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
	            document.getElementById('car_audio').play();
			});
	  }, false);
	</script>