Uncaught (in promise) DOMException: play() failed because the user didn‘t interact with the document

在使用audio时，首次打开页面加载音频，Chrome报错Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. ，找了一堆资料，终于搞懂它的原因及解决办法。顺便记录下。

• 背景
  网页加载完成后立即播放音频（或带有音频轨道的视频）可能会意外地打扰到用户，为了增加用户体验，紧接着2018年4月份Chrome发布的66版本也正式关闭了声音自动播放。
• 解决方案
  

1. 音频被静音或其音量设置为 0

audio的muted设置为true，让用户自己点击查看

2. 用户和网页已有交互行为（包括点击、触摸、按下某个键等等）

<audio
    muted
    controls
    autoplay
    src="./t-rex-roar.mp3"
    id="audioEle"
  ></audio>
  <script>
    function playAudio() {
      const promise = audioEle.play();
      if (promise === undefined) {
        return;
      }
      promise.then(() => {}).catch(error => {
        // 处理浏览器不支持自动播放的逻辑，如增加提示，指引用户点击播放；将声音播放按钮设置为静音图标，让用户打开声音
        if (error.name === 'NotAllowedError') {}
      });
    }
    const audioEle = document.getElementById('audioEle');
    playAudio();
    document.body.addEventListener('mousedown', () => {
      audioEle.muted = false;
      playAudio()
    }, false);
    window.addEventListener('click', () => {
      playAudio();
    })

  </script>

3. 网站已被列入白名单；如果浏览器确定用户经常与媒体互动，这可能会自动发生，也可能通过首选项或其他用户界面功能手动发生
   MEI指数：chrome://media-engagement
   媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。Chrome基于这个媒体参与度有一套自己算法，我们可以通过：chrome://media-engagement/ 查看;
   部分纯视频网站会有对应MEI指数，页面加载出来就可以自动播放；

4. <iframe src="mediaplayer.html" allow="autoplay 'src'"> </iframe>目前没用过

具有活动音轨的媒体被认为是可听的，并且阻止自动播放适用于它们。听不见的媒体不受阻止自动播放的影响。

• 参考资料

1. <audio>
2. 媒体和 Web Audio API 的自动播放指南
3. https://blog.p2hp.com/archives/7080?amp=1
4. Chrome 66 禁止声音自动播放
5. https://blog.google/products/chrome/improving-autoplay-chrome/
6. 音频视频自动播放解决方案