HTML 오디오

HTML
HTML5 logo
HTML과 변형
HTML 요소와 속성
편집
문자 인코딩 및 언어
문서 및 브라우저 모델
클라이언트 사이드 스크립팅 및 API
그래픽 및 웹3D 기술
비교

HTML 오디오(HTML audio)는 HTML 명세의 주제로, 브라우저 내에서 음성 인식 텍스트 변환을 포함한 오디오 기능을 통합한다.

<audio> 요소

<audio> 요소는 소리나 오디오 스트림을 나타낸다. 이는 일반적으로 웹 페이지 내에서 단일 오디오 파일을 재생하는 데 사용되며, 재생/일시 정지/볼륨 조절 기능을 갖춘 GUI 위젯을 표시한다.

<audio> 요소는 다음과 같은 속성을 가진다.

  • 전역 속성 (accesskey; class; contenteditable; contextmenu; dir; draggable; dropzone; hidden; id; lang; spellcheck; style; tabindex; title; translate)
  • autoplay = "autoplay" 또는 "" (빈 문자열) 또는 비어 있음
    사용자 에이전트에게 오디오 스트림을 중단 없이 재생할 수 있는 즉시 자동으로 재생하도록 지시한다.
  • preload = "none" 또는 "metadata" 또는 "auto" 또는 "" (빈 문자열) 또는 비어 있음
    사용자 에이전트에게 오디오 스트림 자체나 메타데이터의 낙관적 다운로드가 가치 있는지에 대한 힌트를 제공한다.
    • "none": 사용자에게 오디오 스트림이 필요하지 않을 것으로 예상되거나 불필요한 트래픽을 최소화하는 것이 바람직하다는 것을 사용자 에이전트에게 암시한다.
    • "metadata": 사용자에게 오디오 스트림은 필요하지 않을 것으로 예상되지만 메타데이터(재생 시간 등)를 가져오는 것이 바람직하다는 것을 사용자 에이전트에게 암시한다.
    • "auto": 오디오 스트림 전체를 낙관적으로 다운로드하는 것이 바람직하다는 것을 사용자 에이전트에게 암시한다.
  • controls = "controls" 또는 "" (빈 문자열) 또는 비어 있음
    사용자 에이전트에게 오디오 스트림 재생을 제어하기 위한 사용자 인터페이스를 노출하도록 지시한다.
  • loop = "loop" 또는 "" (빈 문자열) 또는 비어 있음
    사용자 에이전트에게 오디오 스트림이 끝에 도달하면 시작 부분으로 돌아가도록 지시한다.
  • mediagroup = 문자열
    사용자 에이전트에게 여러 비디오 및 오디오 스트림을 함께 연결하도록 지시한다.
  • muted = "muted" 또는 "" (빈 문자열) 또는 비어 있음
    사용자 기본 설정을 잠재적으로 재정의하여 오디오 스트림의 기본 상태를 나타낸다.
  • src = 공백으로 둘러싸일 수 있는 비어 있지 않은 [URL]
    오디오 스트림의 URL.

예시:[1] 

<audio controls>
  <source src="https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type="audio/mp4" />
  <source src="https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" type="audio/ogg; codecs=vorbis" />
  <p>귀하의 사용자 에이전트는 HTML5 오디오 요소를 지원하지 않습니다.</p>
</audio>

지원하는 브라우저

PC:

  • 구글 크롬
  • 인터넷 익스플로러 9
  • 모질라 파이어폭스 3.5
  • 오페라 10.5
  • 사파리 3.1

모바일 기기:

  • 안드로이드 브라우저 2.3
  • 구글 크롬
  • 인터넷 익스플로러 모바일 9
  • 사파리 4
  • 모질라 파이어폭스
  • 오페라 모바일 11

지원되는 오디오 코딩 포맷

HTML5 비디오와 마찬가지로 HTML 오디오의 채택은 자유 포맷과 특허가 걸린 포맷을 지지하는 진영 사이에서 양극화되었다. 2007년, W3C는 주요 브라우저 공급업체 모두가 수용하는 포맷의 부재를 이유로 Vorbis 사용 권고를 HTML5 명세에서 Ogg Theora 사용 권고와 함께 철회했다.

