對HTML5音頻文件進行迭代

我的目標是遍歷數組，將數組中的每個元素的值作爲鍵並播放與該值關聯的聲音片段。期望的最終結果是按順序播放聲音片段，按照它們在數組中的鍵。對HTML5音頻文件進行迭代

這是我迄今爲止嘗試：通過序列

//there are addresses associated with the color sound values 

function playSound(soundValue){ 
    $sound.src = soundValue; 
    $sound.load(); 
    $sound.play(); 
} 

function playGame(){ 
    simonSays = [0,1,2,3]; 

    var soundOptions = { 
    0: yellowSound, 
    1: redSound, 
    2: blueSound, 
    3: greenSound 
    }; 

    for (var i = 0; i < simonSays.length; i++){ 
    var callSound = soundOptions[simonSays[i]]; 
    setTimeout(playSound(callSound),1000); 
    } 
};

此代碼迭代，並且不等待setTimeout持續時間來完成。我收到此錯誤：

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. 
    playSound @ logic.js:72 
    playGame @ logic.js:120 
    onclick @ index.html:37

我的理解是，音頻文件相互interferring和生產錯誤，但還沒有通過，允許每個文件來完成序列中的迭代沒有延遲。我看着these examples其他工作耽誤媒體執行但既不$sound.ended或$sound.onended能夠防止迭代前面的音頻文件完成的呼叫的。該項目將增加數組的長度和順序，所以我需要一些方法來控制數組中每個成員的執行。

任何人都可以提供任何建議嗎？謝謝。

來源

2017-05-11 Cameron

setTimeout不會延遲循環。該循環使每個音頻文件僅延遲一秒鐘。解決方法是將循環放入函數中，如下所示：

simonSays = [0,1,2,3]; 

var soundOptions = { 
    0: yellowSound, 
    1: redSound, 
    2: blueSound, 
    3: greenSound 
}; 

function playGame(){ 
    startPlaying(0,simonSays.length); 
}; 

function startPlaying(i,l) { 
    if (i==l) return; 
    var callSound = soundOptions[simonSays[i]]; 
    playSound(callSound); 
    setTimeout("startPlaying("+(i+1)+","+l+")",1000);  
}

來源

2017-05-11 23:57:33

我真的很喜歡遞歸調用，但我仍然收到錯誤;當我設置''''setTimeout'''作爲一個字符串調用它產生這個錯誤：'''未捕獲ReferenceError：我沒有定義在：1：14'''當我引用'''startPlaying （i + 1，l）'''不是一個字符串，它產生了與完全範圍循環相同的效果，沒有調用音頻文件，與原始問題相同。有什麼想法嗎？感謝您的時間。 – Cameron

我沒有注意到這個問題。我編輯了我的帖子，讓我知道它是否有效！我很難調試這種問題，因爲很難再現你所擁有的html。 –

完美！準確地寫函數調用是我的問題，確保字符串和數字的組合發送完美。這是一個很好的解決方案。感謝您的時間。 – Cameron

對HTML5音頻文件進行迭代

回答

相關問題