我使用HTML5来编写游戏;我现在遇到的障碍是如何播放音效。

具体要求不多:

播放和混合多种声音, 多次播放相同的样本,可能会重复播放, 在任何时候中断样本的回放, 最好播放WAV文件包含(低质量)原始PCM,但我可以转换这些,当然。

我的第一个方法是使用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——产生了不同的结果。有些不播放任何内容,有些则抛出异常。


当前回答

不可能使用单个<audio>元素进行多镜头播放。为此需要使用多个元素。

其他回答

不可能使用单个<audio>元素进行多镜头播放。为此需要使用多个元素。

http://robert.ocallahan.org/2011/11/latency-of-html5-sounds.html

http://people.mozilla.org/~roc/audio-latency-repeating.html

对我来说,在Firefox和Chrome中工作正常。

想要停止由你引起的声音,就这么做 var sound = document.getElementById("shot").cloneNode(true); sound.play (); 后来 sound.pause ();

Web音频API

编辑:截至2021年12月,Chrome、Firefox、Safari和所有其他主要浏览器(当然不包括IE)基本上都支持Web Audio API。

截至2012年7月,Web Audio API已在Chrome中得到支持,Firefox也至少部分支持,并计划在IOS 6版中添加。

尽管Audio元素足够健壮,可以通过编程方式用于基本任务,但它从未打算为游戏和其他复杂应用程序提供完整的音频支持。它的设计目的是允许在页面中嵌入单个媒体片段,类似于img标签。在游戏中使用it存在很多问题:

定时卡瓦在音频元素中很常见 每个声音实例都需要一个Audio元素 加载事件还不是完全可靠的 没有常用的音量控制,没有淡出,没有过滤器/效果

这里有一些很好的资源来开始使用Web Audio API:

MDN documentaion 从WebAudio文章开始 《FieldRunners WebAudio案例研究》也是一本不错的读物

我在编程一个音乐盒卡片生成器时遇到了这个问题。从不同的库开始,但每次都有某种程度的故障。正常音频执行的延迟很糟糕,没有多次播放……最终使用低延迟库+ soundmanager:

http://lowlag.alienbill.com/ 而且 http://www.schillmania.com/projects/soundmanager2/

你可以在这里查看实现: http://musicbox.grit.it/

我生成了wav + ogg文件,用于多种浏览器播放。这个音乐盒播放器工作响应ipad, iphone, Nexus, mac, pc,…对我有用。

howler.js

对于游戏创作,最好的解决方案之一就是使用一个能够解决我们在编写网页代码时所面临的许多问题的库,如嚎叫.js。js将强大(但低级)的Web Audio API抽象为一个易于使用的框架。如果Web音频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的音乐编辑器、效果生成器或视频游戏,这些库都值得一看。