在JavaScript / HTML5中的声音效果?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (10)
  • 关注 (0)
  • 查看 (259)

我正在使用HTML 5编写游戏程序;我在播放音效上遇到了难题。

具体要求很少:

  • 播放和混合多种声音,
  • 多次播放相同的例子,可能是重叠的回放,
  • 在任何时候中断一个样本的回放,
  • 最好播放WAV文件和原始PCM。

我创建了下面的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>元素实际上更像是一个流功能,而不是用来播放声音效果的东西。

是否有一种聪明的方法来实现我所缺少的,最好只使用HTML 5和JavaScript?

提问于
用户回答回答于

HTML 5Audio对象

HTML 5允许你访问Audio对象

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

若要多次播放同一声音,创建Audio对象。

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

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

测试浏览器是否支持OggVorbis。

如果正在编写一个游戏或音乐应用程序(不仅仅是一个播放器),需要使用更高级的Web音频API

用户回答回答于
用户回答回答于

我有个主意。将所有音频加载到一个单独的音频元素中,其中src数据是连续音频文件中的所有样本(可能需要一些静音,以便可以用较少的时间捕捉和剪切样本 下一个样本)。 然后,寻找样品,并在需要时播放。

如果你需要多个这样的播放,你可以使用相同的src创建一个额外的音频元素,以便将其缓存。 现在,你有多个“轨道”。 你可以利用你最喜欢的资源分配方案,如循环赛等利用曲目组。

如果需要以上的其中一个播放,可以创建一个额外的音频元素与相同的src,以便它被缓存。现在,实际上有多个“轨道”。你可以利用你最喜欢的资源分配方案

还可以指定其他选项,例如,当资源可用时,队列声音进入要播放的轨道,或者剪切当前播放的示例。

用户回答回答于

要多次播放同一个样本,可以这样做:

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

e是音频元素)

用户回答回答于

看一下jai(->)mirror)(JavaScript音频接口)网站。 从看他们的来源,他们似乎反复地调用play(),他们提到他们的库可能适合在基于HTML5的游戏中使用。

用户回答回答于

使用来自http://flash-mp3-player.net/-我写了一个音乐测验(网址:http://webdeavour.apppot.com),当用户单击问题按钮时,使用它播放音乐片段。一开始,我每个问题都有一个玩家,所以我可以把它们放在另一个上面,所以我改变了它,所以只有一个播放器,我用不同的音乐片段来指它。

用户回答回答于

这里有一种方法可以同时发挥同样的声音。结合preloader,还没有测试过。

// 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");
用户回答回答于

使用它来检测HTML 5音频:

http://diveintohtml5.ep.io/everything.html

HTML 5 JS检测

function supportsAudio()
{
    var a = document.createElement('audio'); 
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}
用户回答回答于

howler.js

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

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}
})

游戏声音

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?]
  );
}

用户回答回答于

所属标签

可能回答问题的人

  • 天使的炫翼

    17 粉丝531 提问36 回答
  • 富有想象力的人

    3 粉丝0 提问30 回答
  • 学生

    3 粉丝476 提问28 回答
  • o o

    4 粉丝494 提问27 回答

扫码关注云+社区

领取腾讯云代金券