注册会员
×

已有账号? 请点击

使用其他方式登录

html中背景音乐无法自动播放问题

发布2021-04-29 浏览51次

详情内容

现在客户要求做H5场景应用、H5微刊、H5微杂志的时候加入背景音乐,这样能够很好地烘托气氛还能使整个案例生动不少,然并卵,由于市场上的手机型号过于繁杂,对于H5 API的支持十分地不统一,还有H5运行平台的不一致:有的在微信壳下,有的在浏览器里,有的在自己的APP里,等等因素造成在H5开发的过程中一不小心就掉进坑里了,今天小五就来讲一讲很多人在H5开发中遇到的背景音不能自动播放的问题。

现在IOS系统升级以后,禁止了Audio的Autoplay属性,原因如下:


苹果为了用户着想,禁止了Autoplay和JS "onload" 加载播放,也就是说即使你在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载视频流,甚至不会下载该视频流。除非用户物理点击一次屏幕,其实现在不能苹果手机,其他的安卓手机和部分App有时也存在背景音不能自动播放的问题。

三、背景音不能自动播放的场景及解决办法

1、大部分IOS系统和少部分Android系统的微信壳下不支持自动播放

   解决方案:监听WeixinJSBridgeReady事件、DOMContentLoaded事件

   微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady"。

发现部分机型,监听DOMContentLoaded和load事件,在回调中也可以播放音乐;

所以,为了保险起见,可以同时监听两个事件,以增强其适用性。

<div class="musicinfo" id="musicinfo">
        <audio id="musicid" src="music.mp3" preload="preload" autoplay="autoplay"  loop="loop">您的浏览器不支持 audio标签。</audio>
        <img class="music on roate" src="musicon.png">
</div> 
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById(' musicid ');
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});

 (2) 可以增加透明层,点击到透明层,播放音乐,关闭透明层;

   缺点:第一次点击按钮元素可能不响应,而且有时候用户不会在打开页面短时间内点击,造成用户体验上的伤害。

 

部分App不支持webview音乐自动播放

解决方案:1.壳浏览器支持;2.通过手势事件播放音乐

缺点:有些壳浏览器可能没有音频自动播放的接口,或者用户不进行手势操作。

完整代码

<!-- 音乐 start-->
<div class="musicinfo" id="musicinfo">
    <audio id="musicid" src="music.mp3" preload="preload" autoplay="autoplay"  loop="loop">您的浏览器不支持 audio标签。</audio>
    <img class="music on roate" src="musicon.png">
</div>
<!-- 音乐 end-->
<script type="text/javascript">
	// 音乐播放
	function autoPlayMusic() {
	    // 自动播放音乐效果,解决浏览器或者APP自动播放问题
	    function musicInBrowserHandler() {
	        musicPlay(true);
	        document.body.removeEventListener('touchstart', musicInBrowserHandler);
	    }
	    document.body.addEventListener('touchstart', musicInBrowserHandler);

	    // 自动播放音乐效果,解决微信自动播放问题
	    function musicInWeixinHandler() {
	        musicPlay(true);
	        document.addEventListener("WeixinJSBridgeReady", function () {
	            musicPlay(true);
	        }, false);
	        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
	    }
	    document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
	}
	function musicPlay(isPlay) {
	    var audio = document.getElementById('musicid');
	    if (isPlay && audio.paused) {
	        audio.play();
	    }
	    if (!isPlay && !audio.paused) {
	        audio.pause();
	    }
	}
	autoPlayMusic();
</script>


点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
  • 支付宝付款
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息