播放JavaScript声音文件,没有延迟

Question

我有一个带声音的HTML5帆布游戏,但我遇到的一个问题是,当播放声音时,所有其他动作都会停止,直到声音播放完毕.我用过这段代码

document.getElementById("music").innerHTML="<embed src=\""+surl+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"

surl是播放音乐的span元素的声音和音乐的url.有没有人知道如何在不延迟整个程序的情况下播放声音？

我用一个相当大的文件尝试了它,事实证明,当它在后台播放时,在启动声音和继续游戏之间仍然存在相当大的延迟.

Answer 1

尝试使用本机HTML5 Audio API.首先,创建您需要的声音实例:

var ping = new Audio("ping.ogg");

注意:您无需在任何时候将这些音频实例插入DOM.

当您准备播放声音时,例如当有人点击时:

document.querySelector(".ping").addEventListener("click", function() {

    // ping clicked, play ping sound:
    ping.play()
})

由于ping实例已预先加载,因此播放声音应该没有延迟,您可以根据需要多次播放.

请记住,编解码器支持不一致跨浏览器,因此您必须拥有ogg源和MP3源,或其他组合(支持表可在此处找到http://en.wikipedia.org/wiki/HTML5_Audio #.3CAudio.3E_element_format_support).

如果您想要一种更向后兼容的方法,我建议将SoundManager2作为一个简单API的完整解决方案:http://www.schillmania.com/projects/soundmanager2/