과거에는 웹사이트에서 음악이나 효과음을 삽입하려면 플래시(Flash) 같은 외부 플러그인을 사용해야 했습니다. 하지만 HTML5가 등장하면서 오디오(audio) 태그를 활용해 웹 표준 방식으로 오디오를 삽입할 수 있게 되었습니다.
이번 글에서는 HTML5 오디오 태그의 기본 사용법, 속성, 지원되는 파일 형식까지 자세히 알아보겠습니다!
HTML5 오디오 태그란?
HTML5에서는 <audio> 태그를 사용하여 웹 페이지에 오디오를 추가할 수 있습니다. 이 태그를 이용하면 별도의 플러그인 없이 브라우저에서 오디오를 직접 재생할 수 있습니다.
오디오 태그를 지원하는 브라우저
HTML5 <audio> 태그는 대부분의 최신 웹 브라우저에서 지원됩니다. 각 브라우저별 지원 버전은 다음과 같습니다.
요소 | Internet Explorer | Chrome | Firefox | Safari | Opera |
<audio> | 9.0 이상 | 4.0 이상 | 3.5 이상 | 4.0 이상 | 10.5 이상 |
HTML5 오디오 태그 사용법
기본적인 오디오 삽입
오디오를 삽입하는 가장 간단한 방법은 <audio> 태그를 사용하는 것입니다. 예제 코드와 함께 살펴보겠습니다.
<audio controls>
<source src="/media/sample_audio.ogg" type="audio/ogg">
<source src="/media/sample_audio.mp3" type="audio/mp3">
사용 중인 브라우저가 오디오 태그를 지원하지 않습니다.
</audio>
주요 속성 설명
오디오 태그에서 사용할 수 있는 속성들을 하나씩 살펴보겠습니다.
속성 | 설명 |
controls | 재생, 일시 정지, 볼륨 조절 등의 기능이 있는 컨트롤 바를 표시 |
autoplay | 페이지가 로드될 때 자동으로 오디오를 재생 |
loop | 오디오가 끝나면 자동으로 다시 재생 |
preload | 오디오 파일을 미리 로드할지 여부 설정 |
src | 오디오 파일의 경로 지정 |
오디오 태그 속성 예제
1. 자동 재생 (autoplay)
다음 코드를 사용하면 페이지가 열릴 때 오디오가 자동으로 재생됩니다.
<audio controls autoplay>
<source src="/media/sample_audio.mp3" type="audio/mp3">
사용 중인 브라우저가 오디오 태그를 지원하지 않습니다.
</audio>
주의: 일부 브라우저에서는 사용자의 동작 없이 자동 재생이 제한될 수 있습니다.
2. 반복 재생 (loop)
loop 속성을 사용하면 오디오가 끝난 후 자동으로 다시 시작됩니다.
<audio controls loop>
<source src="/media/sample_audio.ogg" type="audio/ogg">
</audio>
3. 오디오 파일 미리 로드 (preload)
오디오를 미리 로드할지 여부를 설정할 수 있습니다.
속성 값 | 설명 |
none | 오디오를 미리 로드하지 않음 (사용자가 재생 버튼을 누를 때까지 로드하지 않음) |
metadata | 오디오 파일의 정보(길이, 포맷 등)만 로드 |
auto | 페이지 로드 시 전체 오디오 파일을 미리 로드 |
예제 코드
<audio controls preload="auto">
<source src="/media/sample_audio.mp3" type="audio/mp3">
</audio>
HTML5에서 지원하는 오디오 파일 형식
HTML5에서는 특정 오디오 파일 형식만 공식적으로 지원합니다. 대표적인 형식과 각 브라우저별 지원 여부를 살펴보겠습니다.
파일 형식 | 미디어 타입 | Internet Explorer | Chrome | Firefox | Safari | Opera |
MP3 | audio/mp3 | V | V | V | V | V |
WAV | audio/wav | X | V | V | V | V |
Ogg | audio/ogg | X | V | V | X | V |
Tip: 웹 브라우저마다 지원하는 오디오 파일 형식이 다르므로 MP3와 Ogg 파일을 함께 제공하는 것이 가장 안전한 방법입니다.
오디오 태그의 주요 요소 정리
요소 | 설명 |
<audio> | 오디오 파일을 삽입하는 HTML 태그 |
<source> | 오디오 파일의 경로 및 형식을 지정 (브라우저가 지원하는 형식을 선택할 수 있도록 함) |
<source> 태그를 여러 개 사용하면 브라우저가 지원하는 첫 번째 형식을 자동으로 선택하여 재생합니다.
마무리
HTML5의 <audio> 태그를 활용하면 플러그인 없이도 웹에서 간편하게 오디오를 삽입하고 재생할 수 있습니다. 다양한 속성을 조합하여 원하는 대로 오디오를 제어할 수 있으며, MP3와 Ogg 파일을 함께 제공하면 대부분의 브라우저에서 문제없이 작동합니다.
이제 여러분도 HTML5 오디오 태그를 활용해 웹사이트에 배경음악, 효과음 등을 추가해 보세요!
'Web > html' 카테고리의 다른 글
HTML5 멀티미디어 - 비디오 (0) | 2025.02.06 |
---|---|
HTML5 멀티미디어 - 멀티미디어 파일 형식 (1) | 2025.02.05 |
HTML5 요소 - Input 요소의 속성 (0) | 2025.02.05 |
HTML5 요소 - Input 요소의 타입 (1) | 2025.02.04 |
HTML5 요소 - Input 요소 (3) | 2025.02.04 |