一尘不染

JavaScript / HTML5中的声音效果

javascript

我正在使用HTML5对游戏进行编程;我现在遇到的障碍是如何播放音效。

具体要求数量很少:

  • 播放和混合多种声音,
  • 多次播放同一样本,可能会重复播放,
  • 随时中断样本播放,
  • 最好播放包含(低质量)原始PCM的WAV文件,但是我当然可以转换它们。

我的第一种方法是使用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-产生了不同的结果。有些不玩任何东西,有些则抛出异常。


阅读 492

收藏
2020-05-01

共1个答案

一尘不染

HTML5 Audio对象

您无需理会<audio>元素。HTML5使您可以直接访问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。


如果您正在编写游戏或音乐应用程序(不仅仅是播放器),则需要使用更高级的WebAudioAPI,大多数浏览器现在都支持该API。

2020-05-01