背景

某天客户报了一个问题，说是大屏的声音不能自动播放了,我们的大屏应用是有个报警的，当有报警的时候，自动会播放警报的声音

复线步骤

测试后发现如下结论

当刷新页面后，audio不会自动播放当从另外的一个页面进入到当前页面，可以直接播放声音

如果你想测试，可以点我进行测试

你可以先点击上方链接的 尝试一下 ，下方为截图

这个时候你会听到一声马叫声

然后，你刷新下马叫声的页面，这个时候声音的自动播放将不会生效

报错问题排查

打开控制台，不出意外看到了一个报错信息。

翻译为中文的意思为不允许的错误。播放失败，因为用户没有先与文档交互。goo.gl/xX8pDD

尝试解决

那我给通过给body添加点击事件，自动触发点击事件，在点击的事件后自动播放声音。（当是我的想法是，这个大概率是不行的，chrome应该不会忽略这一点，不然这个功能就相当于不存在）

经过测试后，发现确实还不行，在意料中。

参考别人的网站，用抖音测试

点击我跳转抖音

想到了我们可以参考抖音，我用抖音的进行测试，当你不做任何的操作，页面应该如下

我们从这里得出结论，这个应该是浏览器的限制，需要查看官方文档，看看原因

查阅官方文档

点我查看chrome的官方文档

我截取了一些关键的信息

注意浏览器会有一个媒体互动指数，这是浏览器自动计算的，该分越高，才会触发自动播放

查看电脑的媒体互动指数

在url上输入 about://media-engagement，你会看到如下的截图，

经过测试后 当网站变成了is High,音频会自动播放，不会播放失败。

这就解释了为什么有的网站可以自动播放声音，有的网站不可以自动播放声音

ok，我们继续往下看，这个时候看到了一些关键的信息。

作为开发者，我们不应该相信音频/视频会播放成功，要始终在播放的回掉中来进行判断

看到这些，我们来模仿抖音的实现.在播放声音的catch的时候，显示一个错误的弹窗，提示用户，当用户点击的时候，自动播放声音

   this.alarmAudio = new Audio(require("@/assets/sound/alarm.mp3"));
    this.alarmAudio
            .play()
            .then(() => {
              this.notifyId && this.notifyId.close();
            })
            .catch((error) => {
              if (error instanceof DOMException) {
                // 这里可以根据异常类型进行相应的错误处理
                if (error.name === "NotAllowedError") {
                  if (this.notifyId) return;
                  this.notifyId = Notification({
                    title: "",
                    duration: 0,
                    position: "bottom-left",
                    dangerouslyUseHTMLString: true,
                    onClick: this.onAudioNotifyConfirm,
                    showClose: false,
                    customClass: "audio-notify-confirm",
                    message:
                      "
因浏览器限制，需点击打开声音
",
                  });
                }
              }
            });

实现效果如下

总结在用到video或者audio的时候，要始终不相信他会播放声音成功，并且添加catch处理异常场景，给用户友好的提示video或者audio的自动播放跟媒体互动指数有关（MEI），当媒体指数高，会自动播放，否则需要用户先交互后，audio才可以自动播放。从一个页面window.open另外一个页面可以自动播放声音，当刷新页面后，需要有高的MEI，audio才会自动播放，如果你需要在后台打开一个大屏的页面，刚好可以这样设计，不要用页面跳转