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


当前回答

我有个主意。将某一类声音的所有音频加载到一个单独的音频元素中,其中src数据是连续音频文件中的所有样本(可能需要一些静默,这样你就可以在超时时捕捉和剪切样本,从而减少下一个样本的风险)。然后,寻找样本,并在需要时播放它。

如果你需要多个音频元素来播放,你可以用相同的src创建一个额外的音频元素,这样它就会被缓存。现在,你有效地拥有多个“轨道”。你可以利用你最喜欢的资源分配方案(如轮询等)来利用轨道组。

您还可以指定其他选项,如将声音排队到音轨中,以便在资源可用时播放或剪切当前播放的样本。

其他回答

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

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

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

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

我有个主意。将某一类声音的所有音频加载到一个单独的音频元素中,其中src数据是连续音频文件中的所有样本(可能需要一些静默,这样你就可以在超时时捕捉和剪切样本,从而减少下一个样本的风险)。然后,寻找样本,并在需要时播放它。

如果你需要多个音频元素来播放,你可以用相同的src创建一个额外的音频元素,这样它就会被缓存。现在,你有效地拥有多个“轨道”。你可以利用你最喜欢的资源分配方案(如轮询等)来利用轨道组。

您还可以指定其他选项,如将声音排队到音轨中,以便在资源可用时播放或剪切当前播放的样本。

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

我建议使用SoundJS,这是我参与开发的一个库。它允许你编写一个适用于任何地方的代码库,使用SoundJS选择web音频、html音频或flash音频。

它将允许你做所有你想做的事情:

播放和混合多种声音, 多次播放相同的样本,可能重复播放 在任何时候中断样本的回放 播放WAV文件,包含(取决于浏览器支持)

希望这能有所帮助。

我知道这是一个完全的黑客,但我认为我应该添加这个样本开源音频库我放在github上一段时间…

https://github.com/run-time/jThump

点击下面的链接后,在主行键上键入蓝调riff(也可以同时键入多个键等)。

示例使用jThump库>> http://davealger.com/apps/jthump/

它的基本工作原理是通过制作不可见的<iframe>元素来加载播放声音的页面onReady()。

这当然不是理想的,但你可以单独根据创造力+1这个解决方案(事实上,它是开源的,在我尝试过的任何浏览器上都可以工作),我希望这至少能给其他人一些搜索的想法。

:)