HTML5 오디오

3. 지원되는 오디오 코딩 형식

HTML5 비디오와 마찬가지로, HTML5 오디오의 채택은 자유 형식과 특허가 적용되는 형식의 지지자 사이에서 논쟁이 있었다.^[51] 2007년, W3C는 모든 주요 브라우저 공급업체에서 허용하는 형식이 부족하다는 이유로 Vorbis 사용 권장 사항을 철회했다.

애플과 마이크로소프트는 AAC와 MP3를 지원한다. 반면 모질라와 오페라는 Ogg 및 WebM 컨테이너에서 자유롭고 개방적이며 로열티가 없는 Vorbis 형식을 지원하며, MP3 및 AAC의 특허 제약 특성을 비판한다. 구글은 지금까지 모든 일반적인 형식에 대한 지원을 제공해 왔다.

제한된 길이의 대부분의 AAC 파일은 인터넷 익스플로러, 사파리, 크롬에서 기본적으로 지원되고, 파이어폭스 및 오페라에서는 OS에서 지원하는 MPEG-4 컨테이너(.mp4, .m4a)로 래핑된다.^[52] 길이가 무한한 대부분의 AAC 라이브 스트림은 크롬, 사파리, 파이어폭스 및 엣지에서 지원되는 오디오 데이터 전송 스트림 컨테이너(.aac, .adts)에 래핑된다.^[53][54][55]

많은 브라우저는 WAV 컨테이너에서 압축되지 않은 PCM 오디오도 지원한다.^[56]

2012년에는 로열티가 없는 무료 개방형 Opus 형식이 출시되어 IETF에 의해 표준화되었다. 모질라, 구글, 오페라 및 엣지에서 지원된다.^{[56][57][58][59]}

3. 1. 주요 오디오 코덱

HTML5 오디오에서 사용되는 주요 오디오 코덱은 다음과 같다.

• MP3: 널리 사용되는 손실 압축 오디오 형식이다. 대부분의 브라우저에서 지원된다.^[8][9]
• AAC: MP3보다 향상된 음질을 제공하는 손실 압축 오디오 형식이다. 주로 MPEG-4 컨테이너(.mp4, .m4a)에 사용되며, 대부분의 브라우저에서 지원된다.^[10][11][12]
• Vorbis: 자유 오픈 소스 오디오 형식으로, Ogg 컨테이너에 주로 사용된다. 모질라 파이어폭스, 오페라, 크롬 등에서 지원된다.^{[13][14][15][16]}
• Opus: 자유 오픈 소스 오디오 형식으로, 뛰어난 압축 효율과 낮은 지연 시간을 제공한다. WebM, Ogg 컨테이너 등에 사용되며, 모질라, 구글, 오페라, 엣지 등에서 지원된다.^{[14][17][18][19][20][21]}
• PCM: 압축되지 않은 오디오 형식으로, WAV 컨테이너에 주로 사용된다.^[4]
• FLAC: 무손실 오디오 코덱으로 크롬, 엣지, 파이어폭스, 오페라, 사파리에서 지원된다.^{[22][23][24][25]}

3. 2. 브라우저별 지원 현황

4. Web Audio API

W3C에서 개발한 Web Audio API는 웹 애플리케이션에서 오디오를 처리하고 합성하기 위한 고수준 자바스크립트 API이다.^[27] 오디오 노드를 연결하여 오디오 라우팅 그래프를 구성하는 방식으로 작동한다. 실제 처리는 주로 최적화된 어셈블리/C/C++ 코드로 구현되지만, 자바스크립트를 이용한 직접 처리 및 합성도 지원된다.^[27]

