audio 태그
audio 태그는 HTML 페이지에서 오디오 재생을 제어합니다.
페이지에 추가하면 "뒤로", "앞으로", "정지" 등의 버튼이 있는 플레이어가 나타납니다(버튼의 모양과 개수는 브라우저에 따라 다름).
파일 경로는 src 속성 또는 중첩된 source 태그를 통해 지정됩니다.
source 태그는 다양한 형식(예: 브라우저마다 지원하는 오디오 형식이 다르므로 mp3 또는 wav 등)의 오디오 파일 경로를 지정하기 위해 필요합니다.
한 형식으로 된 녹음 파일이 있다면 다른 형식으로도 변환해야 합니다.
audio 태그 안에는 HTML에서 오디오를 지원하지 않는 브라우저에서 표시될 텍스트를 작성할 수 있습니다(사용자에게 이를 알리기 위한 목적).
오디오 재생을 제어하는 플레이어를 보려면 controls 속성을 추가해야 합니다.
이 속성이 없으면 아무것도 보이지 않으며, 이 경우 소리도 나지 않습니다.
플레이어 없이 소리를 내려면 autoplay 속성을 추가하세요.
속성
| 속성 | 설명 |
|---|---|
src |
오디오 파일 경로를 지정합니다.
하지만 source 태그를 사용하는 것이 더 좋습니다
(이 경우 다양한 형식으로 오디오를 지정할 수 있음).
|
preload |
사이트 페이지 로드와 동시에 오디오 파일을 로드하는 데 사용됩니다.
사용 가능한 값: none (파일을 로드하지 않음, 기본값),
metadata (재생 시간 등의 서비스 정보만 로드),
auto (HTML 페이지 로드 시 오디오 파일 전체를 로드).
|
autoplay |
페이지 로드 후 바로 소리가 재생되며, 이때 preload 속성은 무시됩니다.
값 없는 속성입니다. |
controls |
오디오 파일에 제어판을 추가합니다.
이때 preload 속성은 무시됩니다.
값 없는 속성입니다. |
loop |
오디오 녹음을 "반복" 재생합니다: 재생이 끝나면 다시 처음부터 재생됩니다.
이때 preload 속성은 무시됩니다.
값 없는 속성입니다. 기본적으로(속성이 없으면) 녹음은 1번만 재생됩니다.
|
muted |
오디오 녹음의 소리를 끕니다.
값 없는 속성입니다. 기본적으로(속성이 없으면) 녹음의 소리는 켜져 있습니다. |
예제 . 사이트 페이지의 플레이어
페이지에 오디오 녹음이 있는 플레이어를 추가해 봅시다.
audio 태그를 지원하지 않는 브라우저를 위해
이에 대한 특별한 메시지를 남겼습니다:
<audio src="track.mp3" controls>
귀하의 브라우저는 HTML5 audio를 지원하지 않습니다.
</audio>
예제 . source 태그가 있는 사이트 페이지의 플레이어
이번에는 audio 태그의 src 속성 대신
source 태그를 추가해 봅시다:
<audio controls>
<source src="track.mp3">
귀하의 브라우저는 HTML5 audio를 지원하지 않습니다.
</audio>
