背景

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

复线步骤

测试后发现如下结论

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

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

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

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

报错问题排查

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

翻译为中文的意思为
不允许的错误。播放失败，因为用户没有先与文档交互。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:
"<div style='color:#fff;font-size:18px;cursor:pointer'>因浏览器限制，需<span style='color:#ff2c55'>点击打开声音</span></div>",

                  });

                }

              }

            });

实现效果如下

总结