javascript Audio 对象与 HTML5 Audio 标签 [英] javascript Audio object vs. HTML5 Audio tag

问题描述

最近在一个项目中，当我用

In a project recently when I loaded a sound with

var myAudio = new Audio("myAudio.mp3");
myAudio.play();

除非打开对话(即警告，确认)，否则它播放得很好.但是，当我尝试在 html 中添加音频标签时

It played fine unless a dialogue was opened (ie alert, confirm). However when I instead tried adding an audio tag in my html

<audio id="audio1">
    <source src="alarm.mp3" type="audio/mpeg" />
</audio>

和使用

var myAudio1 = document.getElementById("audio1");
myAudio1.play()

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

it continued to play after a dialogue was opened. Does anyone know why this is? Also more generally what are the differences between the two ways to play sounds?

推荐答案

根据 这个维基条目 在 Mozilla <audio> 和 new Audio() 应该是一样的，但在实践中看起来不是这样.每当我需要在 JavaScript 中创建音频对象时，我实际上只是创建一个 <audio> 元素，如下所示:

According to this wiki entry at Mozilla <audio> and new Audio() should be the same but it doesn't look like that is the case in practice. Whenever I need to create an audio object in JavaScript I actually just create an <audio> element like this:

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

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

That actually creates an audio element that you can use exactly like an <audio> element that was declared in the page's HTML.

要使用此技术重新创建示例，请执行以下操作:

To recreate your example with this technique you'd do this:

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

这篇关于javascript Audio 对象与 HTML5 Audio 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！