2017-06-15 121 views
1

我對JavaScript和jQuery相當新,我正在做的事情實際上是調用一些顏色的數組函數,最初它是['blue', 'green'] 然後我運行一個for循環此數組播放特定於每個數字的聲音。HTML5音頻無法使用setTimeout方法

但問題是,它只是用最後一個參數播放聲音。爲什麼這樣? 我想同時播放(或多少次調節)聲音,以便在固定的時間間隔後播放(如此處我有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); 
    } 
} 
+0

'audio'會在循環的每一次迭代中被覆蓋。製作一個數組或字典來保存它們。 – corn3lius

+0

但每次我有新的音頻文件已經存儲在compPattern [我]。那麼製作音頻陣列有什麼意義?如果可能,請顯示修改後的代碼示例。 – shahzaibkhalid

回答

0
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);

+0

我試過你的第二個代碼片段,但它仍然不工作:( 'function singPattern(compPattern){ for(let i = 0; i shahzaibkhalid