HTML5 오디오

HTML5 audio
"오디오 태그"가 리디렉션됨디지털 오디오를 설명하는 메타데이터는 메타데이터 § 디지털 음악을 참조하십시오.
HTML
비교

HTML5 Audio는 HTML5 규격의 주제로서, 브라우저에 음성 입력, 재생 및 합성은 물론 텍스트까지 통합되어 있다.

<<audio> 원소자

<오디오> 요소는 소리, 즉 오디오 스트림을 나타낸다.[1]일반적으로 웹 페이지 내에서 단일 오디오 파일을 재생하는 데 사용되며 재생/일시 중지/볼륨 컨트롤이 있는 GUI 위젯을 보여준다.

<오디오> 요소에는 다음과 같은 속성이 있다.

  • 전역 속성(액세스키, 클래스, 내용 가능, 컨텍스트 메뉴, dir; 끌 수 있음, 드롭존, 숨김, id; 랑, 철자 검사, 스타일, tabindex, 제목, 번역)
  • 자동 실행 = "clay" 또는 ""(clay string) 또는 비어 있음
    사용자-에이전트가 오디오 스트림을 중지하지 않고 재생하는 즉시 자동으로 시작하도록 지시하십시오.
  • preload = "freload" 또는 "auto" 또는 ""(freload 문자열) 또는 비어 있음
    오디오 스트림 자체의 낙관적인 다운로드가 가치 있는 것으로 간주되는지 여부에 대한 힌트를 사용자 에이전트에 나타낸다.
    • "없음": 사용자에게 오디오 스트림이 필요하지 않을 것으로 예상되거나 불필요한 트래픽을 최소화하는 것이 바람직하다는 힌트
    • "잘못":사용자에게 오디오 스트림이 필요하지 않을 것으로 예상되지만 해당 메타데이터(기간 등)를 가져오는 것이 바람직하다는 힌트를 User-에이전트에 대한 힌트.
    • "자동": 전체 오디오 스트림을 최적으로 다운로드하는 사용자 에이전트에 대한 힌트는 바람직한 것으로 간주된다.
  • 컨트롤 = "interval" 또는 ""(interval string) 또는 비어 있음
    사용자-에이전트에 오디오 스트림의 재생을 제어하기 위한 사용자 인터페이스를 표시하도록 지시하십시오.
  • 루프 = "loop" 또는 ""(loop 문자열) 또는 비어 있음
    사용자-에이전트에게 종료 시 오디오 스트림의 시작으로 돌아가도록 지시하십시오.
  • 중그룹.
    사용자-에이전트가 여러 비디오 및/또는 오디오 스트림을 함께 연결하도록 지시하십시오.
  • 음소거 = "음소거" 또는 ""(음소거 문자열) 또는 비어 있음
    오디오 스트림의 기본 상태를 나타내며 사용자 기본 설정을 재정의할 수 있음.
  • src = 공백으로 둘러싸일 가능성이 있는 비어 있지 않은 [URL]
    오디오 스트림의 URL.

예:[2]

<controls> <소스 src="https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type="script/mp4" /><소스 src="https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" type="type="codes/ogg; 코덱=vorbis" />사용자 에이전트가 HTML5 오디오 요소를 지원하지 않는다.</p> </pi>

지원 브라우저

PC의 경우:

모바일 장치의 경우:

지원되는 오디오 코딩 형식

HTML5 비디오와 마찬가지로 HTML5 오디오의 채택은 자유 형식과 특허 번호 형식의 지지자들 사이에서 양극화되었다.2007년, 모든 주요 브라우저 벤더가 수용하는 포맷이 부족하다는 이유로, Vorbis 사용 권고는 W3C에 의해 Ogg Thera 사용과 함께 사양에서 철회되었다.

애플과 마이크로소프트는 ISO/IEC 정의 포맷 AAC와 구형 MP3를 지원한다. 모질라와 오페라는 Ogg와 WebM 컨테이너에서 자유롭고 개방적이며 로열티 없는 Vorbis 형식을 지원하며, "무료"가 보장된 MP3와 AAC의 특허 번호 특성을 비판한다.구글은 지금까지 모든 공통 포맷에 대한 지원을 제공해왔다.

길이가 한정된 대부분의 AAC 파일은 MPEG-4 컨테이너(.mp4, .m4a)로 포장되어 있는데, 이는 기본적으로 Internet Explorer, Safari, Chrome에서 지원되며, Firefox와 Opera에서 OS가 지원한다.[4]무한 길이의 대부분의 AAC 라이브 스트림은 Chrome, Safari, Firefox 및 Edge에서 지원하는 오디오 데이터 전송 스트림 컨테이너(.aac, .adts)로 포장된다.[5][6][7]

많은 브라우저들은 또한 WAVE 컨테이너에서 압축되지 않은 PCM 오디오를 지원한다.[8]

2012년에는 무료 오픈 로열티 없는 오퍼스 포맷이 출시되어 IETF에 의해 표준화되었다.모질라, 구글, 오페라, 엣지가 지원한다.[9][10][11][12]