모질라 파이어폭스 브라우저는 2010년에 유사한 오디오 데이터 API를 구현하여 2011년 출시된 버전 4부터 제공했지만,^[28] 모질라는 이것이 표준이 아니며 사용 중단되었음을 알리고, 대신 Web Audio API를 사용할 것을 권장한다.^[29] [https://oampo.github.com/Audiolet/ Audiolet]과 같은 일부 자바스크립트 오디오 처리 및 합성 라이브러리는 두 API를 모두 지원한다.

W3C 오디오 작업 그룹은 모질라에서 개발한 미디어 스트림 처리 API 명세 또한 고려하고 있다.^[30] 이 API는 오디오 믹싱 및 처리 외에도 HTML 요소와의 동기화, 오디오 및 비디오 스트림 캡처, 그리고 이러한 미디어 스트림의 피어 투 피어 라우팅을 포함하는 보다 일반적인 미디어 스트리밍을 다룬다.^[31]

4. 1. 지원 브라우저

5. Web Speech API

웹 음성 API는 웹 애플리케이션에 음성 인식 및 음성 합성 기능을 제공하는 API이다. 음성 인식은 사용자의 음성을 텍스트로 변환하고, 음성 합성은 텍스트를 음성으로 변환하여 재생한다.

웹 음성 API는 키보드 사용 없이 웹 애플리케이션에 대한 대체 입력 방법을 제공하는 것을 목표로 한다. 개발자는 이 API를 통해 웹 앱에 컴퓨터 마이크에서 음성을 텍스트로 변환하는 기능을 제공할 수 있다. 녹음된 오디오는 텍스트 변환을 위해 음성 서버로 전송되며, 이후 텍스트가 사용자에게 표시된다. API 자체는 기반 음성 인식 구현에 관계없이 서버 기반 인식기와 내장 인식기 모두를 지원할 수 있다.^[34]

'''HTML 음성 인큐베이터 그룹'''은 브라우저에서 오디오-음성 기술을 균일하고 플랫폼 간 API 형태로 구현할 것을 제안했다. API는 음성 입력 API와 텍스트 음성 변환 API를 모두 포함한다.^[35]

구글은 2011년 3월 이 기능을 구글 크롬에 통합했다.^[36]

5. 1. 지원 브라우저

참조

_[1] 웹사이트 MP4 container · Issue #95 · karlheyes/icecast-kh https://github.com/k[...] 2022-11-18
_[2] 웹사이트 Technical Note TN2236: High-Efficiency Advanced Audio Coding (HE-AAC) https://developer.ap[...]
_[3] 웹사이트 1224887 – Implement OpenMax IL AAC audio decoding client https://bugzilla.moz[...]
_[4] 웹사이트 Media type and format guide: image, audio, and video content – Web media technologies | MDN https://developer.mo[...]
_[5] 웹사이트 September 11, 2012: Opus audio codec is now RFC6716, Opus 1.0.1 reference source released https://www.xiph.org[...]
_[6] 웹사이트 It's Opus, it rocks and now it's an audio codec standard! – Mozilla Hacks – the Web developer blog https://hacks.mozill[...]
_[7] 웹사이트 WebM, VP9 and Opus Support in Microsoft Edge – Microsoft Edge Dev BlogMicrosoft Edge Dev Blog https://blogs.window[...] 2017-03-22
_[8] 웹사이트 Enable mp3 support in Chromium https://bugs.chromiu[...] Google 2018-05-01
_[9] 웹사이트 Firefox 71.0 release notes https://www.mozilla.[...] Mozilla 2019-12-03
_[10] 웹사이트 Media type and format guide: image, audio, and video content https://developer.mo[...] Mozilla 2019-12-06
_[11] 웹사이트 1190341 - audio/aacp shoutcast is not supported https://bugzilla.moz[...]
_[12] 웹사이트 1169212 - Create ADTSDemuxer, a MediaDataDemuxer https://bugzilla.moz[...]
_[13] 웹사이트 Platform Status – Microsoft Edge Developer https://developer.mi[...]
_[14] 웹사이트 Introducing the Web Media Extension Package with OGG Vorbis and Theora support for Microsoft Edge https://blogs.window[...] Microsoft 2017-12-05
_[15] 웹사이트 Firefox Notes - Desktop https://website-arch[...]
_[16] 웹사이트 Firefox Notes - Desktop https://website-arch[...]
_[17] 웹사이트 Platform Status – Microsoft Edge Developer https://developer.mi[...]
_[18] 웹사이트 Firefox Notes - Desktop https://website-arch[...]
_[19] 웹사이트 Firefox 28.0, See All New Features, Updates and Fixes https://www.mozilla.[...]
_[20] 웹사이트 New WebKit Features in Safari 15 https://webkit.org/b[...] 2021-10-26
_[21] 웹사이트 Apple Developer Documentation https://developer.ap[...]
_[22] 웹사이트 FLAC codec support for <audio> and WebAudio https://www.chromest[...] 2016-12-27
_[23] 웹사이트 Platform Status – Microsoft Edge Developer https://developer.mi[...]
_[24] 웹사이트 Firefox 51 for developers https://developer.mo[...] 2016-12-27
_[25] 웹사이트 Apple reportedly adds support for FLAC lossless audio in iOS 11 https://www.theverge[...] 2017-06-06
_[26] 웹사이트 Platform Status – Microsoft Edge Developer https://developer.mi[...]
_[27] 웹사이트 Web Audio API https://dvcs.w3.org/[...] W3C 2012-07-04
_[28] 웹사이트 Audio Data API https://wiki.mozilla[...]
_[29] 웹사이트 Introducing the Audio API extension https://web.archive.[...] Mozilla 2012-07-04
_[30] 웹사이트 Audio Processing API http://www.w3.org/TR[...] W3C 2012-07-04
_[31] 웹사이트 MediaStream Processing API http://www.w3.org/TR[...] W3C 2012-07-04
_[32] 웹사이트 Web Audio API is now available in Chrome from Chris Rogers on 2011-02-01 (public-xg-audio@w3.org from February 2011) https://lists.w3.org[...] 2022-11-18
_[33] 웹사이트 Chrome 14 Adds Better Audio, 'Native Client' Support http://www.webmonkey[...] Wired 2012-07-04
_[34] 웹사이트 API draft http://lists.w3.org/[...] 2012-01-28
_[35] 웹사이트 HTML5 Speech API https://wiki.mozilla[...] 2012-01-28
_[36] 웹사이트 Talking to your computer http://chrome.blogsp[...] 2012-01-28
_[37] 웹사이트 Web Speech API – Web APIs · MDN https://developer.mo[...] 2024-05-20
_[38] 웹사이트 Firefox 49 for developers – Mozilla · MDN https://developer.mo[...] 2024-05-20
_[39] 웹사이트 Web Speech API – Web APIs · MDN https://developer.mo[...] 2024-05-20
_[40] 문서 About HTML5 Audio and Video - Safari HTML5 Audio and Video Guide http://developer.app[...]
_[41] 웹사이트 https://developer.mo[...]
_[42] 웹사이트 https://www.xiph.org[...]
_[43] 웹사이트 https://hacks.mozill[...]
_[44] 웹사이트 Web Audio API https://dvcs.w3.org/[...] W3C 2012-03-15
_[45] 웹사이트 MediaStream Processing API https://www.w3.org/T[...] W3C 2012-05-31
_[46] 웹사이트 Web Audio API is now available in Chrome http://lists.w3.org/[...]
_[47] 웹사이트 Chrome 14 Adds Better Audio, ‘Native Client’ Support http://www.webmonkey[...] Wired 2011-09-19
_[48] 웹사이트 mdn/browser-compat-data https://github.com/m[...] 2018-06-13
_[49] 웹사이트 mdn/browser-compat-data https://github.com/m[...] 2018-06-13
_[50] 웹사이트 Web Speech API https://developer.mo[...] 2018-06-13
_[51] 웹인용 HTML5 audio element – W3C http://www.w3.org/TR[...] 2013-07-02
_[52] 웹인용 TechFans.net – Technology and Business News blog https://www.techfans[...] 2022-11-18
_[53] 웹인용 MP4 container · Issue #95 · karlheyes/icecast-kh https://github.com/k[...] 2022-11-18
_[54] 웹인용 Technical Note TN2236: High-Efficiency Advanced Audio Coding (HE-AAC) https://developer.ap[...]
_[55] 웹인용 1224887 – Implement OpenMax IL AAC audio decoding client https://bugzilla.moz[...]
_[56] 웹인용 Media type and format guide: image, audio, and video content – Web media technologies · MDN https://developer.mo[...]
_[57] 웹인용 September 11, 2012: Opus audio codec is now RFC6716, Opus 1.0.1 reference source released https://www.xiph.org[...]
_[58] 웹인용 It's Opus, it rocks and now it's an audio codec standard! – Mozilla Hacks – the Web developer blog https://hacks.mozill[...]
_[59] 웹인용 WebM, VP9 and Opus Support in Microsoft Edge – Microsoft Edge Dev BlogMicrosoft Edge Dev Blog https://blogs.window[...] 2016-04-18