Question

我是JavaScript和jQuery的新手，我正在做的实际上是调用一些颜色数组的函数，最初它是['blue', 'green'] 我在这个数组上运行一个for循环，播放特定于每个数字的声音。

但问题是，它只是用最后一个参数播放声音。为什么这样？我希望在固定的间隔后播放两种声音（或者我调整多少次）（就像我在这里看到的1000ms）。提前谢谢。

这是我的代码：

function singPattern(compPattern) {
    var audio;
    for(let i=0; i<compPattern.length; i++) {

        audio = new Audio("../../music-files/" + compPattern[i] + ".mp3");
        window.setTimeout(function () {
            audio.play();
        }, 2000);
    }
}

Answer 1

function singPattern(compPattern) {
    var audio; // There is only one audio
    for(let i=0; i<compPattern.length; i++) {

        //everytime in this loop audio is assigned to the "Audio" 
        //  the old one is off to the pasture. (dead)(GC) 
        audio = new Audio("../../music-files/" + compPattern[i] + ".mp3");
        window.setTimeout(function () {
            audio.play();
        }, 2000);
    }
}

就像所有javascript一样，有几种方法可以解决这个问题。

你可以像这样将对象传递给超时。并且超时将关闭对象。

function singPattern(compPattern) {
    for(let i=0; i<compPattern.length; i++) {
        // I will just print the word but you can pass the object in. 
        var audio = compPattern[i] + ".mp3";
        window.setTimeout(function (_audio) {
            console.log(_audio)
        }, 2000, audio);
    }
}

如果您需要访问setTimeout之外的Audio对象来取消/重播它，您可以设置如下字典：

function singPattern(compPattern) {
    var audio ={};
    for(let i=0; i<compPattern.length; i++) {       
        audio[compPattern[i]] = compPattern[i] + ".mp3";        
    }
    setTimeout(function(){
       for( var a in audio ){ console.log( "play ", a , audio[a] ); } 
    },2000);
    // audio['green'].pause() ?     
}

修改

继承了外部mp3的工作样本

function singPattern(compPattern) { 
  for (let i = 0; i < compPattern.length; i++) {  
    var audio = compPattern[i];         
    setTimeout(function (_audio) { 
      var sound = new Audio(_audio); 
      console.log("Playing " + _audio);
      sound.play(); 
    }, 2000, audio); 
  } 
}

var soundUrls = ["http://soundbible.com/mp3/Stream Noise-SoundBible.com-866411702.mp3", "http://soundbible.com/mp3/Strange_Days-Mike_Koenig-176042049.mp3"];

singPattern(soundUrls);

HTML5音频不适用于setTimeout方法

1 个答案: