Search code examples
javascriptaudiodom-events

JavaScript execute a queue of audio file

I want to play some audio files in a sequence defined by the array sNumbers. My ideia is to execute the audio files when the prior ends, for that I'm using the ended event, if I don't all the audios will execute at the same time.

The code below works fine because the array does not repeat any number, but, if I repeat any number, the execution will enter in a endless loop.

Does anyone has a solution for that?

<audio src="http://189.109.43.206/images/0.wav" id="wav0"></audio>
<audio src="http://189.109.43.206/images/1.wav" id="wav1"></audio>
<audio src="http://189.109.43.206/images/2.wav" id="wav2"></audio>
<audio src="http://189.109.43.206/images/3.wav" id="wav3"></audio>
<audio src="http://189.109.43.206/images/4.wav" id="wav4"></audio>
<audio src="http://189.109.43.206/images/5.wav" id="wav5"></audio>
<audio src="http://189.109.43.206/images/6.wav" id="wav6"></audio>
<audio src="http://189.109.43.206/images/7.wav" id="wav7"></audio>
<audio src="http://189.109.43.206/images/8.wav" id="wav8"></audio>
<audio src="http://189.109.43.206/images/9.wav" id="wav9"></audio>
<script type="text/javascript">
    onload=function (){               
        var sNumbers = ['1', '0', '4'];        
        sNumbers.map(function(e, i){ 
            if ( i <= sNumbers.length-2 ) {
                document.querySelector("#wav"+sNumbers[i]).addEventListener("ended", function() {                    
                    document.querySelector("#wav"+sNumbers[i+1]).play(); 
                }, false);                              
            }                 
       });                   
       document.querySelector("#wav"+sNumbers[0]).play();            
    }
</script>
Solution

  • I solved the problem by using JQuery to clone the audio object.

    <script type="text/javascript">
    onload=function (){         
        let sNumbers = ['N', 'S'].concat(window.location.search.replace("?", "").split('')); 
        let audios = [];                            
        sNumbers.map(function(e, i){                                                     
            audios.push( $("#mp3"+sNumbers[i]).clone() );                                                         
        });        
        audios.map(function(e,i){
            console.log(e);
            audios[i].on("ended", function() {                    
                audios[i+1].get(0).play(); 
            });                  
        });               
        audios[0].get(0).play();                  
    }
</script>

</head>
<body>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>