立即播放 JavaScript 声音文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15079013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play a JavaScript sound file without a delay
提问by scrblnrd3
I have a HTML5 canvas game with sounds, but one of the problems that I am running into is that when the sound is played, all other action stops until the sound has finished playing. I used this code
我有一个带声音的 HTML5 画布游戏，但我遇到的问题之一是，当播放声音时，所有其他动作都会停止，直到声音播放完毕。我用了这个代码
document.getElementById("music").innerHTML="<embed src=\""+surl+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"
Where surl is the url of the sound and music of the span element that is playing the music.
Does anyone know how to play a sound without delaying the entire program?
其中 surl 是播放音乐的 span 元素的声音和音乐的 url。有谁知道如何在不延迟整个程序的情况下播放声音？
I tried it with a considerably larger file, and it turns out that while it DOES play in the background, there is still a considerable delay between starting the sound and continuing the game.
我尝试了一个相当大的文件，结果发现虽然它确实在后台播放，但在开始声音和继续游戏之间仍有相当长的延迟。
回答by Luke Channings
Try using the native HTML5 Audio API. First, create the instances of the sounds you will need:
尝试使用原生 HTML5 音频 API。首先，创建您需要的声音实例：
var ping = new Audio("ping.ogg");
Note:You do not need to insert these audio instances into the DOM at any point.
注意：您不需要在任何时候将这些音频实例插入到 DOM 中。
When you're ready to play the sound, e.g. when someone clicks:
当您准备好播放声音时，例如当有人点击时：
document.querySelector(".ping").addEventListener("click", function() {
// ping clicked, play ping sound:
ping.play()
})
Because the ping instance is pre-loaded there should be no delay in playing the sound, and you can play it as many times as you like.
因为 ping 实例是预加载的，所以播放声音应该没有延迟，您可以随意播放多次。
Keep in mind that codec support is not consistent cross-browser, so you will have to have an ogg source and an MP3 source, or another combination (support tables can be found here http://en.wikipedia.org/wiki/HTML5_Audio#.3CAudio.3E_element_format_support).
请记住，编解码器支持并非跨浏览器一致，因此您必须拥有 ogg 源和 MP3 源或其他组合（支持表可在此处找到http://en.wikipedia.org/wiki/HTML5_Audio #.3CAudio.3E_element_format_support)。
If you want a more backwards-compatible approach I recommend SoundManager2 as a complete solution with an easy API: http://www.schillmania.com/projects/soundmanager2/
如果您想要一种更向后兼容的方法，我推荐 SoundManager2 作为具有简单 API 的完整解决方案：http: //www.schillmania.com/projects/soundmanager2/
Otherwise, the documentation for the native HTML5 Audio API can be found here: https://developer.mozilla.org/en-US/docs/HTML/Element/audioand here https://developer.mozilla.org/en-US/docs/DOM/HTMLAudioElement
否则，可以在此处找到本机 HTML5 音频 API 的文档：https: //developer.mozilla.org/en-US/docs/HTML/Element/audio和此处https://developer.mozilla.org/en-美国/docs/DOM/HTMLAudioElement
回答by Daiz
You are relying on whatever external plugin the user might have to play the audio by using embed, so the performance might vary wildly from user to user.
您依赖于用户可能必须使用的任何外部插件来播放音频embed，因此性能可能因用户而异。
My recommendation would be to use a library like howler.js, which was built with games in mind. HTML5 audio can be quite the pain to get right, especially for games, so you're going to save yourself from a lot of headache by using a library instead of trying to fiddle with HTML5 audioelements yourself.
我的建议是使用像howler.js这样的库，它是为游戏而构建的。HTML5 音频可能很难做到正确，尤其是对于游戏而言，因此您可以通过使用库而不是尝试自己摆弄 HTML5audio元素来避免很多头痛。
回答by scrblnrd3
I did a bit of digging around on some other stackoverflow posts, and I found that in HTML5, you can just do
我在其他一些 stackoverflow 帖子上做了一些挖掘，我发现在 HTML5 中，你可以这样做
var sound=new Audio("hello.wav");
and then call
然后打电话
sound.play();
That seems to do the trick, and there is no delay.
这似乎奏效了，而且没有延迟。
回答by lmortenson
I've had good success using this framework: http://www.schillmania.com/projects/soundmanager2/
我使用这个框架取得了很好的成功：http: //www.schillmania.com/projects/soundmanager2/
It has decent cross browser support, and you can preload/start/stop sounds with JavaScript. I've used it with sounds playing while animations are occurring and didn't see any delay. You can also have it wait for all your sound assets to be loaded before doing something, and in the meantime show a loading screen or something.
它具有不错的跨浏览器支持，您可以使用 JavaScript 预加载/启动/停止声音。我在动画发生时使用它播放声音并且没有看到任何延迟。你也可以让它在做某事之前等待你所有的声音资产被加载，同时显示一个加载屏幕或其他东西。
回答by VJAI
Web Audio API is right tool for this job. There are plenty of libraries available that simplifies using the little complex API. You can also checkout musquitoa tiny library created by me that manages the complexity in Web Audio API and helps to create and manage single or group of sounds.
Web Audio API 是适合这项工作的工具。有很多可用的库可以简化使用复杂的 API 的过程。您还可以查看 musquito一个由我创建的小库，它管理 Web Audio API 中的复杂性并帮助创建和管理单个或一组声音。
