audio不能自动播放的解决方案

背景

实现H5改造客户端版本的英语听说答题功能,这里涉及到很多页面线程的使用,如果自动播放题目,每隔几秒播放内容,循环播放几次等等,在客户端环境里天生蕴藏着多线程操作和media的库,而改成H5页面的方式,只能好好研究H5的音频播放控制的api。

audio尝试

由于项目所给的时间非常紧,还没有做好充分调研就开始磨刀霍霍,上来分析如果包装题目数据,让页面播放题目的音频更加的合理,根据题目的音频数量按照一定的格式,比如audioPath、times、sleep等关键因素

  • audioPath:音频的路径,这里包括项目本地路径和远程路径的区分
  • times:循环几次播放
  • sleep:播放完休眠多久,setInterval需要

凭借自己前端的基础,信心满满的噼里啪啦胡乱的敲着键盘,宛如进入忘我的境地,纵有前方千军万马,也要杀他个片甲不留。怀着这样的心情代码大厦就被我一层一层的浇筑成功,通过桌面浏览器按照想象的画面勾勒出来,正所谓多情总被无情伤,整个过程我竟然忘我的用了平时个人冲浪的firefox浏览器,我怎么没用Chrome浏览器进行调测,真是不能原谅自己竟然犯了这个错误,firefox是支持audio进行自动播放,javascript进行api操控,完美达到预想中的效果,而Chrome和Safari 浏览器基于安全的策略,已经停止自动播放,主要现象如下:

  • Chrome提示:DOMException: play() failed because the user didn’t interact with the document first.
  • Safari 提示:NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

一句话总结就是不允许你自动播放audio,即使你通过代码trigger触发play等事件都是不允许的,必须要你进行和浏览器进行事件互动,人为的点击,触摸等操作才能播放。经调研得知:最开始移动端浏览器是完全禁止音视频自动播放的,考虑到了手机的带宽以及对电池的消耗。但是后来又改了,因为浏览器厂商发现网页开发人员可能会使用 其他替代方案,而播放性能消耗更为糟糕,所以这样对用户反而是不利的。因此浏览器厂商放开了对多媒体自动播放的限制,只要具备以下条件就能自动播放:

  1. 没音频轨道,或者设置了 muted 属性
  2. 在视图里面是可见的,要插入到 DOM 里面并且不是 display: none 或者 visibility: hidden 的,没有滑出可视区域

换句话说,只要你不开声音扰民,且对用户可见,就让你自动播放,不需要你去使用 GIF 的方法进行 hack。这种实现主要对于视频的,自动播放但是却是静音的,需要你点击喇叭才能有声音,这对于音频答题就跟没说一样。果断放弃。。。。
而桌面浏览器Chrome官方提示2018.10月份也放开自动播放限制,不知道效果是不是和上面的一样,如果一样也是鸡肋。

AudioContext

上天总是公平的,audio被阉割了,一定有另一个家伙替代了他,而他就是AudioContext,可以自动播放,更多API可以参考MSDN,功能强大。

在这里遇到了一个问题就是加载的音频字节数组不可以跨域,而恰恰我的音频文件不是项目里的地址。

let request = new XMLHttpRequest();
request.open("GET", link, true);
request.responseType = "arraybuffer";

解决跨域的问题无非就是那几种方案,因为我当前的平台就是跨域代理平台,那就干脆直接就通过代理的方式请求文件流,返回给XMLHttpRequest吧,link直接指向后台java逻辑

终于可以播放,几大主流浏览器毫无压力,不过还没有上生产测试效果,而且并发起来之后我担心读取音频流这块会有瓶颈,不管怎么样,胜利的喜悦难以言表,应急的方案也很难完美。。。。。。。

你可能感兴趣的:(web前端)