웹 페이지에 오디오를 삽입하려면 HTML의 <audio> 요소를 사용합니다. 이 태그에 controls 속성을 추가하면 재생, 일시정지, 볼륨 조절 등의 기능을 갖춘 오디오 플레이어가 화면에 표시됩니다.
지원되는 오디오 형식
HTML에서 지원하는 대표적인 오디오 파일 형식은 다음 세 가지입니다.
- MP3 – 가장 널리 사용되는 압축 오디오 형식
- Wav – 무손실 음질을 제공하는 비압축 형식
- Ogg – 개방형 무료 코덱 기반의 압축 형식
기본 예제 코드
아래 코드를 실행하면 HTML 웹 페이지에 오디오 플레이어가 추가된 것을 확인할 수 있습니다.
<!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>
유용한 추가 속성
<audio> 태그는 controls 외에도 다양한 속성을 지원하여 더 풍부한 사용자 경험을 제공합니다.
- autoplay – 페이지가 로드되면 자동으로 오디오를 재생합니다.
- loop – 오디오가 끝나면 처음부터 반복 재생합니다.
- muted – 오디오를 음소거 상태로 초기화합니다.
- preload – 페이지 로드 시 오디오 파일을 미리 불러올지 여부를 지정합니다(auto, metadata, none).
또한 브라우저마다 지원하는 오디오 형식이 다를 수 있으므로, 여러 개의 <source> 요소를 사용하면 호환성을 높일 수 있습니다.