애플과 마이크로소프트는 ISO/IEC가 정의한 기술 표준 포맷인 AAC와 구형인 MP3를 지원한다. 모질라와 오페라는 Ogg 및 WebM 컨테이너 내의 자유롭고 개방형, 로열티 프리인 Vorbis 포맷을 지원하며, “비자유” 상태가 보장되는 MP3와 AAC의 특허 기반 성격을 비판한다. 구글은 지금까지 모든 공통 포맷에 대한 지원을 제공하고 있다.

유한한 길이를 가진 대부분의 AAC 파일은 인터넷 익스플로러, 사파리, 크롬에서 기본적으로 지원되며, 파이어폭스 및 오페라에서는 OS를 통해 지원되는 MPEG-4 컨테이너(.mp4, .m4a)로 감싸져 있다. 무한한 길이를 가진 대부분의 AAC 라이브 스트림은 오디오 데이터 전송 스트림 컨테이너(.aac, .adts)로 감싸져 있으며, 이는 크롬, 사파리, 파이어폭스, 마이크로소프트 엣지에서 지원된다.[2][3][4]

많은 브라우저가 WAVE 컨테이너의 압축되지 않은 PCM 오디오도 지원한다.[5]

2012년, 자유롭고 개방적인 로열티 프리 오푸스 포맷이 발표되었으며 IETF에 의해 표준화되었다. 이는 모질라, 구글, 오페라, 마이크로소프트 엣지에 의해 지원된다.[5][6][7][8]

다음 표는 <audio> 요소에 의한 오디오 코딩 포맷 지원 현황을 기록한다.

웹 브라우저별 지원 포맷
포맷 컨테이너 MIME 유형 크롬 인터넷 익스플로러 엣지 파이어폭스 오페라 사파리
PCM WAV audio/wav 예 아니요 예 Yes, v3.5부터 Yes, v11.00부터 Yes, v3.1부터
MP3 MP3 audio/mpeg 예[9] Yes, IE9부터 예 Yes, v71부터[10] 예[9] Yes, v3.1부터
AAC MP4 audio/mp4 예 Yes, IE9부터 예 OS로부터[a] 예 예
ADTS[b] audio/aac
audio/aacp		 예 아니요 예 v45.0부터 OS로부터[a][12][13] 예 예
Vorbis Ogg audio/ogg Yes, v9부터 아니요 v79부터[14]
v17부터, 웹 미디어 확장 기능 포함[15]		 Yes, v3.5부터[16] Yes, v10.50부터 Xiph 퀵타임 컴포넌츠 포함 (macOS 10.11 및 이전)
WebM audio/webm 예 아니요 v79부터[14]
v17부터, 웹 미디어 확장 기능 포함[15]		 Yes, v4.0부터[17] Yes, v10.60부터 아니요
오푸스 Ogg audio/ogg Yes, v25부터
(Windows에서는 v31)		 아니요 v79부터[18]
v17부터, 웹 미디어 확장 기능 포함[15]		 Yes, v15.0부터[19] Yes, v14부터 아니요
WebM audio/webm 예 아니요 v79부터[18]
v17부터, 웹 미디어 확장 기능 포함[15]		 Yes, v28.0부터[20] 예 Yes, 사파리 15+ 및 MacOS 몬터레이부터[21][22]
CAF audio/x-caf 아니요 아니요 아니요 아니요 아니요 Yes, 사파리 11 및 MacOS 하이 시에라부터
FLAC FLAC audio/flac Yes, v56부터[23] 아니요 Yes, v16부터[24] Yes, v51부터[25] 예 Yes, v11부터[26]
Ogg audio/ogg Yes, v56부터[23] 아니요 v79부터[27]
v17부터, 웹 미디어 확장 기능 포함[15]		 Yes, v51부터[25] 예 아니요

Web Audio API 및 MediaStream Processing API

W3C에서 개발한 Web Audio API 명세는 웹 애플리케이션에서 오디오를 처리하고 합성하기 위한 상위 수준의 자바스크립트 API를 기술한다. 기본 패러다임은 오디오 라우팅 그래프로, 다수의 AudioNode 객체가 함께 연결되어 전체 오디오 렌더링을 정의한다. 실제 처리는 주로 기반 구현(일반적으로 최적화된 어셈블리/C/C++ 코드)에서 이루어지지만, 직접적인 자바스크립트 처리 및 합성도 지원된다.[28]

