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

根据这个维基条目 Mozilla的<audio>,并new Audio() 应该是相同的,但它不像是在实践中的情况.每当我需要在JavaScript中创建一个音频对象时,我实际上只是创建一个<audio>这样的元素:

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

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

要使用此技术重新创建示例,您可以执行以下操作:

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

Answer 2

JavaScript在"警报"或"确认"框中暂停.

你不能同时运行代码,并显示alert(),confirm()或者prompt(),它的字面等待该用户输入,这是JavaScript的一个核心功能.

我假设这是完全在JavaScript范围内播放的音频文件的原因.即使JavaScript警报/确认/提示打开,Flash视频剪辑或HTML5音频/视频也会继续播放.

至于哪种方法更好,那取决于你.使用内置警报/确认/提示的JavaScript做任何事都是相当陈旧的,有更好看的提示你可以使用jQuery UI等等.

如果您在页面上有很多动态内容,或者在需要触发之前查看后台缓冲音频等等,那么JavaScript可能是更实用的方式.

如果屏幕上只有一个玩家,则没有理由不插入HTML代码.虽然这些天不太可能影响任何人,但在没有理由的情况下严重依赖JavaScript仍然是不好的做法.