chrome audio自动播放问题

chrome、safari、firefox都在某些版本后限制了audio自动播放（chrome是66+），必须要用户与文档产生交互，否则会报错：
play() failed because the user didn't interact with the document first

chrome 自动播放策略变化

原文如下：

in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks

意思就是减少广告杂音对用户的影响以及节省流量

解决办法

在chrome 浏览器中输入：chrome://flags，搜索“Autoplay policy”，默认为“Default，修改为 “No user gesture is required”；但这个只能在本地对一个客户端做设置，并非最终之计
手动调用play，在回调中判断是否播放成功，如果播放失败，显式的提示用户点击播放，比如$message.warning('您的浏览器限制播放，请点击播放')

var promise = document.querySelector('audio').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

AudioContext

我看网上有人说可以使用AudioContext去实现自动播放，这个是不行的，官网原文如下：

The Web Audio API will be included in the Chrome autoplay policy with M71 (December 2018).

意味着AudioContext也在2018/12被禁止自动播放

之所以有人这么说，是因为Chrome autoplay policy是2018/4月开始在chrome上实现的，但那时AudioContext还没实现这个协议，只有audio标签实现了

iframe

官网另有一种说法

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">
 
<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

经过本人实测，对audio依然无效，iframe中的audio，无论是设置autoplay还是调用play方法都不行，现象跟直接在顶层页面的相应设置和操作是一样的。

ios

iOS 的微信可以在WeixinJSBridgeReady事件里调用play方法，让视频自动播放，这个hack方式在Android手机不起作用，具体代码如下

$(document).on('WeixinJSBridgeReady',()=>{ 
    if(player.tag)
    {
         player.tag.play();
       }
  });

video

video元素设置静音muted情况下，可以自动播放，但根据chrome官方，后续实现不一定保证这一点。所以对video也需要判断能否播放，不能播放就提示用户去点击

widow.open

经测试发现chrome有个后门，通过widow.open打开的同域名的网页可以自动播放，但这个网页刷新后依然无法自动播放；

其他浏览器未测试是否可行

这一点或许可以利用，但不确定是否是chrome实现上的bug，所以此法有待商榷

总结

对与audio来说，基本无解，只能通过js尝试播放，如果播放失败给出友好提示让用户自己去点击，或者监听用户操作后再播放