• 作者:老汪软件技巧
  • 发表时间:2024-09-12 07:01
  • 浏览量:

背景

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

复线步骤

测试后发现如下结论

当刷新页面后,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才会自动播放,如果你需要在后台打开一个大屏的页面,刚好可以这样设计,不要用页面跳转