모질라의 파이어폭스 브라우저는 2010년에 구현되어[29] 2011년에 출시된 유사한 Audio Data API 확장을 버전 4부터 구현하고 있으나, 모질라는 이것이 비표준이며 지원이 중단되었음을 경고하고 대신 Web Audio API를 사용할 것을 권장한다.[30] Audiolet과 같은 일부 자바스크립트 오디오 처리 및 합성 라이브러리는 두 API를 모두 지원한다.

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

지원하는 브라우저

PC:

  • 구글 크롬 10[33] (14부터 기본 활성화[34])
  • 파이어폭스 23 (25부터 기본 활성화)
  • 오페라 15
  • 사파리 6
  • 마이크로소프트 엣지 12
  • 오페라 GX 36

모바일 기기:

  • 안드로이드용 구글 크롬 28 (29부터 기본 활성화) 및 애플 아이패드
  • 사파리 6 (사용 제한 있음 (사용자가 호출하지 않으면 음소거됨))
  • 파이어폭스 23 (25부터 기본 활성화)
  • 타이젠

Web Speech API

Web Speech API는 웹 애플리케이션을 위한 대체 입력 방식(키보드 사용 없이)을 제공하는 것을 목표로 한다. 이 API를 통해 개발자는 웹 앱에 컴퓨터 마이크에서 입력된 음성을 텍스트로 변환하는 기능을 부여할 수 있다. 녹음된 오디오는 변환을 위해 음성 서버로 전송되며, 이후 텍스트가 사용자에게 타이핑된다. API 자체는 기반 음성 인식 구현과 무관하며 서버 기반 인식기와 내장 인식기를 모두 지원할 수 있다.[35] HTML 음성 인큐베이터 그룹(HTML Speech Incubator group)은 브라우저에서 균일한 크로스 플랫폼 API 형태로 음성 기술을 구현할 것을 제안했다. 이 API는 다음 두 가지를 포함한다.[36]

  • 음성 입력 API
  • 텍스트 음성 변환 API

구글은 2011년 3월에 이 기능을 구글 크롬에 통합했다.[37] 이를 통해 사용자는 다음과 같은 코드로 음성을 사용하여 웹을 검색할 수 있다. 

<script type="application/javascript">
    function startSearch(event) {
        event.target.form.submit();
    }
</script>
<form action="http://www.google.com/search">
  <input type="search" name="q" speech required onspeechchange="startSearch">
</form>

같이 보기

내용주

  1. ↑ 가 나 라이선스 문제로 인해 AAC 코덱에 대한 기본 지원은 없다. 오디오 파일의 디코딩을 위해서는 호스트 OS가 호환 라이브러리를 제공해야 한다.[11]
  2. ↑ MPEG-4 파일은 메타데이터를 포함한 헤더와, H.264로 인코딩된 비디오 및 AAC로 인코딩된 오디오와 같은 비디오 및 오디오 데이터를 포함할 수 있는 '트랙'으로 구성된다. 대조적으로 ADTS는 일련의 프레임으로 구성된 스트리밍 포맷으로, 각 프레임은 헤더와 그 뒤를 따르는 AAC 데이터로 구성된다.[3]

