使用 howlerjs 播放多个音频文件

Question

我正在尝试无延迟地按顺序播放多个音频文件，但我尝试了下面的代码，但它不起作用。在实际场景中，我只需要一个按钮，一旦播放音频就会播放和暂停，反之亦然

http://codepen.io/anon/pen/PWrYKw

<button id='play-button'> Play</button>
<button id='pause-button'>Pause</button>
<button id='preset-changer'>Present</button>

(function( $ ) {
'use strict';

jQuery(window).load(function() {
    var sound_files = {
            sound1 : new Howl({
                src: ['http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3'],
                loop: true
            }),
            sound2 : new Howl({
                src: ['http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3'],
                loop: true
            }),
            sound3 : new Howl({
                src: ['http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3'],
                loop: true
            })
        };

    var play_button = $('#play-button'),
        pause_button = $('#pause-button'),
        shift_preset = $('#preset-changer');

    play_button.click(function() {
        //sound_files.play();
          for (var prop in sound_files) {
            if(!sound_files.hasOwnProperty(prop)) continue;
            {sound_files[prop].play();}
          }
        });     

    //});
});

})(jQuery);

不知道我做错了什么，因为我没有看到任何错误消息。

Answer 1

试试这个：

play_button.click(function() {
    sound_files.map(function(s) {
        s.play();
    })
});

Answer 2

您在 CodePen 演示中没有正确引用 howler.js 文件。用这个来改变它——https://rawgit.com/goldfire/howler.js/master/dist/howler.js。

另一件事，.load() 早就被弃用了。使用.on('load', fn) 更改该行，如下所示：

$(window).on('load', function() {
    ...
});

它适用于上述更改。

编辑#1：您需要利用Howler 对象提供的事件来正确排序曲目。以下是我的做法，但我认为使用更多状态变量可能会更简洁，尤其是因为您想要合并暂停和恢复：

$(window).on('load', function() {
  var isPlaying = false;
  var sound_files = [new Howl({
      src: ['http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3'],
      loop: false
    }),
    new Howl({
      src: ['http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3'],
      loop: false
    }),
    new Howl({
      src: ['http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3'],
      loop: false
    })

  ];

  var play_button = $('#play-button'),
    pause_button = $('#pause-button'),
    shift_preset = $('#preset-changer');

  for (var i = 0; i < sound_files.length - 1; ++i) {
    sound_files[i].on('end',
      (function(i) {
        return function() {
          sound_files[i + 1].play();
        }
      }(i))
    );
  }
  sound_files[i].on('end', function() {
    isPlaying = false;
  })

  play_button.click(function() {
    if (!isPlaying) {
      isPlaying = true;
      sound_files[0].play();
    }
  });

  function playTrack(index) {
    console.log("playing " + index);
    sound_files[index].play();
    sound_files[index].once('end', function() {
      if (index < sound_files.length - 1)
        playTrack(index + 1);
      else
        isPlaying = false;
    });
  }

  //});
});