여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. audio 요소
audio 요소
2년전 작성
2년전 수정

동영상을 페이지에 넣는 사용하는 태그는 embed, audio가 있다.

<embed>는 이제 거의 사용되지 않으며 이미지는 <img> 동영상은 <video>, 음악은 <audio>, html을 표시하려면 <iframe>을 이용한다.

audio

오디오 콘텐츠를 포함시키는 데 사용된다.

<audio>태그와 </audio>태그 사이의 텍스트는 <audio> 요소를 지원하지 않는 브라우저에만 표시된다.

지원되는 미디어 타입
MP3
:
audio/mpeg
OGG
:
audio/ogg
WAV
:
audio/wav
HTML
기본 예시
이런식으로 사용할 수 있다.

<video> 태그의 속성
autoplay
:
부울 속성(boolean). 자동 재생. 오디오가 준비되는 즉시 재생을 시작한다.
controls
:
부울 속성(boolean). 컨트롤러 표시. 오디오 컨트롤을 표시한다(예: 재생/일시 중지 버튼).
loop
:
부울 속성(boolean). 반복 재생. 오디오 재생이 완료되면 다시 시작한다.
muted
:
부울 속성(boolean). 음소거. 사운드가 들리지 않게 음소거한다.
preload
:
프리 로드. auto, metadata, none 중 하나 선택하여 입력. 페이지가 로드될 때 오디오를 로드해야 하는지 여부와 로드 방법을 지정한다.
src
:
URL. 오디오 파일의 URL을 입력한다.

source

<audio>와 </audio> 사이에 <sourch> 태그를 이용하여 오디오 파일의 URL을 추가할 수 있다.

<source> 태그가 여러개 있는경우 가장 먼저 입력한 <source> 태그가 실행된다.
만약 가장 먼저 입력한 <source> 태그의 동영상이 지원되지 않는다면 그 다음 <source> 태그로 실행한다.

HTML
기본 예시

track

<audio>와 </audio> 사이에 <track> 태그를 이용하여 오디오 파일의 텍스트 트랙을 지정한다.

텍스트 트랙은 WebVTT(Web Video Text Tracks, .vtt 파일) 또는 Timed Text Markup Language(TTML)형식을 사용해야 한다.

HTML
default

사용자 설정이 다른 자막을 가리키지 않는다면 활성화할 기본 트랙을 설정한다. 하나의 미디어 요소 당 하나의요소에만 사용할 수 있다.

kind

텍스트 트랙의 종류를 입력한다. kind를 아무것도 입력하지 않으면 subtitles로 간주하고 유효하지 않은 값을 가진 경우 metadata로 간주한다.

특성
subtitles
:
자막을 추가한다.
captions
:
폐쇄 자막(음소거로 보거나 청각 장애를 가진 시청자에게 적합하다.)을 추가한다.
descriptions
:
영상에 대한 텍스트 설명을 추가한다. 시각 장애를 가진 시청자에게 적합하다.
chapters
:
챕터 타이틀은 미디어 리소스를 탐색할 때 사용한다.
metadata
:
트랙을 스크립트가 사용한다. 사용자에게 보이지 않는다.
label

사용자가 읽을 수 있는 형태의 텍스트 트랙 제목. 브라우저에서 사용 가능한 트랙의 이름 목록을 생성할 때 사용한다.

src

텍스트 트랙의 URL. 필수 특성. <track>의 부모 <audio> 요소에 crossorigin (en-US) 특성이 없다면 문서와 같은 출처여야한다.

srclang

텍스트 트랙의 언어. 유효한 IETF 언어 태그여야 한다. kind 특성이 subtitle인 경우 필수 항목이다.

참고

Mingg`s Diary
밍구
공부 목적 블로그