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; }
// 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>元素实际上更像是一个流媒体功能，而不是播放音效的东西。
有没有一种巧妙的方法可以让我错过，最好只使用HTML5和JavaScript？
我还应该提到，我的测试环境是Ubuntu 9.10上的Firefox 3.5。 我试过的其他浏览器 - Opera，Midori，Chromium，Epiphany - 产生了不同的结果。 有些不玩任何东西，有些则会抛出异常。
HTML5 Audio对象
您无需打扰<audio>元素。 HTML 5可让您直接访问Audio对象：
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。
如果您正在编写游戏或音乐应用程序（不仅仅是一个玩家），您需要使用更高级的Web Audio API，现在大多数浏览器都支持该API。
W3C的WebAudio API
截至2012年7月，ChromeAudio现在支持WebAudio API，并且至少部分受到Firefox的支持，并且预计会在版本6中添加到IOS中。
尽管它足够强大，可以用于基本任务的编程使用，但Audio元素从来不打算为游戏等提供全面的音频支持。它旨在允许将单个媒体内容嵌入到页面中，类似于img标签。 尝试为游戏使用音频标签有很多问题：
我使用了WebAudio入门文章开始使用WebAudio API。 FieldRunners WebAudio案例研究也是一个很好的阅读。
howler.js
对于游戏创作来说，最好的解决方案之一就是使用一个库来解决我们在编写Web代码时遇到的许多问题，比如howler.js。 howler.js将伟大的（但低级的）Web Audio API抽象为易于使用的框架。 如果Web Audio API不可用，它将尝试回退到HTML5音频元素。
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
另一个伟大的库是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”，它更专注于特效制作，同时通过一个相对独特的（也许更简洁的感觉）API提供了一组类似的功能：
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的音乐编辑器，效果生成器或视频游戏，这些库都值得一看。
链接地址: http://www.djcxy.com/p/51705.html