如何使用Howler JS淡出一系列播放声音

时间:2019-03-03 16:19:56

标签: javascript arrays audio howler.js

我正在使用Howler JS依次播放一系列音频文件。但是,我希望能够在某个时候淡出音量-并希望停止/释放在后台播放的声音。

我有代码可以淡出单个文件(没有问题)(如下所述),但是我不知道如何淡出从该数组播放的所有音频文件。请记住,我的声音文件每个只有几秒钟,因此淡出将在几个不同的声音文件中发生。

只有一个声音,您可以使用getSound(soundFileName);来定位(例如,使用var sound = getSound(soundFileName);可以使用sound.fade(maxVolume, 0, fadeOut, id2);淡出),但是我不知道如何将其扩展到从阵列加载的音频文件列表。

这是我的代码的当前状态,该状态由两个可运行的程序拼凑而成:一个可播放文件数组但无需淡出,一个仅播放/循环一个音频文件但会淡出:

playThunder(numberOfSamples, maxVolume, playDuration);

var potentialThunderSounds = [
  getSoundB('audio/01.wav', 1, false),
  getSoundB('audio/02.wav', 1, false)
];

function getSoundB(soundFileName, volume, loop) {
  return new Howl({
    src: [soundFileName],
    autoplay: false,
    loop: loop,
    volume: volume,
    fade: 0
  });
}

function playThunder(numberOfSoundsToPlay, playDuration) {
  var soundSequence = [];
  for (var x = 0; x < numberOfSoundsToPlay; x++) {
    var soundIndex = Math.round(Math.random() * (potentialThunderSounds.length - 1));
    soundSequence.push(potentialThunderSounds[soundIndex]);
  }

  playSoundIfThereIsOne();

  function playSoundIfThereIsOne() {
    var currentSound = soundSequence[0];
    currentSound.play();
    soundSequence.shift();
    currentSound.once('end', playSoundIfThereIsOne);
  }

  setTimeout(function() {
    sound.fade(maxVolume, 0, fadeOut); // FADE OUT

    // Attempt to clean up the sound object
    setTimeout(function() {
      sound.stop();
      sound.unload();
    }, fadeOut + 1000);
  }, playDuration);
}

以下是可以循环播放和淡出一个声音文件的工作代码:

loop(options, playDuration, soundFileName, maxVolume, fadeIn, fadeOut);

function loop(options, playDuration, soundFileName, maxVolume, fadeIn, fadeOut) {

  var sound = getSound(soundFileName);
  var id2 = sound.play();

  sound.volume(0);
  sound.fade(0, maxVolume, fadeIn, id2); // FADE IN

  setTimeout(function() {

    sound.fade(maxVolume, 0, fadeOut, id2); // FADE OUT

    // Attempt to clean up the sound object
    setTimeout(function() {
      sound.stop();
      sound.unload();
    }, fadeOut + 1000);
  }, playDuration);

  function getSound(soundFileName) {
    return new Howl({
      src: [soundFileName],
      autoplay: true,
      loop: true,
      volume: 0,
      fade: 0
    });
  }

0 个答案:

没有答案