2

我正在使用 jQuery 音频播放器“jPlayer”，我有一个循环，该循环创建许多 jPlayer 唯一实例，然后为每个实例分配一个点击“jPlayer play”到文档的另一部分。问题是 jPlayer 使用内部ready: function() {}分配音频路径并加载文件。我需要等待这个函数完成，然后再继续循环。

伪代码是这样的：

for loop{

create jPlayer div;

instantiate jPlayer and assign audio file in the ready(); // need to wait before continuing

assign an on click event to play file;
}

我确信这是关于使用队列但我不知道如何实现它？非常感激任何的帮助！

4

1 回答 1

3

你可以尝试这样的事情：

function initPlayer(playerQueue){
  if(playerQueue.length > 0) {
    var player = playerQueue.pop(); // get our options hash for this iteration
    var container = $('<div id="'+player.container+'"></div>').appendTo('body');

    $(container).jPlayer({
      ready: function(){
        var _e = this.element;
        _e.jPlayer('setFile', player.file);
        var timer = setInterval(function(){
            if(_e.jPlayer('getData', 'diag.loadPercent') == 100){
               $(player.control).click(function(){
                  // assign your handler
               });
               clearInterval(timer); // clear the interval
               initPlayer(playerQueue); // invoke the next player init
            }
        },500);
      },
      /* ... other options ... */
    });
  }
}

initPlayer([
  {container: 'audio-1', file: 'uri/for/file', control: '#button-1'},
  {container: 'audio-2', file: 'uri/for/file', control: '#button-2'},
  {container: 'audio-3', file: 'uri/for/file', control: '#button-3'},
  {container: 'audio-4', file: 'uri/for/file', control: '#button-4'}
]);

基本上我们摆脱了显式循环，而是使用 ready 函数本身通过该initPlayer函数推进构建迭代。通过使用数组，我们可以使用pop()它来获取数组的最后一个元素，同时将其从数组中删除。我们等待调用initPlayer，直到通过每 500 毫秒轮询播放器的负载百分比获得 100 的负载百分比。

这只是一个建议，可能需要做很多工作......我从未使用过 jPlayer，并且我从文档中盲目地飞行，所以不要指望它开箱即用:-)。

于 2010-09-25T17:35:53.590 回答