背景

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

复线步骤

测试结果如下

1. 当浏览页面后，音频不会自动播放
2. 当从另外的一个页面进入到当前页面，可以直接播放声音

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

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

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

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

报错问题排查

打开控制台，无法意外看到一个报错信息。

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

尝试解决

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

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

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

点击我跳转抖音

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

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

刊物

点我查看chrome的官方文档

「我截取了一些关键信息」

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

「查看电脑的媒体互动指数」

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

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

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

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

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

看到这些，我们来修改抖音的实现。在播放声音的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>",
                });
            }
        }
    });

实现效果如下

总结

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

分享到：

赞 (0) 打赏 搜一下