각주

  1. ↑ “The Embed Audio element – HTML: HyperText Markup Language | MDN”. 
  2. ↑ “MP4 container · Issue #95 · karlheyes/icecast-kh” (영어). 《GitHub》. 2022년 11월 18일에 확인함. 
  3. ↑ 가 나 “Technical Note TN2236: High-Efficiency Advanced Audio Coding (HE-AAC)”. 
  4. ↑ “1224887 – Implement OpenMax IL AAC audio decoding client”. 
  5. ↑ 가 나 “Media type and format guide: image, audio, and video content – Web media technologies | MDN”. 《developer.mozilla.org》. 
  6. ↑ “September 11, 2012: Opus audio codec is now RFC6716, Opus 1.0.1 reference source released”. 
  7. ↑ “It's Opus, it rocks and now it's an audio codec standard! – Mozilla Hacks – the Web developer blog”. 
  8. ↑ “WebM, VP9 and Opus Support in Microsoft Edge – Microsoft Edge Dev BlogMicrosoft Edge Dev Blog” (미국 영어). 《blogs.windows.com》. 2016년 4월 18일. 2017년 3월 22일에 확인함. 
  9. ↑ 가 나 “Enable mp3 support in Chromium”. Google. 2018년 5월 1일에 확인함. 
  10. ↑ “Firefox 71.0 release notes”. Mozilla. 2019년 12월 3일. 
  11. ↑ “Media type and format guide: image, audio, and video content”. 《Mozilla Developer Network》. Mozilla. 2019년 12월 6일에 확인함. 
  12. ↑ “1190341 - audio/aacp shoutcast is not supported”. 
  13. ↑ “1169212 - Create ADTSDemuxer, a MediaDataDemuxer”. 
  14. ↑ 가 나 “Platform Status – Microsoft Edge Developer”. 2021년 2월 27일에 원본 문서에서 보존된 문서. 2020년 5월 11일에 확인함. 
  15. ↑ 가 나 다 라 마 “Introducing the Web Media Extension Package with OGG Vorbis and Theora support for Microsoft Edge”. 《Microsoft Edge Dev Blog》. 마이크로소프트. 2017년 12월 5일. 
  16. ↑ “Firefox Notes - Desktop”. 
  17. ↑ “Firefox Notes - Desktop”. 
  18. ↑ 가 나 “Platform Status – Microsoft Edge Developer”. 《developer.microsoft.com》. 2021년 2월 27일에 원본 문서에서 보존된 문서. 2020년 5월 11일에 확인함. 
  19. ↑ “Firefox Notes - Desktop”. 
  20. ↑ “Firefox 28.0, See All New Features, Updates and Fixes”. 
  21. ↑ Simmons, Jen (2021년 10월 26일). “New WebKit Features in Safari 15”. 
  22. ↑ “Apple Developer Documentation”. 《developer.mozilla.org》. 
  23. ↑ 가 나 “FLAC codec support for <audio> and WebAudio”. 《Chrome Platform Status》. 2016년 12월 27일에 확인함. 
  24. ↑ “Platform Status – Microsoft Edge Developer”. 《developer.microsoft.com》. 2021년 2월 27일에 원본 문서에서 보존된 문서. 2020년 5월 11일에 확인함. 
  25. ↑ 가 나 “Firefox 51 for developers”. 《Mozilla Developer Network》. 2016년 12월 27일에 확인함. 
  26. ↑ Chaim Gartenberg (2017년 6월 6일). “Apple reportedly adds support for FLAC lossless audio in iOS 11”. 《The Verge》. 
  27. ↑ “Platform Status – Microsoft Edge Developer”. 2021년 2월 27일에 원본 문서에서 보존된 문서. 2020년 5월 11일에 확인함. 
  28. ↑ Chris Rogers (2012년 3월 15일). “Web Audio API”. W3C. 2012년 7월 20일에 원본 문서에서 보존된 문서. 2012년 7월 4일에 확인함. 
  29. ↑ “Audio Data API”. 
  30. ↑ “Introducing the Audio API extension”. 《모질라 개발자 네트워크》. 모질라. 2012년 3월 5일. 2012년 5월 5일에 원본 문서에서 보존된 문서. 2012년 7월 4일에 확인함. 
  31. ↑ “Audio Processing API”. W3C. 2011년 12월 15일. 2012년 6월 14일에 원본 문서에서 보존된 문서. 2012년 7월 4일에 확인함. 
  32. ↑ Robert O'Callahan (2012년 5월 31일). “MediaStream Processing API”. W3C. 2012년 7월 4일에 확인함. 
  33. ↑ “Web Audio API is now available in Chrome from Chris Rogers on 2011-02-01 ([email protected] from February 2011)”. 《lists.w3.org》. 2022년 11월 18일에 확인함. 
  34. ↑ Scott Gilbertson (2011년 9월 19일). “Chrome 14 Adds Better Audio, 'Native Client' Support”. 《Webmonkey》. 와이어드. 2012년 7월 4일에 확인함. 
  35. ↑ “API draft”. 2012년 1월 28일에 확인함. 
  36. ↑ “HTML5 Speech API”. 2012년 1월 28일에 확인함. 
  37. ↑ “Talking to your computer”. 2012년 1월 28일에 확인함. 

외부 링크

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.