자바 스크립트 웹 오디오 : 오디오 데이터를 제대로 디코딩 할 수 없습니까?

Question

JavaScript로 웹 오디오 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를 "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 


}