2016-08-09 2 views
0

Я хочу воспроизвести некоторые аудиофайлы в последовательности, определенной массивом sNumbers. Моя идея состоит в том, чтобы выполнить аудиофайлы по предыдущим целям, потому что я использую событие ended, если не все аудиозапись будет выполняться в одно и то же время.JavaScript выполнить очередь аудиофайла

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

У кого-нибудь есть решение?

<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> 

ответ

0

Я решил проблему, используя JQuery для клонирования аудио объекта.

<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>