javascript 音频对象与 HTML5 音频标签

Question

在最近的一个项目中，我加载了一个声音

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()

对话打开后继续播放。有人知道为什么吗？更一般地说，这两种播放声音的方式有什么区别？

Answer 1

根据 this wiki entry在 Mozilla <audio>和 new Audio() 应该相同，但实际情况并非如此。每当我需要在 JavaScript 中创建一个音频对象时，我实际上只是创建了一个 <audio>。像这样的元素:

var audio = document.createElement('audio');

这实际上创建了一个音频元素，您可以像使用 <audio> 一样使用它在页面的 HTML 中声明的元素。

要使用此技术重新创建您的示例，您需要这样做:

var audio = document.createElement('audio');
audio.src = 'alarm.mp3'
audio.play();