Нужна помощь в создании простого АУДИО ПЛЕЕРА!
 

Привет

Надеюсь, здесь найду помощь!
Я пытаюсь создать простой аудиоплеер на html5 и jQuery.

Принцип работы придумал такой: создаю аудио элемент, добавляю к нему источники со ссылками, средствами jQuery управляю им. Когда нужно проиграть другой файл - меняю ссылку в источнике.

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

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

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

var el = $('#playerbox'); // это <div> в котором создам плеер...
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" плеера, но не проигрывает его... :( С помощью консоли определил, что второй файл загружается в 'src', но все что внутри player.oncanplay = function(){ } - при втором вызове уже не срабатывает...


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