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逻辑

略

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