이 표는 다음을 기준으로 오디오 코딩 형식에 대한 현재 지원을 문서화한다.<audio>원소의

다른 웹 브라우저에서 지원되는 형식
포맷 컨테이너 MIME형 크롬 인터넷 익스플로러 가장자리 파이어폭스 오페라 사파리
PCM WAV 오디오/와이브 네 아니요. 네 예, v3.5에서 예, v11.00. 예, v3.1에서
MP3 MP3 오디오/mpeg 네[13] 예, IE9에서 네 예, v71에서[14] 네[13] 예, v3.1에서
AAC MP4 오디오/mp4 네 예, IE9에서 네 OS에서[a] 네 네
ADTS[b] 오디오/아악
오디오/아홉		 네 아니요. 네 v45.0의 OS에서[a] 네 네
보비스 오그 오디오/오그 예, v9에서 아니요. v79년[16]
v17에서 Web Media Extensions[17] 사용		 예, v3.5에서 예, v10.50에서 Xiph QuickTime 구성 요소 포함(macOS 10.11 이하)
웹M 오디오/웹뮤직 네 아니요. v79년[16]
v17에서 Web Media Extensions[17] 사용		 예, v4.0에서 예, v10.60에서 아니요.
오푸스 오그 오디오/오그 예, v25에서
(윈도우즈용 v31에서)		 아니요. v79년[18]
v17에서 Web Media Extensions[17] 사용		 예, v15.0에서 예, v14에서 아니요.
웹M 오디오/웹뮤직 네 아니요. v79년[18]
v17에서 Web Media Extensions[17] 사용		 예, v28.0에서[19] 네 아니요.
CAF 오디오/엑스파일 아니요. 아니요. 아니요. 아니요. 아니요. 예, Safari 11과 MacOS High Sierra에서
플랙 플랙 오디오/플랙스 예, v56에서[20] 아니요. 예, v16에서[21] 예, v51에서[22] 네 예, v11에서[23]
오그 오디오/오그 예, v56에서[20] 아니요. v79년[24]
v17에서 Web Media Extensions[17] 사용		 예, v51에서[22] 네 아니요.

웹 오디오 API 및 MediaStream 처리 API

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

모질라의 파이어폭스 브라우저는 2010년에 구현되어 2011년에 발매된 버전 4 이후 유사한 오디오 데이터 API 확장을 구현하지만 모질라는 비표준적이고 비사용적이라고 경고하고 대신 웹 오디오 API를 추천한다.[27]오디오릿과 같은 일부 자바스크립트 오디오 처리 및 합성 라이브러리는 두 API를 모두 지원한다.

W3C 오디오 작업 그룹은 모질라가 개발한 미디어스트림 프로세싱 API 규격도 고려하고 있다.[28]오디오 믹싱 및 처리 외에도 HTML 요소와의 동기화, 오디오 및 비디오 스트림의 캡처, 이러한 미디어 스트림의 피어 투 피어 라우팅을 포함한 더 일반적인 미디어 스트리밍을 다룬다.[29]

지원 브라우저

PC의 경우:

모바일 장치의 경우:

  • Android용 Google Chrome 28 (29 이후 기본적으로 사용 가능)
  • Safari 6(사용 제한이 있음(사용자가 호출하지 않는 한 음소거됨)
  • Firefox 23(25 이후 기본값으로 사용)
  • 타이젠

웹 음성 API

웹 스피치 API는 (키보드를 사용하지 않고) 웹 어플리케이션에 대한 대체 입력 방법을 제공하는 것을 목표로 한다.개발자들은 이 API를 통해 웹 앱들에게 컴퓨터 마이크에서 음성을 텍스트로 변환하는 기능을 제공할 수 있다.녹음된 오디오는 사전을 위해 음성 서버로 전송되고, 그 후에 사용자를 위해 텍스트가 입력된다.API 자체는 기본 음성 인식 구현에 제한이 없으며 내장된 인식자뿐만 아니라 서버 기반 인식자 모두를 지원할 수 있다.[32]HTML Speech Incubator 그룹은 균일한 교차 플랫폼 API의 형태로 브라우저에서 오디오 음성 기술의 구현을 제안했다.API에는 다음 두 가지가 모두 포함되어 있다.[33]

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

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

<각본을 뜨다 타자를 치다="응용프로그램/응용프로그램">     기능을 하다 시작검색(사건) {         사건.표적으로 삼다.형체를 이루다.제출하다();     } </각본을 뜨다> <형체를 이루다 액션="http://www.google.com/search">   <입력하다 타자를 치다="검색" 이름을 붙이다="q" 말씨 필수의 말을 바꿔서.="검색 시작"> </형체를 이루다>

지원 브라우저

  • Safari 6.1 이상 [PARTial: 음성 합성 전용, 인식 없음]
  • Google Chrome 25 이상
  • Firefox Desktop 44.0 이상(리눅스 및 Mac) / 45.0 이상(윈도우즈) [PARTial: 음성 합성 전용, 인식 없음; 현재 "미디어" 필요webspeech.recognition.enable" about:config 옵션을 수동으로 "true"[35][36][37]로 변경하십시오.]

참고 항목

메모들

  1. ^ a b AAC 코덱은 라이센싱상의 이유로 기본적으로 지원되지 않는다.오디오 파일을 디코딩하려면 호스트 OS가 호환되는 라이브러리를 제공해야 한다.[15]
  2. ^ MPEG-4 파일에는 H.264 인코딩 비디오 및 AAC 인코딩 오디오와 같은 오디오 데이터뿐만 아니라 비디오 데이터를 포함할 수 있는 "트랙" 뒤에 나오는 메타데이터가 포함된 헤더가 포함되어 있다.이와는 대조적으로 ADTS는 일련의 프레임으로 구성된 스트리밍 형식이며, 각 프레임에는 헤더가 있고 그 뒤에 AAC 데이터가 있다.[6]

참조

  1. ^ "HTML5 audio element - W3C". Archived from the original on 2013-06-06. Retrieved 2013-07-02.
  2. ^ "The Embed Audio element - HTML: HyperText Markup Language MDN".
  3. ^ a b HTML5 오디오 및 비디오 정보 - Safari HTML5 오디오 및 비디오 가이드
  4. ^ HTML5/javascript를 사용하여 이 스트림을 재생할 수 있는가?
  5. ^ MP4 용기 · 이슈 #95 · 칼헤이스/아이스캐스트-kh · 깃허브
  6. ^ a b "Technical Note TN2236: High-Efficiency Advanced Audio Coding (HE-AAC)".
  7. ^ "1224887 - Implement OpenMax IL AAC audio decoding client".
  8. ^ "Media type and format guide: Image, audio, and video content - Web media technologies MDN".
  9. ^ "Media type and format guide: Image, audio, and video content - Web media technologies MDN".
  10. ^ https://www.xiph.org/press/2012/rfc-6716/
  11. ^ "It's Opus, it rocks and now it's an audio codec standard! – Mozilla Hacks - the Web developer blog".
  12. ^ "WebM, VP9 and Opus Support in Microsoft Edge - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog". blogs.windows.com. 18 April 2016. Retrieved 2017-03-22.
  13. ^ a b "Enable mp3 support in Chromium". Google. Retrieved 2018-05-01.
  14. ^ "Firefox 71.0 release notes". Mozilla. December 3, 2019.
  15. ^ "Media type and format guide: image, audio, and video content". Mozilla Developer Network. Mozilla. Retrieved 2019-12-06.
  16. ^ a b https://developer.microsoft.com/en-us/microsoft-edge/status/vorbisaudiocodec/
  17. ^ a b c d e "Introducing the Web Media Extension Package with OGG Vorbis and Theora support for Microsoft Edge". Microsoft Edge Dev Blog. Microsoft. December 5, 2017.
  18. ^ a b "Platform Status - Microsoft Edge Developer".
  19. ^ "Firefox 28.0, See All New Features, Updates and Fixes".
  20. ^ a b "FLAC codec support for <audio> and WebAudio". Chrome Platform Status. Retrieved 2016-12-27.
  21. ^ "Platform Status - Microsoft Edge Developer".
  22. ^ a b "Firefox 51 for developers". Mozilla Developer Network. Retrieved 2016-12-27.
  23. ^ Chaim Gartenberg (June 6, 2017). "Apple reportedly adds support for FLAC lossless audio in iOS 11". The Verge.
  24. ^ https://developer.microsoft.com/en-us/microsoft-edge/status/oggcontainer/
  25. ^ Chris Rogers (2012-03-15). "Web Audio API". W3C. Archived from the original on 2012-03-15. Retrieved 2012-07-04.
  26. ^ "Audio Data API".
  27. ^ "Introducing the Audio API extension". Mozilla Developer Network. Mozilla. 2012-03-05. Archived from the original on 2014-01-16. Retrieved 2012-07-04.
  28. ^ "Audio Processing API". W3C. 2011-12-15. Archived from the original on 2011-12-15. Retrieved 2012-07-04.
  29. ^ Robert O'Callahan (2012-05-31). "MediaStream Processing API". W3C. Retrieved 2012-07-04.
  30. ^ 웹 오디오 API는 현재 Chrome으로 제공됨
  31. ^ Scott Gilbertson (2011-09-19). "Chrome 14 Adds Better Audio, 'Native Client' Support". Webmonkey. Wired. Retrieved 2012-07-04.
  32. ^ "API draft". Retrieved January 28, 2012.
  33. ^ "HTML5 Speech API". Retrieved January 28, 2012.
  34. ^ "Talking to your computer". Retrieved January 28, 2012.
  35. ^ "Firefox 44 for developers - Mozilla MDN". Retrieved March 9, 2016.
  36. ^ "Firefox — Notes (45.0) — Mozilla". Retrieved March 9, 2016.
  37. ^ "Web Speech API - Web APIs MDN". Retrieved March 9, 2016.

외부 링크