JavaScript / HTML5中的音效

本文翻译自：Sound effects in JavaScript / HTML5

I'm using HTML5 to program games; 我正在使用HTML5来编写游戏; the obstacle I've run into now is how to play sound effects. 我现在遇到的障碍是如何播放声音效果。

The specific requirements are few in number: 具体要求很少：

• Play and mix multiple sounds, 播放和混合多种声音，
• Play the same sample multiple times, possibly overlapping playbacks, 多次播放相同的样本，可能重叠播放，
• Interrupt playback of a sample at any point, 在任何点中断播放样本，
• Preferably play WAV files containing (low quality) raw PCM, but I can convert these, of course. 最好播放包含（低质量）原始PCM的WAV文件，但我当然可以转换它们。

My first approach was to use the HTML5 <audio> element and define all sound effects in my page. 我的第一种方法是使用HTML5 <audio>元素并在我的页面中定义所有声音效果。 Firefox plays the WAV files just peachy, but calling #play multiple times doesn't really play the sample multiple times. Firefox只播放WAV文件，但多次调用#play并不能真正多次播放样本。 From my understanding of the HTML5 spec, the <audio> element also tracks playback state, so that explains why. 根据我对HTML5规范的理解， <audio>元素还可以跟踪播放状态，因此可以解释原因。

My immediate thought was to clone the audio elements, so I created the following tiny JavaScript library to do that for me (depends on jQuery): 我的直接想法是克隆音频元素，所以我创建了以下微小的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;
      };
    });
  }
};

So now I can do Snd.boom(); 所以现在我可以做Snd.boom(); from the Firebug console and play snd/boom.wav , but I still can't play the same sample multiple times. 从Firebug控制台播放snd/boom.wav ，但我仍然无法多次播放相同的样本。 It seems that the <audio> element is really more of a streaming feature rather than something to play sound effects with. 似乎<audio>元素实际上更像是流媒体功能，而不是播放音效的东西。

Is there a clever way to make this happen that I'm missing, preferably using only HTML5 and JavaScript? 是否有一种聪明的方法可以实现这一点，我很想忘记，最好只使用HTML5和JavaScript？

I should also mention that, my test environment is Firefox 3.5 on Ubuntu 9.10. 我还要提一下，我的测试环境是Ubuntu 9.10上的Firefox 3.5。 The other browsers I've tried - Opera, Midori, Chromium, Epiphany - produced varying results. 我尝试过的其他浏览器--Opera，Midori，Chromium，Epiphany--产生了不同的结果。 Some don't play anything, and some throw exceptions. 有些人不玩任何东西，有些人抛出异常。

---

#1楼

参考：https://stackoom.com/question/8773/JavaScript-HTML-中的音效

---

#2楼

WebAudio API by W3C W3C的WebAudio API

As of July 2012, the WebAudio API is now supported in Chrome, and at least partly supported in Firefox, and is slated to be added to IOS as of version 6. 截至2012年7月，Chrome现在支持WebAudio API ，并且至少部分支持Firefox，并且将从版本6开始添加到IOS。

Although it is robust enough to be used programatically for basic tasks, the Audio element was never meant to provide full audio support for games, etc. It was designed to allow a single piece of media to be embedded in a page, similar to an img tag. 虽然它足够强大，可以编程方式用于基本任务，但Audio元素从未打算为游戏等提供完整的音频支持。它旨在允许将单个媒体嵌入到页面中，类似于img标签。 There are a lot of issues with trying to use the Audio tag for games: 尝试将音频标记用于游戏时存在很多问题：

• Timing slips are common with Audio elements 定时单对于Audio元素很常见
• You need an Audio element for each instance of a sound 每个声音实例都需要一个Audio元素
• Load events aren't totally reliable, yet 负载事件尚不完全可靠
• No common volume controls, no fading, no filters/effects 没有常见的音量控制，没有褪色，没有滤镜/效果

I used this Getting Started With WebAudio article to get started with the WebAudio API. 我使用WebAudio入门文章开始使用WebAudio API。 The FieldRunners WebAudio Case Study is also a good read. FieldRunners WebAudio案例研究也是一本很好的读物。

---

#3楼

Here's one method for making it possible to play even same sound simultaneously. 这是一种可以同时播放相同声音的方法。 Combine with preloader, and you're all set. 结合预加载器，你就完成了。 This works with Firefox 17.0.1 at least, haven't tested it with anything else yet. 这至少适用于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();
}

Bind this to a keyboard key, and enjoy: 将其绑定到键盘键，然后享受：

player("step");

---

#4楼

I know this is a total hack but thought I should add this sample open source audio library I put on github awhile ago... 我知道这是一个彻头彻尾的黑客，但我想我应该添加这个样本开源音频库我前一段时间放在github上...

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

After clicking the link below, type on the home row keys to play a blues riff (also type multiple keys at the same time etc.) 单击下面的链接后，键入主页行键以播放蓝调riff（同时键入多个键等）

Sample using jThump library >> http://davealger.com/apps/jthump/ 使用jThump库的示例>> http://davealger.com/apps/jthump/

It basically works by making invisible <iframe> elements that load a page that plays a sound onReady(). 它基本上是通过制作不可见的<iframe>元素来加载播放声音onReady（）的页面。

This is certainly not ideal but you could +1 this solution based on creativity alone (and the fact that it is open source and works in any browser that I've tried it on) I hope this gives someone else searching some ideas at least. 这肯定不是理想的，但你可以单独根据创造力+1这个解决方案（事实上它是开源的，并且可以在我尝试过的任何浏览器中运行）我希望这至少让其他人搜索一些想法。

:) :)

---

#5楼

I would recommend using SoundJS , a library I've help develop. 我建议使用SoundJS ，一个我帮助开发的库。 It allows you to write a single code base that works everywhere, with SoundJS picking web audio, html audio, or flash audio as appropriate. 它允许您编写一个可在任何地方使用的单个代码库，SoundJS会根据需要选择Web音频，html音频或flash音频。

It will allow you to do all of the thing you want: 它可以让你做你想做的所有事情：

• Play and mix multiple sounds, 播放和混合多种声音，
• Play the same sample multiple times, possibly overlapping playbacks 多次播放相同的样本，可能重叠播放
• Interrupt playback of a sample at any point 在任何时候中断播放样本
• play WAV files containing (depending on browser support) 播放包含的WAV文件（取决于浏览器支持）

Hope that helps. 希望有所帮助。

---

#6楼

To play the same sample multiple times, wouldn't it be possible to do something like this: 要多次播放相同的样本，是不是可以这样做：

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

( e is the audio element) （ e是音频元素）

Perhaps I completely misunderstood your problem, do you want the sound effect to play multiple times at the same time? 也许我完全误解了你的问题，你想让声音效果同时播放多次吗？ Then this is completely wrong. 那是完全错误的。