- 作者:老汪软件技巧
- 发表时间: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才会自动播放,如果你需要在后台打开一个大屏的页面,刚好可以这样设计,不要用页面跳转