我正在使用 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;
}
我确信它与使用队列有关,但我不知道如何实现它?任何帮助将不胜感激!
最佳答案
你可以尝试这样的事情:
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,而且对文档也很盲目,所以不要指望它能开箱即用:-)。
关于javascript - 等待 jPlayer 完成加载文件后再继续循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3794542/