[Web audio API] unable to decode audio data 에러 해결

 

Web audio API를 통해 브라우저에서 audio 데이터를 출력하려했는데,

 

DOMException: Unable to decode audio data

 

와 같은 에러가 발생했다.

 

 

로그를 찍어보면 context.decodeAudioData에서 성공하는 콜백이 호출되지않아

 

발생하는 문제인것을 확인 할 수 있다.

 

ㅇ 예제 코드

var context = new (window.AudioContext || window.webkitAudioContext)();

context.decodeAudioData(value.buffer, function(buffer) { 
 // buffer 데이터 decode 성공시 
}, 
function(err) { 
 // buffer 데이터 decode 실패시
console.log("err(decodeAudioData): "+err); }
);

 

나와 같은 경우, PCM 데이터를 ArrayBuffer 형태로 브라우저에 WebSocket을 통해 전송해줬는데,

 

ArrayBuffer 데이터가 decodeAudioData로 decode 되어질때 Audiodata 형식이라는 header 가 없어서

 

에러가 발생했다.

 

결국에는 이 ArrayBuffer 데이터에 wav header를 만들어 header + value.buffer 형태로 새로운 bufferArray를 만들어

 

decodeAudioData에 넣어주었다.

 

wav파일 헤더에 관한 자료는 https://crystalcube.co.kr/123 를 참고했다.

 

 

 

참고 자료 : https://stackoverflow.com/questions/38589614/webaudio-streaming-with-fetch-domexception-unable-to-decode-audio-data