JavaScript Web音頻：無法正確解碼音頻數據？

Question

我正嘗試在JavaScript中使用Web Audio API將聲音加載到緩衝區並播放它。遺憾的是它不工作，我得到了以下錯誤：

Uncaught TypeError: Failed to set the 'buffer' property on 'AudioBufferSourceNode': 
The provided value is not of type 'AudioBuffer'. 

我可以指出哪些線是給我的錯誤，但我不知道爲什麼。下面是相關的代碼，如果有幫助：

var audioContext; 
var playSoundBuffer; 

function init() { 
    window.AudioContext = window.AudioContext || window.webkitAudioContext; 
    audioContext = new AudioContext(); 

    loadNote(); 
} 

function loadNote() { 
    var request = new XMLHttpRequest(); 
    request.open("GET", "./sounds/topE.wav", true); 
    request.responseType = "arraybuffer"; 
    request.onload = function() { 
     audioContext.decodeAudioData(request.response, function(buffer) { 
      playSoundBuffer = buffer; 
     }, function(error) { 
      console.error("decodeAudioData error", error); 
     }); 
    }; 
    request.send(); 

    playSound(); 
} 

function playSound() { 
    var source = audioContext.createBufferSource(); 
    source.buffer = playSoundBuffer;  // This is the line that generates the error 
    source.connect(audioContext.destination); 
    source.start(0); 
} 

相信decodeAudioData方法返回一個AudioBuffer其第一個回調函數（第二個參數）。我試圖將這個AudioBuffer保存到「playSoundBuffer」然後播放它，但是我得到了這個錯誤，我不知道爲什麼。任何幫助將不勝感激。

Answer 1

您得到該錯誤的原因是因爲您忽略了代碼的異步性質，並將它看作是同步的。如果您始終記錄所有相關部分的內容作爲調試的第一步，則您會意識到在您嘗試處理緩衝區時，它是undefined而不是AudioBuffer。提示：總是console.log 所有東西，直到你確切地知道它在任何點的行爲如何。

function loadNote() { 
    var request = new XMLHttpRequest(); 
    request.open("GET", "./sounds/topE.wav", true); 
    request.responseType = "arraybuffer"; 
    request.onload = function() { 
     audioContext.decodeAudioData(request.response, function(buffer) { 
      playSoundBuffer = buffer; 
      playSound(); // don't start processing it before the response is there! 
     }, function(error) { 
      console.error("decodeAudioData error", error); 
     }); 
    }; 
    request.send();//start doing something async 


}