Воспроизведение файлов в формате MP3 без звука HTML5 с помощью JavaScript

Question

Я пытаюсь воспроизвести три файла MP3 один за другим с помощью Javascript без аудиотекста HTML5. [Я работаю в Articulate Storyline, являющемся авторским инструментом для электронного обучения. Он поддерживает Javascript в файлах, но не HTML]

До сих пор лучший у меня есть следующий, который играет все в то же время:

function myFunction() { 
    var audio1 = new Audio('http://www.mysite.co.uk/h/welcome.mp3'); 
    var audio2 = new Audio('http://www.mysite.co.uk/h/name.mp3'); 
    var audio3 = new Audio('http://www.mysite.co.uk/h/cont.mp3'); 

    audio1.play(); 
    audio2.play(); 
    audio3.play(); 
} 

Я рассмотрел функцию «ждать», но я знаю, как правильно это сделать с JQuery, и если я правильно напомню, Articulate Storyline не поддерживает JQuery, даже если он размещен в другом месте.

Любая помощь с этим очень ценится

Answer 1

Вы можете использовать обработчик событий, который прослушивает для воспроизведения аудио и до конца, а затем играть следующий и т.д.

function play(audio) { 
    audio.play(); 
    return new Promise(function(resolve, reject) { 
     audio.addEventListener('ended', resolve); 
    }); 
} 

function myFunction() { 
    var audio1 = new Audio('http://www.mysite.co.uk/h/welcome.mp3'); 
    var audio2 = new Audio('http://www.mysite.co.uk/h/name.mp3'); 
    var audio3 = new Audio('http://www.mysite.co.uk/h/cont.mp3'); 

    play(audio1).then(function() { 
     return play(audio2); 
    }).then(function() { 
     return play(audio3); 
    }); 
} 

Answer 2

Я хотел бы предложить вам использовать аудио onended событие. Просто слушайте, как один игрок останавливается, а затем играет дальше.

Примера: Одним из способов являются добавление ваших игроков в массив для лучшего контроля

var players = [audio1,audio2,audio3]; 

    var counter = 0; 

    audio1.onended = playNext; 



    function playNext(){ 
     if(counter <= players.length){ 
      counter++ 
      players[counter].play(); 
      players[counter].onnded = playNext; 
    } 
    } 

oneneded: http://www.w3schools.com/tags/av_event_ended.asp

Надеется, что это помогает