API에서 보내주는 mp3 파일을 디코딩해야해서 브라우저에서 재생시켜야 하는 일이 있었습니다.
포스트맨으로 해당 API에 요청을 보냈을때는
위 이미지처럼 응답합니다.
하지만, 아무런 조치를 취하지않고 응답을 콘솔로 찍게되면 다음과 같은 대참사가 발생합니다.
이게 무슨 형식인지 저는 도저히 알수가 없었습니다.
구글에 어떻게 검색해야 할 지 감조차 잡히지 않았고, 지푸라기 잡는 심정으로, 콘솔에 그나마 보이는 LAME3. 어쩌고 저쩌고 하는 문장으로도 구글에 검색해봤지만 아무런 힌트를 얻지 못했습니다.
하지만 방법은 상당히 간단했습니다.
axios에 responseType을 명시해주면 문제가 상당히 간단해집니다.
return client.get(`${baseUrl}/enc?text=${text}&type=mp3`, {
responseType: 'blob',
});위와같이 axios option에 responseType을 'blob'으로 명시하게되면, 저 해괴망측한 외계데이터 대신 깔끔한 Blob 데이터를 받게됩니다.
const href = URL.createObjectURL(response); // response : blob
const audio = new Audio(href);
audio.play();그러면 위와같은 코드로 Blob 데이터를 URL.createObjectURL 메소드를 이용하여 링크로 만들 수 있고, audio 인스턴스를 만들어서 전달하게되면 재생도 가능하게 됩니다.
저와 같은 문제를 겪으신 분들에게 도움이 됐으면 좋겠습니다.
몇시간을 검색했는지... 이런..
🧑💻