JavaScript / HTML5中的声音效果HTML5 对象Audio网络音频接口

2022-08-29 23:51:46

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

具体要求不多:

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

我的第一种方法是使用HTML5元素并定义我页面中的所有声音效果。Firefox只是桃色地播放WAV文件,但多次调用并不能真正多次播放示例。根据我对HTML5规范的理解,该元素还跟踪播放状态,因此可以解释为什么。<audio>#play<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;
      };
    });
  }
};

所以现在我可以从Firebug控制台做并播放,但我仍然不能多次播放相同的样本。似乎该元素实际上更像是一种流媒体功能,而不是用来播放声音效果的东西。Snd.boom();snd/boom.wav<audio>

有没有一种聪明的方法可以做到这一点,我错过了,最好只使用HTML5和JavaScript?

我还应该提到,我的测试环境是Ubuntu 9.10上的Firefox 3.5。我尝试过的其他浏览器 - Opera,Midori,Chromium,Epiphany - 产生了不同的结果。有些不玩任何东西,有些抛出异常。


答案 1

HTML5 对象Audio

您无需为元素而烦恼。HTML 5 允许您直接访问 Audio 对象<audio>

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

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

若要多次播放同一声音,请创建对象的多个实例。您也可以在对象完成播放后对其进行设置。Audiosnd.currentTime=0


由于 JS 构造函数不支持回退元素,因此应使用<source>

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

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


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


答案 2

网络音频接口

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

截至2012年7月,Web Audio API现在在Chrome中受支持,并且至少在Firefox中部分受支持,并且计划从版本6开始添加到IOS中。

尽管该元素足够强大,可以以编程方式用于基本任务,但它从未打算为游戏和其他复杂应用程序提供完整的音频支持。它旨在允许将单个媒体嵌入到页面中,类似于标签。尝试将它用于游戏存在很多问题:Audioimg

  • 正时滑移在元件中很常见Audio
  • 每个声音实例都需要一个元素Audio
  • 加载事件并不完全可靠,但
  • 没有常见的音量控制,没有褪色,没有滤镜/效果

以下是一些很好的资源,可帮助您开始使用 Web 音频 API: