Как проиграть все аудиофайлы в списке с html5 и jQuery?

Рейтинг: 0Ответов: 0Опубликовано: 18.01.2015

Я пытаюсь создать простой аудиоплеер на html5 и jQuery. Когда хочу проиграть один файл/поток либо когда сам кликаю по файлам в СВ (списке воспроизведения), то мой плеер работает хорошо.

Но мне нужно, чтобы он мог проиграть весь СВ, чтобы все файлы прозвучали один за другим автоматически.

Я не силен в Javascript... Попытался реализовать это с $.each(), также попытался создать рекурсивную функцию... но... без успешно!

Могу показать часть кода:

var el = $('#playerbox');
var soundType = el.data('page-soundtype');
var soundFile = el.data('page-soundfile');
var soundFiles = el.data('page-soundfiles');//playlist, paths to sources
var audio = $("<audio preload />");
//make 2 types of sources for different browsers:
var source1= $('<source />').attr('type', 'audio/mpeg');  // original, mp3 format
var source2= $('<source />').attr('type', 'audio/ogg'); // a copy, ogg format
audio.append(source1).append(source2);
el.append(audio);
var player=audio[0];
player.volume=0;
var i=0; //The play list counter, in case we have it
var op={}; //player options

var runPlayer = function(op){
    var fadetime = (op.fadetime || 1000);
    player.oncanplay = function(){
        player.play();
        audio.animate({volume: 1}, fadetime);
    }
    if(soundType === 'list'){
        player.addEventListener('ended', function(){
            i++;
            if(soundFiles[i].length>0){
                source1.attr('src', soundFiles[i]);
                source2.attr('src', soundFiles[i].replace(".mp3", ".ogg"));
                op.fadetime = 1500;
                player.pause();
                runPlayer(op);
            }
        }, false)
       }
}
//set sources
if(soundType==='list' && $.isArray(soundFiles)){
    //prepare playlist
    source1.attr('src', soundFiles[i]);
    source2.attr('src', soundFiles[i].replace(".mp3", ".ogg"));
    op.fadetime = 1;            
}
else if(soundType==='sound'){
    //prepare sound
    source1.attr('src', soundFile);
    source2.attr('src', soundFile.replace(".mp3", ".ogg"));
}
runPlayer(op);

Так, мой плеер проигрывает первый файл в СВ, загружает второй в "src" плеера, но не проигрывает его... :(

Помогите разобраться...
Благодарю.

Обновление

Поменял, поставил паузу перед

source1.attr('src', soundFiles[i]);
source2.attr('src', soundFiles[i].replace(".mp3", ".ogg"));

Все равно не работает. В консоли показывает, что то, что находится внутри player.oncanplay = function(){ } - не срабатывает во второй раз!

Ответы

Ответов пока нет.