audio element - by. UXKM

2025-05-16

요약 설명
<audio> 요소는 웹 페이지에 오디오(음성, 음악, 효과음 등)를 삽입하고 재생할 수 있도록 하는 시맨틱 태그로, 브라우저에서 추가 플러그인 없이 사운드를 직접 처리할 수 있게 해줍니다.
src 속성 또는 <source> 요소를 통해 음원 파일을 지정하며, controls, autoplay, loop, muted 등의 속성으로 재생 방식과 사용자 조작 기능을 설정할 수 있습니다. 접근성을 고려해 자막(track 요소)을 포함하거나 텍스트 설명을 제공하는 것이 권장됩니다.

주요 역할 및 특징

웹페이지에서 오디오 파일을 재생 가능
- <audio> 요소를 사용하면 브라우저에서 직접 오디오를 재생할 수 있습니다.
- src 속성을 사용하거나 <source> 요소를 활용하여 여러 형식의 오디오를 제공할 수 있습니다.
- 별도의 플러그인(예: Flash)을 설치할 필요 없이 HTML5에서 기본 지원합니다.
브라우저 기본 컨트롤 UI 제공
- controls 속성을 사용하면 재생, 일시 정지, 볼륨 조절 등의 기본 UI를 제공합니다.
- 별도의 JavaScript를 사용하여 사용자 정의 컨트롤을 만들 수도 있습니다.
자동 재생 및 반복 재생 가능
autoplay, loop, muted 등의 속성을 설정하여, 자동 재생, 반복 재생, 음소거 등의 기능을 추가할 수 있습니다.
다양한 비디오 포맷 지원
브라우저별 지원이 다르므로, 여러 개의 <source> 태그를 사용하여 다양한 형식(mp3, ogg, wav)을 제공할 수 있습니다.
대체 콘텐츠 제공 가능
<audio> 요소를 지원하지 않는 브라우저에서는 fallback text(예: 다운로드 링크)를 제공할 수 있습니다.

CSS 기본 값

<audio> 요소는 기본적으로 인라인 레벨 요소입니다.

							audio {
								display: inline;
							}

기본 문법

							<audio src="audio.mp3" controls>
								브라우저가 오디오 태그를 지원하지 않습니다.
							</audio>

속성

`<audio>` 속성 요약

속성명
설명

src [필수]

재생할 오디오 파일의 경로를 지정합니다.
controls

사용자에게 재생/일시정지 등의 기본 컨트롤 UI를 제공합니다.
autoplay

페이지 로드 시 자동으로 오디오를 재생합니다.
loop

오디오가 끝나면 자동으로 다시 재생됩니다.
muted

오디오의 소리를 음소거 상태로 시작합니다.
preload

오디오 데이터를 미리 로드하는 방식을 설정합니다.
crossorigin

다른 도메인에서 제공되는 오디오 파일을 로드할 때 사용됩니다.

[src] 필수 <audio src="파일 경로(URL)">

재생할 오디오 파일의 경로(URL)를 지정합니다. 여러 개의 <source> 요소를 사용할 수도 있습니다.

								<!-- 단일 파일 경로 -->
								<audio src="audio.mp4"></audio>

								<!-- 여러개의 파일 경로(다양한 브라우저 대응) -->
								<audio>
									<source src="audio.ogg" type="video/ogg">
									<source src="audio.mp3" type="video/mpeg">
								</audio>

[controls] Boolean - 선택 사항 <audio controls>

사용자가 조작할 수 있는 기본 컨트롤(재생, 일시정지, 볼륨 조절 등)을 표시합니다.
값 없이 속성만 선언하면 컨트롤이 활성화됩니다.

								<audio src="audio.mp3" controls></audio>

[autoplay] Boolean - 선택 사항 <audio autoplay>

페이지 로드 시 자동으로 오디오 재생합니다.
<video> 요소와 달리 <audio> 요소에서는 autoplay 속성을 사용할 때 muted 속성이 필수는 아닙니다. 그러나 브라우저 정책에 따라 자동 재생이 제한될 수 있습니다.

								<audio src="audio.mp3" autoplay></audio>

[loop] Boolean - 선택 사항 <audio loop>

오디오가 끝나면 자동으로 다시 처음부터 재생됩니다.

								<audio src="audio.mp3" loop></audio>

[muted] Boolean - 선택 사항 <audio muted>

오디오의 기본 상태를 음소거로 설정합니다.

								<audio src="audio.mp3" muted></audio>

[preload] 선택 사항 <audio preload="값">

오디오 데이터를 미리 로드하는 방식을 지정합니다.

값 :: auto : 브라우저가 필요하다고 판단하면 전체 오디오를 미리 로드; metadata : 오디오의 메타데이터(길이, 썸네일 등)만 로드; none : 오디오를 미리 로드하지 않음 (사용자가 재생할 때 로드)

								<audio src="audio.mp3" preload="metadata"></audio>

[crossorigin] 선택 사항 <audio crossorigin="값">

다른 도메인에서 제공되는 오디오 파일을 로드할 때 사용됩니다.

값 :: anonymous : 인증 정보 없이 요청; use-credentials : 사용자 인증 정보 포함

								<audio src="https://example.com/audio.mp3" crossorigin="anonymous"></audio>

예제

여러 형식의 오디오 제공 (<source> 사용)

								<audio controls>
									<source src="audio.mp3" type="audio/mpeg">
									<source src="audio.ogg" type="audio/ogg">
									<source src="audio.wav" type="audio/wav">
									브라우저가 오디오 태그를 지원하지 않습니다. <a href="audio.mp3">오디오 다운로드</a>
								</audio>

자동 재생 및 반복 재생 설정

JavaScript를 활용한 오디오 제어

