JavaScript / HTML5中的音效
我正在使用HTML5编写游戏程序；我现在遇到的障碍是如何播放音效。
具体要求在数量上是很少的：
- 播放和混合多个声音，
- 多次播放相同的样本，可能会重叠播放，
- 在任何时候中断样本播放，
- 最好播放包含(低质量)原始PCM的WAV文件，但我当然可以转换这些文件。
我的第一种方法是使用HTML5 <audio>元素并在页面中定义所有声音效果。火狐对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;
};
});
}
};因此，现在我可以从Firebug控制台执行Snd.boom();并播放snd/boom.wav，但是我仍然不能多次播放相同的示例。看起来<audio>元素实际上更像是一个流媒体功能，而不是用来播放声音效果的东西。
有没有一种聪明的方法来实现这一点，最好是只使用HTML5和JavaScript？
我还应该提一下，我的测试环境是Ubuntu 9.10上的Firefox3.5。我尝试过的其他浏览器-- Opera、Midori、Chromium、Epiphany --都产生了不同的结果。有些什么都不玩，有些则抛出异常。
回答 17
Stack Overflow用户
发布于 2009-12-20 06:37:51
HTML5 Audio对象
您不需要为<audio>元素而烦恼。HTML5允许您直接访问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。
Stack Overflow用户
发布于 2012-07-19 05:39:26
W3C提供的WebAudio接口
截至2012年7月，Chrome浏览器支持WebAudio API，火狐至少部分支持，并计划从版本6开始添加到IOS中。
虽然Audio元素足够强大，可以编程用于基本任务，但它并不意味着为游戏等提供完整的音频支持。它的设计目的是允许在页面中嵌入单个媒体，类似于img标签。在游戏中使用音频标签有很多问题：
- 计时滑移与音频元素很常见
- 每个声音实例都需要一个音频元素
- 加载事件并不完全可靠，但
- 没有通用的音量控制，没有衰落，也没有slips
我使用了这篇Getting Started With WebAudio文章来开始学习WebAudio应用编程接口。FieldRunners WebAudio Case Study也是一个很好的读物。
Stack Overflow用户
发布于 2013-10-23 23:06:30
对于游戏创作，最好的解决方案之一是使用一个库来解决我们在为web编写代码时所面临的许多问题，比如howler.js。howler.js将伟大的(但低级的) Web Audio API抽象为一个易于使用的框架。如果Web Audio API不可用，它将尝试回退到HTML5 Audio Element。
var sound = new Howl({
urls: ['sound.mp3', 'sound.ogg']
}).play();
// it also provides calls for spatial/3d audio effects (most browsers)
sound.pos3d(0.1,0.3,0.5);另一个很棒的库是wad.js，它对于生成合成音频特别有用，比如音乐和特效。例如：
var saw = new Wad({source : 'sawtooth'})
saw.play({
volume : 0.8,
wait : 0, // Time in seconds between calling play() and actually triggering the note.
loop : false, // This overrides the value for loop on the constructor, if it was set.
pitch : 'A4', // A4 is 440 hertz.
label : 'A', // A label that identifies this note.
env : {hold : 9001},
panning : [1, -1, 10],
filter : {frequency : 900},
delay : {delayTime : .8}
})另一个类似于Wad.js的库是"Sound for Games"，它更专注于效果制作，同时通过一个相对独特(也许更简洁的感觉)的应用程序接口提供一组类似的功能：
function shootSound() {
soundEffect(
1046.5, //frequency
0, //attack
0.3, //decay
"sawtooth", //waveform
1, //Volume
-0.8, //pan
0, //wait before playing
1200, //pitch bend amount
false, //reverse bend
0, //random pitch range
25, //dissonance
[0.2, 0.2, 2000], //echo array: [delay, feedback, filter]
undefined //reverb array: [duration, decay, reverse?]
);
}摘要
无论您是需要播放单个声音文件，还是需要创建自己的基于html的音乐编辑器、效果生成器或视频游戏，这些库中的每一个都值得一看。
https://stackoverflow.com/questions/1933969
复制相似问题