如何在JavaScript上不受严格限制地播放音频？
我正在制作一个由裸露的JavaScript代码组成的游戏，我想在JavaScript中操作音频。具体来说，我想让页面在单击某个div元素和在JavaScript代码中使用某些函数时开始播放音乐。
我知道HTML5的音频标记有一个限制，即如果用户不单击音频元素的play按钮，就不能播放与Audio元素相关的音乐文件，所以我不能这样做：
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-changesChrome的自动播放策略很简单:总是允许静音自动播放。如果:用户已与域交互(单击、点击等)，则允许自动播放声音。在桌面上，用户的媒体参与指数阈值已经被越过，这意味着用户以前用声音播放过视频。用户在手机上将站点添加到自己的主屏幕上，或者在桌面上安装PWA。顶部帧可以将自动播放权限委托给它们的iframes，以允许声音自动播放。
但我想管理音频更自由，以作出一个良好的用户界面的游戏。
为了实现我的目标，我认为我需要在JavaScript代码中引入另一个库或API，或者仍然使用带有一些技巧的音频标记。
我想其中一个选择可能是Web音频API。
你能告诉我一些建议吗？
进展
我尝试了如下代码，当我用单击事件处理程序单击div元素时，它起了作用：
<div id="my-div">play</div>
<audio id="myAudio">
<source src="url of source" type="audio/mpeg">
</audio>const myAudio = document.getElementById("myAudio");
const btn = document.getElementById("my-div");
btn.addEventListener("click",() => {
myAudio.play();
});然而，当我像下面这样写时，即使我似乎没有破坏自动播放策略，它也不能处理相同的错误：
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，还是将其写入音频标记中的源标记中。我猜这会有一些不同，但我不明白到底是什么问题。
回答 1
Stack Overflow用户
发布于 2021-03-15 13:13:25
你说得对。只有当回放响应于用户手势时，才能确保自动播放策略不会阻止回放。具有单击处理程序的按钮是典型的示例，但单击处理程序也可以附加到div。假设您的div有一个名为my-div的id。在这种情况下，以下内容应该有效。
document.getElementById('my-div').addEventListener('click', () => {
const audio = new Audio('url of source');
audio.play();
});使用不会更改自动播放策略。通常，无论使用哪种浏览器API，都适用相同的规则。
https://stackoverflow.com/questions/66637044
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号