접근성을 고려한 aria-label 활용

								<audio src="podcast.mp3" controls aria-label="웹 접근성 관련 팟캐스트"></audio>

주의사항

모든 브라우저가 동일한 오디오 포맷을 지원하지 않으므로, mp3, ogg, wav 등을 함께 제공하는 것이 좋습니다.
(MP3는 대부분의 브라우저에서 지원되지만, Ogg는 일부 브라우저에서만 지원됩니다.)
오디오 파일이 크면 페이지 로딩 속도에 영향을 줄 수 있습니다.
preload="metadata"를 사용하여 필요할 때만 로드되도록 설정하는 것이 좋습니다.

웹에서 사용되는 오디오 파일 형식 정리

요약 설명
웹에서 사용되는 오디오 파일 형식은 파일 확장자, 코덱, 브라우저 지원 여부 등에 따라 구분됩니다.
오디오 파일 형식은 단순히 확장자만이 아니라 코덱(Codec) 에 따라서도 지원 여부가 달라질 수 있습니다.

주요 비디오 파일 형식

확장자
형식 (컨테이너)
주요 코덱
지원 브라우저

.mp3

MPEG-1 Audio Layer 3

MP3

✅ 모든 최신 브라우저 지원
.ogg

Ogg

Vorbis, Opus

✅ 크롬, 파이어폭스, 오페라, 엣지 (❌ 사파리 제한적 지원)
.wav

Waveform Audio

PCM, ADPCM

✅ 모든 최신 브라우저 지원 (파일 크기 큼)
.aac

Advanced Audio Codec

AAC

✅ 사파리, iOS에서 최적화 (❌ 일부 브라우저 미지원)
.flac

Free Lossless Audio Codec

FLAC

✅ 크롬, 파이어폭스, 오페라 (❌ 사파리 미지원)

비디오 파일 형식 상세 설명

✅ MP3 (`.mp3`)

MP3는 웹 오디오 파일 형식으로 가장 널리 사용되며, 기본적으로 <audio> 요소에서 추천됩니다.

코덱: MP3 (MPEG-1 Audio Layer 3)

장점: 모든 최신 브라우저에서 지원됩니다.; 높은 압축률을 유지하면서도 음질이 우수합니다.; 스트리밍 및 다운로드에 최적화되어 있습니다.

단점: 일부 최신 코덱(Opus, AAC)보다 압축 효율이 다소 낮을 수 있습니다.

지원 브라우저: 크롬, 파이어폭스, 사파리, 엣지, 오페라, 모바일 브라우저 모두 지원

									<audio controls>
										<source src="audio.mp3" type="audio/mpeg">
									</audio>

✅ OGG (`.ogg`)

오픈 소스 오디오 파일 형식으로, 주로 Vorbis 또는 Opus 코덱을 사용합니다. MP3와 함께 제공하면 브라우저 호환성을 높일 수 있습니다.

코덱: Vorbis, Opus

장점: 무료 오픈 소스 형식으로 라이선스 문제 없이 사용할 수 있습니다.; Opus 코덱을 사용하면 MP3보다 더 나은 음질과 압축 효율을 제공합니다.

단점: iOS 사파리에서 기본적으로 지원되지 않습니다.

지원 브라우저: 크롬, 파이어폭스, 엣지, 오페라 / ❌ 사파리에서는 제한적 지원

									<audio controls>
										<source src="audio.ogg" type="audio/ogg">
										<source src="audio.mp3" type="audio/mpeg"> <!-- MP3 백업 -->
									</audio>

✅ WAV (`.wav`)

비압축 오디오 파일 형식으로 고품질 사운드를 제공합니다. 주로 효과음에 적합하며, 음악 스트리밍 용도로는 권장되지 않습니다.

코덱: PCM, ADPCM

장점: 오디오 품질이 가장 뛰어납니다(무손실).; 모든 최신 브라우저에서 지원됩니다.

단점: 압축되지 않은 데이터이므로 파일 크기가 매우 큽니다.; 스트리밍보다는 다운로드 또는 효과음(시스템 사운드, 효과음) 용도로 적합합니다.

지원 브라우저: 크롬, 파이어폭스, 엣지, 오페라

									<audio controls>
										<source src="audio.wav" type="audio/wav">
									</audio>

✅ AAC (`.aac`)

MP3보다 더 효율적인 오디오 포맷으로, 특히 애플 기기에서 최적화되어 있습니다. AAC는 MP3보다 효율적이지만, 모든 브라우저에서 MP3처럼 보편적으로 지원되지 않으므로 백업용으로 사용하는 것이 좋습니다.

코덱: AAC (Advanced Audio Codec)

장점: MP3보다 더 높은 음질을 유지하면서도 압축 효율이 좋습니다.; 사파리 및 iOS 환경에서 최적화되어 있습니다.

단점: 일부 브라우저(특히 구형 브라우저)에서 지원되지 않을 수 있습니다.

지원 브라우저: 크롬, 파이어폭스, 사파리(& iOS) / ❌ 일부 브라우저 미지원

✅ FLAC (`.flac`)

FLAC는 무손실 오디오 포맷으로, 고음질 오디오를 저장하는 데 사용됩니다. FLAC는 웹보다는 고음질 음원을 제공하는 서비스(예: Tidal, Bandcamp)에서 더 많이 사용됩니다.

코덱: FLAC (Free Lossless Audio Codec)

장점: WAV보다 압축률이 높으면서도 무손실 오디오를 제공합니다.; 고음질 스트리밍 서비스에서 많이 사용됩니다.

단점: 파일 크기가 크며, 일반적인 웹 오디오 스트리밍에는 적합하지 않습니다.; 사파리에서는 지원되지 않습니다.

지원 브라우저: 크롬, 파이어폭스, 오페라 / ❌ 사파리는 미지원