英特网校

解决微信和苹果端不能自动播放音乐

ios 为了节省用户流量,对于 audio标签的 preload autopaly 标签会自动拦截,除非用户手动点击交互才会执行 。同时audio标签在苹果端或微信端不能设置声音大小和是否静音,而通常我们需要设置网页背景音乐或者设置定时播放语言(订单提醒系统),这时我们就需要解决在苹果端和微信端出现的声音问题?

在网页中插入audio标签,设置src属性(为音乐的播放地址)

<audio controls id="bgmusic">
<source src="music/order.mp3" type="audio/mpeg">
</audio>

controlsaudio控制条(默认都需要显示),pc和移动端一般都支持。

pc端设置autoplay="autoplay"(自动播放)和loop="loop"(循环播放)可以正常实现功能,但是在部分移动端(苹果端和微信端)这两个属性失效,所以在移动端需要利用JS来实现自动播放!同时也有很多属性在苹果端和微信端也是不能使用的!

一、解决IOS和微信端不能自动播放的问题?

产生原因:ios 和微信端为了节省用户流量,对于 audio标签的 preload autopaly 标签会自动拦截,需用户手动点击交互才会执行

1)苹果端不能播放解决办法?

加载时默认触摸实现自动播放代码如下:

audio.load();
audio.play();
$(document).on("touchstart",function() {audio.play()})

2)微信端因为本身浏览器限制,导致不能自动播放!

需要先引入 http://res.wx.qq.com/open/js/jweixin-1.0.0.js脚本

document.addEventListener("WeixinJSBridgeReady", function () {	
audio.load();
audio.play();
}, false);

二、解决不能放在定时器中出现的问题?[订单提醒中应用]

有些时候需要放在定时器自动播放音乐,比如每隔1分钟播放一个订单状态。

如果将上面代码直接放到定时器时,同样也不能自动播放音乐!

解决思路:开始是自动先触发自动播放后,然后在定时器中播放音乐,最初想用声音控制,加载时默认静音,然后后续如果有订单时,设置声音。但是在Ios中对audio声音大小限制不起作用。

最终解决方法:

如果有订单时,加载后自动播放。

如果没有订单先播放,然后将播放器暂停。

这样就解决了播放器加载时触发了播放按钮!

课件下载:https://pan.baidu.com/s/1jpARsG08wbKFZVBW_HiVTA【百度网盘】



评论中心

登录后可评论,请 登录 注册