周杰smile
周杰smile

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

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

解决办法

  1. 在chrome 浏览器中输入：chrome://flags，搜索“Autoplay policy”，默认为“Default，修改为 “No user gesture is required”；但这个只能在本地对一个客户端做设置，并非最终之计
  2. 手动调用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

官网另有一种说法