웹 페이지에서 오디오를 재생할 때 해당 브라우저가 MP3 형식을 지원하는지 미리 확인하면 호환성 문제를 예방할 수 있습니다. HTML5 오디오의 MP3 지원 여부를 감지하는 가장 대표적인 방법은 Modernizr 라이브러리를 사용하는 것입니다.
Modernizr 라이브러리로 감지하기
Modernizr는 브라우저의 다양한 HTML5·CSS3 기능 지원 여부를 손쉽게 확인할 수 있는 자바스크립트 라이브러리입니다. 공식 문서에서도 오디오 포맷 감지를 위해 이 라이브러리를 활용할 것을 권장하고 있습니다.
출처 — Modernizr 공식 문서 스크린샷
User-Agent로 브라우저 판별하기
Modernizr 외에도 User-Agent 문자열을 검사하여 사용자가 어떤 브라우저를 사용하는지 파악한 뒤, 그에 맞게 오디오 지원 여부를 추정하는 방법도 있습니다. 다만 User-Agent 값은 조작될 수 있고 브라우저마다 형식이 달라 정확도가 떨어질 수 있으므로, 보조적인 수단으로 활용하는 것이 좋습니다.
JavaScript로 직접 테스트하기
별도의 라이브러리 없이 순수 JavaScript만으로도 MP3 지원 여부를 확인할 수 있습니다. audio 요소를 생성한 뒤 canPlayType() 메서드의 반환값을 검사하면 됩니다.
var x = document.createElement('audio');
return !!(x.canPlayType && x.canPlayType('audio/mpeg;').replace(/no/, ''));canPlayType() 메서드는 해당 형식을 지원하지 않으면 빈 문자열을, 부분적으로 지원하면 'maybe'를, 확실히 지원하면 'probably'를 반환합니다. 따라서 반환값에서 'no'를 제거한 결과가 빈 문자열이 아니라면, 해당 브라우저가 MP3를 지원한다고 판단할 수 있습니다.