HTML <audio> 요소는 웹 페이지에서 오디오 파일을 재생하는 데 사용된다.
HTML 오디오 동작 방식
컨트롤 속성은 재생, 일시 중지 및 볼륨과 같은 오디오 컨트롤을 추가한다.
<source> 요소를 사용하면 브라우저가 선택할 수 있는 대체 오디오 파일을 지정할 수 있다. 브라우저는 인식된 첫 번째 형식을 사용한다.
<audio> 태그와 </audio> 태그 사이의 텍스트는 <audio> 요소를 지원하지 않는 브라우저에서만 표시된다.
HTML Audio autoplay
오디오 파일을 자동으로 시작하려면 autoplay 속성을 사용한다:
아래는 autoplay 속성을 활용한 예제이다.
| <!DOCTYPE html> <html> <body> <audio controls autoplay> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 브라우저가 오디오 요소를 지원하지 않습니다. </audio> </body> </html> |
아래 그림은 결과화면이다.
HTML 오디오 muted
자동 재생 후 음소거를 추가하여 오디오 파일이 자동으로 재생되도록 합니다(단 음소거됨):
| <!DOCTYPE html> <html> <body> <audio controls autoplay muted> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 브라우저가 오디오 요소를 지원하지 않습니다. </audio> </body> </html> |
아래 그림은 결과화면이다.
HTML 오디오 형식
MP3, WAV 및 OGG의 세 가지 오디오 형식이 지원됩니다. 다양한 형식에 대한 브라우저 지원은 다음과 같습니다:
| 브라우저 | MP3 | WAV | OGG |
| Edge/IE | 지원 | 지원 | 지원 |
| Chrome | 지원 | 지원 | 지원 |
| Firefox | 지원 | 지원 | 지원 |
| Safari | 지원 | 지원 | 미지원 |
| Opera | 지원 | 지원 | 지원 |
HTML 오디오 - 미디어 유형
| 파일 형식 | 미디어 유형 |
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
HTML 오디오 - method, properties, events
HTML DOM은 <audio> 요소에 대한 메서드, 속성 및 이벤트를 정의한다.
이렇게 하면 오디오를 로드, 재생 및 일시 중지할 수 있을 뿐만 아니라 지속 시간 및 볼륨을 설정할 수 있다.
또한 오디오가 재생되기 시작하거나 일시 중지되는 등의 경우 사용자에게 알릴 수 있는 DOM 이벤트도 있다.
HTML 오디오 태그
| 태그 | 설명 |
| <audio> | 오디오 컨텐트를 정의한다. |
| <source | <video> 및 <audio>와 같은 미디어 요소에 대한 여러 미디어 리소스를 정의한다 |
지금까지 HTML 오디오 관련해서 간략히 살펴보았다.
모두 꼭 실습하기를 바라며 화이팅!!!입니다...
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 유튜브(Youtube) (0) | 2023.06.22 |
|---|---|
| HTML 플러그인(Plug-ins) (0) | 2023.06.21 |
| HTML 비디오(HTML Video) (0) | 2023.06.19 |
| HTML 멀티미디어(HTML Multimedia) (0) | 2023.06.18 |
| HTML SVG 그래픽스 (0) | 2023.06.17 |
댓글