我正在使用 HTML5 来编写游戏;我现在遇到的障碍是如何播放音效。
具体要求很少:
- 播放和混合多种声音,
- 多次播放相同的样本,可能会重叠播放,
- 在任何时候中断样本的播放,
- 最好播放包含(低质量)原始 PCM 的 WAV 文件,但我当然可以转换这些文件。
我的第一个方法是使用 HTML5 <audio>
元素并在我的页面中定义所有声音效果。 Firefox 播放 WAV 文件的效果非常好,但调用 #play
多次并没有真正多次播放样本。根据我对 HTML5 规范的理解,<audio>
元素还跟踪播放状态,这就解释了原因。
我的直接想法是克隆音频元素,因此我创建了以下小型 JavaScript 库来为我做这件事(取决于 jQuery):
var Snd = {
init: function() {
$("audio").each(function() {
var src = this.getAttribute('src');
if (src.substring(0, 4) !== "snd/") { return; }
// Cut out the basename (strip directory and extension)
var name = src.substring(4, src.length - 4);
// Create the helper function, which clones the audio object and plays it
var Constructor = function() {};
Constructor.prototype = this;
Snd[name] = function() {
var clone = new Constructor();
clone.play();
// Return the cloned element, so the caller can interrupt the sound effect
return clone;
};
});
}
};
所以现在我可以做 Snd.boom();
从 Firebug 控制台播放 snd/boom.wav
,但我仍然无法多次播放同一个样本。似乎 <audio>
element 实际上更像是一种流媒体功能,而不是用来播放音效的东西。
是否有一种聪明的方法可以实现我所缺少的,最好只使用 HTML5 和 JavaScript?
我还要提一下,我的测试环境是 Ubuntu 9.10 上的 Firefox 3.5。我尝试过的其他浏览器——Opera、Midori、Chromium、Epiphany——产生了不同的结果。有些什么都不播放,有些抛出异常。
最佳答案
HTML5 Audio
对象
您无需为 <audio>
烦恼元素。 HTML 5 让您访问 Audio
objects直接:
var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();
当前版本的规范不支持混用。
要多次播放相同的声音,请创建 Audio
的多个实例目的。你也可以设置snd.currentTime=0
播放完毕后在对象上。
由于 JS 构造函数不支持回退 <source>
元素,你应该使用
(new Audio()).canPlayType("audio/ogg; codecs=vorbis")
测试浏览器是否支持Ogg Vorbis。
如果您正在编写游戏或音乐应用程序(不仅仅是播放器),您会想要使用 more advanced Web Audio API ,现在是 supported by most browsers .
关于javascript - JavaScript/HTML5 中的音效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1933969/