播放多种音频文件与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; 
    }); 
    } 

    //}); 
});