HTML5 오디오 태그란?
HTML5에서는 <audio> 태그를 사용하여 웹 페이지에 오디오를 간편하게 삽입할 수 있습니다. 과거에는 Flash와 같은 플러그인이 필요했지만, HTML5부터는 별도의 플러그인 설치 없이 브라우저에서 바로 오디오를 재생할 수 있습니다.
기본 사용법
<audio> 태그에 controls 속성을 추가하면 재생, 일시정지, 음량 조절 버튼이 화면에 표시됩니다. 그리고 <source> 태그를 이용해 오디오 파일의 경로(src)와 파일 형식(type)을 지정합니다.
예제 코드
아래 코드를 실행하여 <audio> 태그의 동작을 직접 확인해 보세요.
<!DOCTYPE html> <html> <head> <title>HTML audio Tag</title> </head> <body> <p>재생 버튼을 클릭해 보세요...</p> <p>(음악: Windows에서 샘플 음악으로 제공되는 Kalimba)</p> <audio controls> <source src = "/html/Kalimba.mp3" type = "audio/mpeg"> </audio> </body> </html>
주요 속성 정리
- controls: 재생, 일시정지, 음량 조절 등의 컨트롤 UI를 표시합니다.
- autoplay: 페이지가 로드되면 자동으로 오디오를 재생합니다.
- loop: 오디오가 끝나면 자동으로 반복 재생합니다.
- muted: 음소거 상태로 재생을 시작합니다.
- preload: 페이지 로드 시 오디오 파일을 어떻게 불러올지 지정합니다(auto, metadata, none).
지원되는 오디오 형식
HTML5에서 주로 사용되는 오디오 형식은 MP3(audio/mpeg), WAV(audio/wav), OGG(audio/ogg)입니다. 브라우저마다 지원하는 형식이 다르므로, 여러 개의 <source> 태그를 함께 사용하면 호환성을 높일 수 있습니다.