<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 | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |
