尝试自动播放某些音频时，我不一致地收到“播放（）失败，因为用户没有先与文档交互”错误

Question

当页面加载时，我希望音频文件自动播放。它工作过一次，但是当我刷新时，我得到了“play() 失败，因为用户没有先与文档交互”错误。当我更改一些代码时，它再次工作，但刷新后我一直收到错误。

我已经尝试过模拟一次点击，正如我上面所说的，它工作了一次。

这是我现在的代码：

$(".header-bg").click();
console.log("clicked");

$(document).ready(function() {
    console.log("loaded");
    $('#medieval-music')[0].play();
});

两个控制台日志被记录，但音乐没有播放。

Answer 1

我假设您使用的是 html5 <audio> 标记。如果是这样，将其默认设置为静音，如下所示：

<audio mute="true"></audio>

问题是现在大多数浏览器都会屏蔽autoplay capability，以防止用户在打开新标签页时听到噪音。

有关此答案的更多主题，请查看this。

Answer 2

在 html <audio controls autoplay></audio> 中使用自动播放属性，每次加载页面时，音频文件都会自动播放