HTML5 멀티미디어 - 오디오

과거에는 웹사이트에서 음악이나 효과음을 삽입하려면 플래시(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 오디오 태그를 활용해 웹사이트에 배경음악, 효과음 등을 추가해 보세요!