JavaScript / HTML5中的音效 [英] Sound effects in JavaScript / HTML5
问题描述
我使用HTML5编写游戏;我现在遇到的障碍是如何播放音效。
具体要求很少：
我的第一个方法是使用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;}
//剪掉基名（条目目录和扩展名）
var name = src.substring（4，src.length - 4）;
//创建辅助函数，它克隆音频对象并播放它
var Constructor = function（）{};
Constructor.prototype = this;
Snd [name] = function（）{
var clone = new Constructor（）;
clone.play（）;
//返回克隆元素，所以调用者可以中断声音效果
返回克隆;
};
}）;
}
};
现在我可以做 Snd.boom（）; 从Firebug控制台播放并播放 snd / boom.wav ，但我仍然无法多次播放相同的样本。似乎< audio> 元素实际上更像是一个流媒体功能而不是播放音效的东西。
有没有一种巧妙的方法可以让这种情况发生，我错过了，最好只使用HTML5和JavaScript？
我还应该提到，我的测试环境是Ubuntu 9.10上的Firefox 3.5。我试过的其他浏览器 - Opera，Midori，Chromium，Epiphany - 产生了不同的结果。有些不会播放任何内容，有些则会抛出异常。 HTML5
音频 objects
您不需要打扰< audio> 元素。 HTML 5可让您访问 音频对象直接：
var snd = new Audio（file.wav）; //创建时自动缓冲
snd.play（）;
在当前版本的规范中不支持混合。
要多次播放相同的声音，请创建 Audio 对象的多个实例。完成播放后，您还可以在对象上设置 snd.currentTime = 0 。
由于JS构造函数不支持回退< source> 元素，因此您应该使用
（new Audio（））。canPlayType（audio / ogg; codecs = vorbis）
测试浏览器是否支持Ogg Vorbis。
如果你正在写一个游戏或音乐应用程序（不仅仅是玩家），您需要使用更高级的Web Audio API ，现在受到大多数浏览器的支持。
I'm using HTML5 to program games; the obstacle I've run into now is how to play sound effects.
The specific requirements are few in number:
- Play and mix multiple sounds,
- Play the same sample multiple times, possibly overlapping playbacks,
- Interrupt playback of a sample at any point,
- Preferably play WAV files containing (low quality) raw PCM, but I can convert these, of course.
My first approach was to use the HTML5 <audio> element and define all sound effects in my page. Firefox plays the WAV files just peachy, but calling #play multiple times doesn't really play the sample multiple times. From my understanding of the HTML5 spec, the <audio> element also tracks playback state, so that explains why.
My immediate thought was to clone the audio elements, so I created the following tiny JavaScript library to do that for me (depends on 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;
};
});
}
};
So now I can do Snd.boom(); from the Firebug console and play snd/boom.wav, but I still can't play the same sample multiple times. It seems that the <audio> element is really more of a streaming feature rather than something to play sound effects with.
Is there a clever way to make this happen that I'm missing, preferably using only HTML5 and JavaScript?
I should also mention that, my test environment is Firefox 3.5 on Ubuntu 9.10. The other browsers I've tried - Opera, Midori, Chromium, Epiphany - produced varying results. Some don't play anything, and some throw exceptions.
HTML5 Audio objects
You don't need to bother with <audio> elements. HTML 5 lets you access Audio objects directly:
var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();
There's no support for mixing in current version of the spec.
To play same sound multiple times, create multiple instances of the Audio object. You could also set snd.currentTime=0 on the object after it finishes playing.
Since the JS constructor doesn't support fallback <source> elements, you should use
(new Audio()).canPlayType("audio/ogg; codecs=vorbis")
to test whether the browser supports Ogg Vorbis.
If you're writing a game or a music app (more than just a player), you'll want to use more advanced Web Audio API, which is now supported by most browsers.
这篇关于JavaScript / HTML5中的音效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
