最近在一个项目中，我用
加载了一个声音var myAudio = new Audio("myAudio.mp3");
myAudio.play();
除非打开对话（即警告，确认），否则它可以正常播放。但是，当我尝试在我的 html 中添加音频标签时
<audio id="audio1">
<source src="alarm.mp3" type="audio/mpeg" />
</audio>
并使用
var myAudio1 = document.getElementById("audio1");
myAudio1.play()
打开对话后它继续播放。有人知道为什么吗？更一般地说，这两种播放声音的方式有什么区别？
【问题讨论】：
标签： javascript html audio
根据 Mozilla 的 this wiki entry <audio> 和 new Audio() 应该是相同的，但在实践中看起来并非如此。每当我需要在 JavaScript 中创建音频对象时，我实际上只是创建了一个 <audio> 元素，如下所示：
var audio = document.createElement('audio');
这实际上创建了一个音频元素，您可以像在页面的 HTML 中声明的 <audio> 元素一样使用它。
要使用这种技术重新创建您的示例，您可以这样做：
var audio = document.createElement('audio');
audio.src = 'alarm.mp3'
audio.play();
【讨论】：
<audio> 元素，将其源设置为指向 MP3/AAC 文件的 URL，然后开始播放。
<audio> 元素无法直接出现在文档中。您可以通过 JavaScript 控制它，或者如果您想查看它，您可以 appendChild 将元素添加到网页。如果您想显示默认的 <audio> 元素，通常最好将其放在 HTML 中。
JavaScript 在警告或确认框中停止。
您不能同时运行代码并显示 alert()、confirm() 或 prompt()，它实际上是在等待用户输入，这是 JavaScript 的核心功能。
我假设这正是完全在 JavaScript 范围内播放的音频文件这样做的原因。相比之下，即使 JavaScript 警报/确认/提示打开，Flash 视频剪辑或 HTML5 音频/视频也会继续播放。
至于哪种方法更好，这取决于你。使用内置在 alert/confirm/prompt 中的 JavaScript 做任何事情已经很过时了，您可以使用 jQuery UI 等做出更好看的提示。
如果您的页面上有很多动态内容，或者您正在查看需要触发的背景缓冲音频等等，那么 JavaScript 可能是更明智的处理方式.
如果屏幕上实际上只有一个播放器，那么没有理由不输入 HTML 代码。尽管现在不太可能影响任何人，但在没有理由的情况下严重依赖 JavaScript 仍然是不好的做法。
【讨论】：
我从网上的几个答案中想出了以下功能。
function playAudio(url){
var audio = document.createElement('audio');
audio.src = url;
audio.style.display = "none"; //added to fix ios issue
audio.autoplay = false; //avoid the user has not interacted with your page issue
audio.onended = function(){
audio.remove(); //remove after playing to clean the Dom
};
document.body.appendChild(audio);
}
【讨论】：
如果你要创建 - 那么你会在 ios 上遇到问题，因为它甚至显示你会设置宽度：0px
【讨论】：
display: none; 应该是一个标准，所有浏览器都支持。
var myAudio = new Audio("myAudio.mp3"); 更快，因为它不与 DOM 交互。
如果您使用多个音频和/或不需要用户与播放器控件交互，您应该明确选择不涉及 DOM 的new Audio()。
【讨论】：
首先让我回答它们之间的区别。
html 中的audio 标记和js 中的new audio 对象，如果有区别，那就是微妙的，微不足道的。他们实际上做同样的事情。
如果您只想在网页中包含音频，那么使用 html 标签似乎很合适并被推荐。和
如果您希望在用户进行交互时播放音频，那么 javascript Audio 对象似乎很合适并被推荐。例如;
document.querySelector("button).onclick=()=>{let audio=new Audio(audio url); audio.play;
此外，这是 javascript 的主要用途。
现在使用html音频标签打开对话框时仍然播放音频的原因是因为浏览器首先加载了您的html文件，执行文件的内容直到遇到script标签在 html 文件中并加载 javascript 文件。我想说的是，甚至在脚本加载之前，浏览器就已经读取了音频标签。
当遇到alert()、prompt() 或confirm 时，Javascript 会暂停。因此“打开警报后播放正常”。 (•‿•)。
【讨论】：