JavaScript执行一个音频文件队列

JavaScript execute a queue of audio file

本文关键字：一个 音频 文件 队列 执行 JavaScript      更新时间：2023-09-26

我想在数组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>

我通过使用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>
相关文章：