JavaScript / HTML5音效

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

当前回答

所选答案将在除IE之外的所有程序中工作。我写了一个关于如何使它跨浏览器工作的教程。下面是我写的函数:

function playSomeSounds(soundPath) {
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var net = !!navigator.userAgent.match(/.NET4.0E/);
    var IE11 = trident && net
    var IEold = (navigator.userAgent.match(/MSIE/i) ? true : false);
    if (IE11 || IEold) {
        document.all.sound.src = soundPath;
    } else {
        var snd = new Audio(soundPath); // buffers automatically when created
        snd.play();
    }
}

你还需要添加以下标签到html页面:

<bgsound id="sound">

最后，你可以调用这个函数，并简单地通过这里的路径:

playSomeSounds("sounds/welcome.wav");

2014-05-13 08:01:27

其他回答

看看jai(->镜像)(javascript音频接口)网站。从他们的源代码来看，他们似乎反复调用play()，他们提到他们的库可能适合在基于html5的游戏中使用。

您可以触发多个音频事件同时，这是可以使用的用于创建Javascript游戏，或者有一个声音在说话背景音乐

2009-12-19 20:25:16

howler.js

对于游戏创作，最好的解决方案之一就是使用一个能够解决我们在编写网页代码时所面临的许多问题的库，如嚎叫.js。js将强大(但低级)的Web Audio API抽象为一个易于使用的框架。如果Web音频API不可用，它将尝试退回到HTML5音频元素。

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg']
}).play();
// it also provides calls for spatial/3d audio effects (most browsers)
sound.pos3d(0.1,0.3,0.5);

wad.js

另一个很棒的库是wad.js，它在生成合成音频(如音乐和效果)时特别有用。例如:

var saw = new Wad({source : 'sawtooth'})
saw.play({
    volume  : 0.8,
    wait    : 0,     // Time in seconds between calling play() and actually triggering the note.
    loop    : false, // This overrides the value for loop on the constructor, if it was set. 
    pitch   : 'A4',  // A4 is 440 hertz.
    label   : 'A',   // A label that identifies this note.
    env     : {hold : 9001},
    panning : [1, -1, 10],
    filter  : {frequency : 900},
    delay   : {delayTime : .8}
})

游戏音效

另一个与Wad.js类似的库是“Sound for Games”，它更专注于效果制作，同时通过一个相对独特(可能更简洁)的API提供了一组类似的功能:

function shootSound() {
  soundEffect(
    1046.5,           //frequency
    0,                //attack
    0.3,              //decay
    "sawtooth",       //waveform
    1,                //Volume
    -0.8,             //pan
    0,                //wait before playing
    1200,             //pitch bend amount
    false,            //reverse bend
    0,                //random pitch range
    25,               //dissonance
    [0.2, 0.2, 2000], //echo array: [delay, feedback, filter]
    undefined         //reverb array: [duration, decay, reverse?]
  );
}

总结

无论您是需要播放单个声音文件，还是创建自己的基于html的音乐编辑器、效果生成器或视频游戏，这些库都值得一看。

2013-10-23 15:06:30

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

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

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

希望这能有所帮助。

2013-10-03 18:21:14

你可以尝试AudioContext，它的支持有限，但它是web音频api工作草案的一部分。如果你打算在未来发布一些东西，这可能是值得的。如果你只会为chrome和Firefox编程，那你就太棒了。

2016-08-29 03:23:52

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，现在大多数浏览器都支持它。

2009-12-19 22:37:51

JavaScript / HTML5音效

推荐文章

最新文章

标签