Question

我想按照数组sNumbers定义的顺序播放一些音频文件。我的意思是在前一个结束时执行音频文件，因为我正在使用ended事件，如果我不是所有的音频都会同时执行。

下面的代码工作正常，因为数组不重复任何数字，但是，如果我重复任何数字，执行将进入无限循环。

有人有解决方案吗？

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

Answer 1

我通过使用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>

JavaScript执行音频文件的队列

1 个答案: