如何在不严格限制JavaScript的情况下播放音频？

我正在制作一个由纯JavaScript代码组成的游戏，我想用JavaScript操作音频。 具体来说，我想让页面在单击某个

div

元素以及在JavaScript代码中使用某个函数时开始播放音乐

我知道HTML5的audio标签有一个限制，即与

audio

元素关联的音乐文件不能在用户未单击audio元素的play按钮的情况下播放，因此我不能这样做：

const audio = document.createElement("audio");
audio.src = "url of source";
audio.play(); 
//Uncaught (in promise) DOMException: play() failed because 
//the user didn't interact with the document first.　
//https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Chrome的自动播放策略很简单：

始终允许静音自动播放。 在以下情况下，允许自动播放声音： 用户已与域交互（单击、点击等）。 在桌面上，用户的媒体参与度指数阈值已经超过，这意味着用户以前播放过声音视频。 用户已将该站点添加到其手机主屏幕或在桌面上安装了PWA。 顶部框架可以将自动播放权限委托给其iFrame，以允许自动播放声音

但我想更自由地管理音频，以使游戏具有良好的用户界面

为了实现我的目标，我想我需要在JavaScript代码中引入另一个库或API，或者仍然使用带有一些技巧的音频标记

我想其中一个选择可能是

你能告诉我一些建议吗

进展 我尝试了如下代码，当我使用click事件处理程序单击一个div元素时，它起了作用：

<div id="my-div">play</div>

<audio id="myAudio">
<source src="url of source" type="audio/mpeg">
</audio>

然而，当我像下面这样写的时候，即使我似乎没有违反自动播放策略，它也不会出现相同的错误：

document.getElementById('my-div').addEventListener('click', () => {
    const audio = new Audio('url of source');
    audio.play();
});
//Uncaught (in promise) DOMException: play() failed because 
//the user didn't interact with the document first.　
//https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

---

上面两个代码之间的主要区别在于我是将音频源文件的url写在audio标记中，还是将其写在audio标记内的source标记中。我猜这会有一些不同，但我不知道到底是什么问题。

你是对的。只有在响应用户手势启动播放时，才能确保自动播放策略不会阻止播放。带有单击处理程序的按钮是典型的示例，但是单击处理程序也可以附加到div。假设您的div有一个名为

my div

的id。在这种情况下，以下方法应该有效

document.getElementById('my-div').addEventListener('click', () => {
    const audio = new Audio('url of source');

    audio.play(); 
});

---

使用Web音频API不会更改自动播放策略。通常，无论使用哪种浏览器API，都适用相同的规则。

您能解释一下您遇到的错误吗

//获取错误

好的，我重写了一条完整的错误消息。我尝试了，然后单击了div元素

我的div

，但结果是一样的。我收到了相同的错误：

Uncaught（in promise）DOMException:未能加载，因为找不到支持的源。

根据错误消息，源的url似乎指向不支持的某些音频格式。作为测试，使用一个小的mp3文件。很抱歉我误读了错误。问题是URL字符串中的反斜杠“\”发生了意外的转义。我用普通斜杠替换了反斜杠，你的代码运行正常。非常感谢你的建议。

document.getElementById('my-div').addEventListener('click', () => {
    const audio = new Audio('url of source');

    audio.play(); 
});