<audio> 태그는 오디오 파일을 설정합니다.
<audio>
<audio> 태그는 오디오 파일을 설정합니다.
특징 | 설명 |
---|---|
요소 | 인라인 요소(Inline Element) |
닫는 태그 | 적용(<audio> ~ </audio>) |
버전 | HTML5 |
시각적 표현 | - |
사용성 | ★★☆☆☆ |
정의(Definition)
- <audio> 태그는 오디오 파일을 설정합니다.
- <audio> 태그는 오디오 파일을 재생할 때 src 속성 또는 <source> 태그를 사용합니다.
- <audio> 태그는 controls 속성이 지정되지 않으면, 시각적인 표시가 없으며, 이 경우 브라우저의 기본 컨트롤이 표시됩니다.
- 기본 컨트롤러에는 테두리(border), 굴곡(border-radius), 간격(padding, margin) 등을 설정할 수 있습니다.
- 오디오 플레이어 개별 구성 요소(버튼, 아이콘, 글꼴 등)는 스타일을 지정할 수 없으며, 컨트롤 디자인은 브라우저마다 다릅니다.
속성(Property)
속성 | 값(예) | 설명 | 버전 |
---|---|---|---|
autoplay | autoplay | 오디오를 자동 재생으로 설정합니다. | |
controls | controls | 오디오 컨트롤(재생/정지) 표시를 설정합니다. | |
loop | loop | 오디오 재생이 완료되면 다시 재생하도록 설정합니다. | |
muted | muted | 오디오를 음소거로 설정합니다. | |
preload | auto metadata none |
브라우저가 로딩 될 때 오디오를 로드합니다. 메타데이터가 로드 될 때 오디오를 로드합니다. 페이지를 로드 될 때 오디오를 로드하지 않습니다. |
|
src | src="URL" | 오디오 파일 주소를 설정합니다. |
예제1(Sample)
오디오 파일을 설정합니다.
음악 출처 : 유튜브 Cat Shat in the Box
HTML
CSS
SCRIPT
<audio controls src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/pan.mp3"></audio>
/* CSS none */
//Javascript none
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<audio> | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |
autoplay | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ |
controls | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |
loop | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |
muted | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |
preload | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |
src | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |