立即播放JavaScript声音文件

Play a JavaScript sound file without a delay

本文关键字：声音 文件 JavaScript 播放      更新时间：2023-09-26

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

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


其中surl是播放音乐的span元素的声音和音乐的url。有人知道如何在不拖延整个节目的情况下播放声音吗


我用一个相当大的文件尝试了一下，结果发现，虽然它确实在后台播放，但在开始声音和继续游戏之间仍然有相当大的延迟。

尝试使用本地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/

否则，本地HTML5 Audio API的文档可以在这里找到：https://developer.mozilla.org/en-US/docs/HTML/Element/audio在这里https://developer.mozilla.org/en-US/docs/DOM/HTMLAudioElement

您依赖于任何外部插件，用户可能必须使用embed来播放音频，因此性能可能因用户而异。

我的建议是使用一个类似howler.js的库，它是在考虑游戏的情况下构建的。HTML5音频可能很难正确处理，尤其是对于游戏来说，所以你可以通过使用库来避免头疼，而不是自己摆弄HTML5 audio元素。

我使用这个框架取得了很好的成功：http://www.schillmania.com/projects/soundmanager2/

它有不错的跨浏览器支持，您可以使用JavaScript预加载/启动/停止声音。我用它来播放动画时的声音，没有看到任何延迟。你也可以让它在做某事之前等待你所有的声音资产被加载，同时显示加载屏幕或其他什么。

我在其他一些stackoverflow帖子上做了一些挖掘，我发现在HTML5中，你可以只做

var sound=new Audio("hello.wav");

然后呼叫

sound.play();

这似乎奏效了，而且没有拖延。

Web Audio API是适合此工作的工具。有很多库可以简化API的使用。您还可以签出musquito，这是我创建的一个小型库，用于管理Web Audio API的复杂性，并帮助创建和管理单个或组声音。

相关文章：