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


当前回答

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是这项工作的正确工具。在加载声音文件和播放它的过程中涉及到一些工作。幸运的是,有很多库可以简化这项工作。出于对声音的兴趣,我还创建了一个名为musquito的库,你也可以查看一下。

目前它只支持衰落的声音效果,我正在做其他的事情,比如3D空间化。

为了多次播放相同的样本,是不是可以这样做:

e.pause(); // Perhaps optional
e.currentTime = 0;
e.play();

(e为音频元素)

也许我完全误解了你的问题,你想让音效同时播放多次吗?那么这是完全错误的。

HTML5音频对象

您不需要为<audio>元素而烦恼。HTML 5让你直接访问音频对象:

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

在当前版本的规范中不支持混合。

要多次播放相同的声音,请创建Audio对象的多个实例。你也可以设置snd。在对象播放结束后,currentTime=0。


由于JS构造函数不支持回退<源>元素,您应该使用

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

测试浏览器是否支持Ogg Vorbis。


如果你正在编写一个游戏或音乐应用程序(而不仅仅是一个播放器),你会想要使用更高级的Web Audio API,现在大多数浏览器都支持它。

这里有一种方法可以同时播放相同的声音。结合预加载器,你就万事俱备了。这至少适用于Firefox 17.0.1,还没有在其他任何东西上测试过。

// collection of sounds that are playing
var playing={};
// collection of sounds
var sounds={step:"knock.ogg",throw:"swing.ogg"};

// function that is used to play sounds
function player(x)
{
    var a,b;
    b=new Date();
    a=x+b.getTime();
    playing[a]=new Audio(sounds[x]);
    // with this we prevent playing-object from becoming a memory-monster:
    playing[a].onended=function(){delete playing[a]};
    playing[a].play();
}

将此绑定到键盘键,并享受:

player("step");

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