公司项目需要用到音频自动播放的功能，首先想到的就是autoplay属性。
想让内容自动播放的最简单方法是将autoplay属性添加到元素，并将autoplay属性设置为 true ，当 autoplay 的属性为 true 时，媒体元素将在发生以下情况后尽快自动开始播放：
然而在实际操作的过程中，发现自动播放失败，并且出现如下的报错
Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.这个问题当时困扰了我许久，一路解决的过程也是十分坎坷，所以我决定将解决方案记录下来，下面是我在解决问题的过程中找到的一些资料以及解决问题的方案。
C++音视频学习资料免费获取方法：关注音视频开发T哥，点击正在跳转即可免费获取2023年最新C++音视频开发进阶独家免费学习大礼包！
网页加载完成后立即播放音频（或带有音频轨道的视频）可能会意外地打扰到用户。尽管自动播放媒体文件是一个很实用的功能，但是我们也应该谨慎地使用它，保证只有在它被需要的时候才使用。为了让用户拥有控制权，通常浏览器会提供各种方式禁用自动播放音频功能。在这篇文章中，我们将介绍各种媒体和 Web Audio APIs 的自动播放功能，包括关于如何使用自动播放功能、如何优雅的处理阻止自动播放功能的一些简短的介绍。
以下网络功能和API可能会受到自动播放阻止的影响：
Chrome的自动播放政策很简单：
由于本人是在PC端开发的，所以只能根据上面的条件总结出一下几种解决方案：
考略到项目还需要在音频上实现其他的功能，使用第三种方案比较方便。
既然选择第三种方案，那么该如何检查自动播放失败了呢？事实上，自动播放失败时不会触发任何事件。也没有抛出异常或可以设置回调，甚至在媒体元素上都没有标记来告诉你自动播放是否起作用。那么我们可以换个方向，不去仅仅依赖autoplay，而是使用play方法进行播放，play方法执行时会返回一个promise，可以根据promise来判断当前的播放是成功了还是失败了，并且在失败后做出相应的解决方法
const audioElem = document.querySelector("audio");
let startPlayPromise = audioElem.play();
if (startPlayPromise !== undefined) {
startPlayPromise.catch(error => {
if (error.name === "NotAllowedError") {
// 弹窗引导用户与页面做交互，只需要一个简单的按钮即可
// 记得在按钮上绑定一个带有play()方法的回调函数，以element-plus的组件为例
ElMessageBox.alert('当前正在自动播放音频', '提示', {
confirmButtonText: '确认',
callback: () => {
audioElem.play();
},
})
} else {
// Handle a load or playback error
}
}).then(() => {
// Start whatever you need to do only after playback
// has begun.
});
}如果产品看到这个弹窗之后，十分的不爽，硬是要让我们在尽可能不让用户察觉到需要交互的情况下实现自动播放，那么该怎么办呢？
既然与页面做了交互之后就能正常播放了，那么我事先将交互事件绑定到document元素上，是不是就可以在用户不知情并且很自然的情况下，完成交互了呢？
// 点击
document.addEventListener('click', () => {
document.querySelector("audio").play();
});
// 监听鼠标移动的事件
document.addEventListener('mousemove', () => {
document.querySelector("audio").play();
});在以chorme为内核的浏览中，设置了MEI（Media Engagement Index）列表，该列表长度为1000，用来来衡量用户是否是该网站的“忠实用户”。当MEI排名足够高时，即可自动播放。
MEI衡量个人在网站上消费媒体的倾向。Chrome 当前的做法是每个来源的访问次数与重要媒体播放事件的比率：
由此，Chrome计算出的媒体参与度得分在定期播放媒体的网站上足够高时，允许在桌面上自动播放媒体播放。
可以在chrome://media-engagement 内部页面上找到用户的MEI 。
作者：Withoutmelv 链接：https://juejin.cn/post/7073119971735240734
页面更新：2024-04-26
本站资料均由网友自行发布提供，仅用于学习交流。如有版权问题，请与我联系，QQ：4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号
