【笔记】关于 wap 有多个音频的网页在 iOS 里无法自动播放下一首的解决办法

jquery tytrock ⋅ 于 2019-05-29 17:01:58 ⋅ 2817 阅读

有一个需求,是需要模拟微信聊天的播放语音

image.png


使用audio自带属性ended监听当前音频播放完后自动播放下一个音频,Andiord可以正常播放,但在IOS里却无法播放。

经过查阅相关资料,原来是苹果公司考虑到用户可能是用手机流量访问的情况,为了用户流量着想,所以需要用户交互后才能播放。

但微信内嵌的浏览器应该是做了一些定制化, 允许自动播放 audio,所以可以借助微信的相关方法


1、首先引入微信JS-SDK

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

2、load重新加载音频,实现苹果预加载

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


终于可以正常播放了!

回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter