播放多種音頻文件與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

您沒有正確指howler.js文件在您CodePen演示。使用此更改 - https://rawgit.com/goldfire/howler.js/master/dist/howler.js。

另一件事，​​被廢棄長回來。用.on('load', fn)這樣的方式更改該行：

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

它適用於上述更改。

編輯＃1：您需要利用對象提供的事件來正確排列音軌。以下是我做到了，雖然我認爲這可能是很多吸塵器多個狀態變量尤其是要納入暫停和恢復：

$(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; 
    }); 
    } 

    //}); 
});