Как воспроизводить все источники звука с помощью html5 и jQuery

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

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

Я пробовал $ .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" плеера, но не воспроизводится :(

В чем моя ошибка? Спасибо.


javascript html audio jquery playlist
person Denis Monn    schedule 17.01.2015    source источник
comment
Вы когда-нибудь вызывали source1.play () после добавления нового источника?   -  person Liam Schauerman    schedule 18.01.2015
comment
Я не добавляю новый источник, я просто меняю SRC существующих источников элемента ‹audio› и снова пытаюсь запустить плеер.   -  person Denis Monn    schedule 18.01.2015
comment
Хорошо, это все, что я имел в виду. Итак, как только вы обновите атрибут src, я думаю, вам нужно вызвать .play () для элемента audio.   -  person Liam Schauerman    schedule 18.01.2015

Ответы (1)


arrow_upward
1
arrow_downward

как только новый src загружен, вам нужно будет вызвать .play () для этого элемента

вот пример того, как воспроизвести все аудиофайлы в очереди

var el = $('#playerbox'); //assuming here that el is your <audio> element
var audioSources = [song1.mp3, song2.mp3....]// here is your array of filenames
var index = 0;

function playNext(index){
  el.attr('src', audioSources[index]);
  el.play(); //this will play the element
  el.on('ended', function(){ //this will bind a function to the "ended" event
    //increment the index to target the next element
    index++;
    if(index < audioSources.length){
      //plays the next song and binds the function to the ended event again until the queue is empty
      playNext(index);          
    }
  }
}
playNext(index);

Это работает для вас?

person Liam Schauerman    schedule 17.01.2015
comment
Вы имеете в виду: создать тег ‹audio› для каждого элемента в списке воспроизведения ???? Я попытался изменить th src источников того же тега ‹audio›. - person Denis Monn; 18.01.2015
comment
Только что отредактировал свой ответ. Новая версия должна обновлять src, а не воспроизводить следующий элемент ‹audio›, более подходящий для вашего вопроса. Сообщите мне, если это не сработает или вам нужны разъяснения - person Liam Schauerman; 18.01.2015
comment
Думаю, я сделал то же самое, что и ты! Но не работает. Я попробую ваш образец, но почему бы вам не воспользоваться oncanplay? - person Denis Monn; 18.01.2015