javascript, web audio api, html5 관련 질문입니다.

안녕하세요, 개발입문자입니다. 새로운 음악서비스 관련 웹프로젝트를 과감히 시작하고
관련 분야를 공부하고 있습니다.
기본적으로 음악을 재생하고 가공하는 기능을 html5 와 web audio api 를 활용해 구현하는 것이 1차 목표입니다.
구글링을 통해 샘플 페이지와 튜토리얼을 찾아 해보고 있습니다만 잘 동작하지 않네요.

제가 이해한 과정을 설명해드리겠습니다.

web audio api는 html5 webkit 기반으로 동작하는 오디오 관련 api로
단순한 재생을 넘어 시퀀싱, 오실레이터, 믹서, 이펙터에 이르기까지
사운드를 가공하는 다양한 기능을 제공합니다.
web audio api는 세밀한 동작을 위하여
html5 의 audio 태그처럼 간단한 하나의 태그나 함수로 구성되지 않고
적어도 2개의 모듈을 사용하여 음을 재생하는데,
입력 모듈과 출력 모듈을 사용하여 둘을 연결하는 식으로 구동하게 됩니다.
여기에 볼륨 조절, 이펙트 적용과 같은 중간 모듈이 개입될 수 있습니다.

예를 들어 볼륨 컨트롤이 가능한 소리 재생기를 하나 구성하는 것은
BufferSource(입력) - Gain(볼륨조절) - Destination(출력) 의 3단 구성을 갖게 되는 것입니다.

소스 코드는 기본적으로 다음의 과정을 거쳐 사용됩니다.

1. AudioContext() 객체 선언
2. XMLHttpRequest() 이용해 오디오 소스를 'arraybuffer' 타입으로 받아 저장하기 -> AudioBuffer 생성
3. createBufferSource() 로 입력 모듈 생성, AudioBuffer 집어넣기
4. destination 생성(출력단), BufferSource와 destination 이 연결됨
5. start() 로 재생

다음은 제가 예제로부터 복붙하고 작성한, html 의 헤더에 들어가는 자바스크립트 코드입니다.

<script type="text/javascript">
var context;
var dogBarkingBuffer = null;
window.addEventListener('load', init, false);

function init() {
try {
// Fix up for prefixing
window.AudioContext = window.AudioContext || window.webkitAudioContext;
//context = new AudioContext();
context = new webkitAudioContext();
} catch (e) {
alert('Web Audio API is not supported in this browser');
}
}

function loadDogSound(url) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';

// Decode asynchronously
request.onload = function() {
context.decodeAudioData(
request.response,
function(buffer) {
dogBarkingBuffer = buffer;
}, onError
);
}
request.send();
}


// Fix up prefixing
function playSound(buffer) {
var source = context.createBufferSource(); // creates a sound source
source.buffer = buffer; // tell the source which sound to play
source.connect(context.destination); // connect the source to the context's destination (the speakers)
source.start(0); // play the source now
// note: on older systems, may have to use deprecated noteOn(time);
}
init();
loadDogSound('sound/EQa1.wav');
playSound(dogBarkingBuffer);

</script>

저는 이 소스로 마지막에 초기화, 파일 로드로 버퍼 생성, 소리 재생 함수를 차례로 실행시켜
결과적으로 sound/EQa1.wav 파일 재생을 의도했지만
이 소스 코드는 동작하지 않았습니다.

웹 디버깅을 통해 제가 발견한 에러는 2가지인데,
하나는 loadDogSound() 함수 안에서 발견되는 OnError 가 구현되지 않았다는 내용이고
다른 하나는 playSound() 함수에 집어넣어 전달한 dogBarkingBuffer가 AudioBuffer 타입이 아니라는 내용입니다.

전자는 실제로 코드 어디에 OnError 구현 내용이 없으므로 정 필요하면 만들면 되기에 마이너한 문제라 생각합니다. 다만 정확히 어디에 어떻게 구현해야 하는지 모르는 것도 문제이긴 합니다.

그러나 가장 큰 문제는 dogBarkingBuffer가 AudioBuffer로 인식되지 않았다는 점입니다.
해석해보면 맨 처음 변수가 null 로 초기화된 이후 의도한 대로 사운드 버퍼를 받지 못했다는 것임을 알 수 있습니다.
의도한 장소는 loadDogSound() 함수 내 decodeAudioData() 함수 내의 function() 입니다.
여기서 buffer를 받아내도록 되어있습니다만, 받아내서 가지고 오지 못한 것으로 보입니다.
저는 dogBarkingBuffer 를 바깥에 전역으로 var 선언하고 내부에서 사용했습니다.
여기에 어떤 다른 방법을 찾아 적용해봐도 내부에서 생성되고 전달된 AudioBuffer를 밖으로 가져오지 못합니다.
이걸 꺼내와야 다음 playSound() 함수에 넘겨줘서 음을 재생할 수 있을텐데..

저는 자바스크립트를 체계적으로 공부하지 않아서 비어있는 부분이 많습니다.
지금같은 경우도 onload() 함수, OnError 처리 개념, 지역 변수 전역 변수의 참조 권환 관계 등등 모호하고 모르는 부분이 너무 많습니다.
찾아보며 해결하기에는 벽에 부딪혔다는 느낌입니다.
도움 좀 꼭 부탁드립니다.
감사합니다.