HTML <audio> 태그 – 올바른 이해와 사용 방법

`<audio>` 태그의 정의 및 사용법

<audio> 태그는
오디오 콘텐츠를 웹 페이지에 삽입할 때 사용합니다.

이 태그는 오디오 파일을 재생할 수 있는 미디어 플레이어를 제공하며,
다양한 속성을 활용하여 오디오의 재생 방식과 사용자 경험을 제어할 수 있습니다.

HTML

<!-- 단일 오디오 파일 작성법 (태그에 직접 src 속성 사용) -->
<audio src="melody.mp3" controls></audio>

<!-- 여러 형식의 오디오 파일 작성법 (source 태그 사용) -->
<audio controls>
    <source src="melody.mp3" type="audio/mpeg">
    <source src="melody.wav" type="audio/wav">
</audio>

두 가지 작성 방법

<audio> 태그는 두 가지 방법으로 작성할 수 있습니다.

단일 오디오 파일을 사용할 때 src 속성을 태그에 직접 설정하는 방법
여러 형식의 오디오 파일을 지원하려면 <source> 태그를 사용하여 각 파일을 별도로 지정하는 방법

HTML <audio> 태그는 두 가지 방법으로 작성할 수 있습니다.

<!-- 단일 오디오 파일 작성법 (태그에 직접 src 속성 사용) -->
<!-- 오디오 파일을 직접 지정하는 간단한 방법 -->
<audio src="melody.mp3"></audio>

<!-- 여러 형식 제공 작성법 (source 태그 사용) -->
<!-- 여러 형식의 오디오 파일을 제공하여
     오디오 파일 형식에 대한 브라우저 호환성을 높이는 방법 -->
<audio>
    <source src="melody.mp3" type="audio/mpeg">
    <source src="melody.wav" type="audio/wav">
</audio>

참고
단일 오디오 파일의 경우에도 <source> 태그를 사용할 수 있습니다.
이 방식은 파일 형식 간의 효율적인 선택을 위해 유용하며, 각 형식의 장점에 맞는 최적화를 할 수 있습니다. 예를 들어, mp3는 널리 사용되고 호환성이 좋지만, wav는 같은 음질을 유지하면서도 용량이 더 커서 느린 로딩을 지원할 수 있습니다.

두 가지 작성 방법에 대한 자세한 설명은 src 속성에서 다룹니다.

관련 속성 사용하기

<audio> 태그는 모든 글로벌 속성을 사용할 수 있으며,
이 태그에 특화된 관련 속성들도 있습니다.

audio 태그의 관련 속성
속성	설명
`src`	삽입하려는 오디오 파일의 경로(URL)를 지정합니다.
`controls`	사용자 인터페이스(재생, 일시 정지, 음소거 버튼 등)를 표시합니다.
`autoplay`	페이지 로드 시 자동으로 오디오를 재생합니다. 이 속성만 있다고 해서 모든 브라우저에서 오디오가 자동 재생한다는 의미는 아닙니다. 브라우저 벤더의 자동 재생 정책을 따릅니다. 대부분의 브라우저에서 지원하지 않습니다.
`muted`	오디오를 음소거 상태로 설정합니다.
`loop`	오디오 재생이 끝나면 다시 처음부터 재생합니다. 이 과정을 무한 반복합니다.
`preload`	오디오의 데이터를 어떻게 미리 로드할지 지정합니다.
`crossorigin`	`src`로 지정한 오디오 파일이 외부 출처(다른 도메인)의 리소스인 경우 현재 웹 페이와의 상호작용을 할 수 있도록 CORS(교차 출처 리소소 공유, Cross-Origin Resource Sharing)를 설정합니다.

`src` 속성

삽입하려는 오디오 파일의 경로(URL)를 지정합니다.

지원하는 오디오 파일 형식

브라우저에서 지원하는 오디오 파일 형식(format)은 mp3, wav 두 가지입니다.

지원하는 오디오 파일 형식과 설명
오디오 파일 형식	설명
`mp3`	널리 사용되는 형식으로 손실 압축 형식(Lossy), 즉 오디오 데이터를 압축하여 파일 크기를 줄입니다. 압축 과정에서 일부 음질은 손실되지만, 파일 크기는 크게 줄어듭니다. 인터넷 스트리밍이나 모바일 기기에서 사용하기 적합합니다.
`webm`	비압축 형식(Lossless), 즉 원본 오디오 데이터를 그대로 저장합니다. 파일 크기가 큽니다. 하지만, 음질이 원본 그대로 유지되므로, 오디오 품질이 가장 높습니다. 주로 전문 오디오 작업이나 고음질 음원에서 사용됩니다.

지원하는 오디오 파일 형식에 대한 브라우저 호환성을 참조하세요.

오디오 파일 형식의 브라우저 호환성
오디오 파일 형식	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`mp3`	예	예	예	예
`wav`	예	예	예	예

caniuse.com에서 더 자세한 정보를 확인해 보세요.

오디오 파일 경로 지정하기

src 속성은 두 가지 방법으로 작성할 수 있습니다.

단일 오디오 파일을 사용할 때 src 속성을 <audio> 태그에 직접 설정하는 방법
여러 형식의 오디오 파일을 지원하려면 <source> 태그를 사용하여 각 파일을 별도로 src 속성으로 지정하는 방법

src 속성으로 <audio> 태그에 오디오 파일의 경로를 직접 지정할 수 있습니다.
또한, 오디오 파일 형식에 따른 브라우저 호환성을 고려해야 할 경우, 여러 형식을 제공하는 방법이 필요할 수 있습니다. 이때 <source> 태그를 사용하여 다른 형식의 오디오 파일을 지정할 수 있습니다.

HTML src 속성은 두 가지 방법으로 작성할 수 있습니다.

<!-- audio 태그에 직접 src 속성 사용 -->
<!-- 오디오 파일을 직접 지정하는 간단한 방법 -->
<audio src="example.mp3"></audio>

<!-- source 태그에 src 속성 사용 -->
<!-- 여러 형식의 오디오 파일을 제공하여
     오디오 파일 형식에 대한 브라우저 호환성을 높이는 방법 -->
<audio>
    <source src="example.mp3" type="audio/mpeg">
    <source src="example.wav" type="audio/wav">
</audio>

첫 번째 예제에서는 src 속성으로 단일 오디오 파일을 지정하며, 두 번째 예제에서는 <source> 태그를 사용하여 여러 형식의 오디오 파일을 제공하고 있습니다. 이를 통해, 브라우저가 가장 적합한 형식을 선택하여 재생할 수 있도록 할 수 있습니다.

`<audio>` 태그에 `src` 속성 사용하는 방법

브라우저에서 지원하는 오디오 파일 형식(format) 중에서 mp3, wav 중 단일 오디오 파일을 지정할 경우 사용합니다.

`<source>` 태그에 `src` 속성 사용하는 방법

브라우저에서 지원하는 오디오 파일 형식(format) 중에서 mp3, wav 두 가지 형식을 모두 지정할 경우 사용합니다.

오디오 파일마다 <source> 태그에 src 속성으로 지정합니다.
브라우저는 여러 출처일 경우 출처를 작성한 순서에 따라 지원 가능한 파일을 사용하므로, mp3와 비교할 때 일반적으로 wav은 동일한 품질에서 용량이 더 커서 느린 로딩을 지원하기 때문에, 가능한 한 mp3 형식을 먼저 작성하는 것이 좋습니다.

이때, 선택적으로 type 속성을 사용하여 각 오디오 파일의 미디어 타입을 명시할 수 있습니다.
이렇게 하면 브라우저가 모든 오디오 파일 형식을 지원하는 것은 아니므로, 특정 형식이 필요하다는 정보를 제공하여 브라우저가 지원하는 오디오 파일을 빠르게 선택하고 최적의 성능을 제공하는 데 도움을 줍니다.

다음은 브라우저가 지원하는 오디오 파일 형식에 해당하는 미디어 타입입니다.

지원하는 오디오 파일 형식의 미디어 타입
오디오 파일 형식	미디어 타입
`mp3`	`audio/mpeg`
`wav`	`audio/wav`

<audio> 태그에 src 속성을 사용할 때에는 type 속성을 사용하지 않습니다. 단일한 파일 형태만을 지정하기 때문에 브라우저에 특정 형식이 필요하다는 정보를 제공할 필요가 없습니다.

단일 오디오 파일의 경우에도 <source> 태그를 사용할 수 있습니다. 단일 오디오 파일의 경우에는 일반적으로 <audio> 태그에 직접 src 속성만 사용하는 것이 더 간단하고 직관적입니다.

`controls` 속성

지정하면 사용자 인터페이스(재생, 일시 정지, 음소거 버튼 등)를 표시합니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

사용자 인터페이스는 브라우저와 운영 체제에 따라 다르게 표시될 수 있습니다.

controls 속성을 지정하지 않으면 사용자 인터페이스는 표시되지 않습니다.

`autoplay` 속성

페이지 로드 시 자동으로 오디오를 재생합니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

이 속성만 있다고 해서 모든 브라우저에서 오디오가 자동 재생한다는 의미는 아닙니다. 브라우저 벤더(브라우저 제조사)의 자동 재생 정책을 따릅니다.
대부분의 브라우저에서 지원하지 않습니다.

이것은 의도치 않은 광고 재생 등으로 인해 사용자들에게 불편함을 줄 수 있으며, 자동 재생되는 오디오로 인해 사용자들의 데이터를 소모하고 네트워크 대역폭을 차지할 수 있습니다. 특히 모바일 장치에서는 이러한 데이터 소모가 더 큰 문제가 될 수 있으며, 성능 저하를 유발할 수 있습니다.

대부분의 브라우저 정책에서는 오디오의 경우 사용자가 재생 버튼을 누르지 않는 이상 자동재생은 불가능한 상태입니다.

`muted` 속성

오디오를 음소거 상태로 설정합니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

`loop` 속성

오디오 재생이 끝나면 다시 처음부터 재생합니다. 이 과정을 무한 반복합니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

`preload` 속성

오디오 파일을 효율적으로 로드하는 방식이 중요합니다. 이를 위해 preload 속성이 활용됩니다.

preload 속성은 오디오 파일을 얼마나 미리 로드할지에 대한 힌트를 브라우저에 제공합니다.
이 속성의 값에 따라 브라우저는 오디오 데이터를 로드하는 방식을 결정합니다.

오디오 파일의 용량과 사용자 경험

오디오 파일은 일반 이미지보다 용량이 크므로, 이를 효율적으로 로드하는 방식이 중요합니다. preload 속성은 개발자가 브라우저에 미리 로드 전략을 제안하여 사용자 경험을 최적화하는 데 도움을 줍니다.

유의할 점!
브라우저가 반드시 preload 속성의 값을 따르는 것은 아닙니다. 이 속성은 단순히 힌트를 제공할 뿐이며, 브라우저는 네트워크 상태나 장치 성능에 따라 이를 무시할 수 있습니다.

이 속성은 다음 값들 중 하나를 가질 수 있습니다. 기본값은 브라우저마다 정책에 따라 다릅니다. (명세서에서는 metadata로 설정하라고 권장합니다.)

preload 속성의 값
`none`	오디오 데이터를 미리 로드하지 않습니다. 즉, 브라우저에게 불필요한 트래픽을 최소화하려는 의도를 전달합니다. 서버 리소스를 절약하거나 초기 로딩 시간을 줄이려는 경우에 사용합니다.
`metadata`	오디오의 메타데이터(예: 길이)만 로드합니다. 사용자가 오디오를 재생하지 않을 가능성이 있지만, 기본 정보를 미리 제공하여 사용자 경험을 향상시키는 데 중점을 둡니다.
`auto`	브라우저가 판단하여 데이터를 미리 로드합니다. 필요에 따라 전체 오디오 데이터가 다운로드될 수도 있습니다. 즉, 브라우저는 사용자 경험을 최우선으로 고려하여 최적의 동작을 결정합니다.
빈 문자열(`""`)	`auto`와 동일합니다.

예제

위 코드 예제는 메타데이터(예: 길이)만 로드하여 사용자가 재생 버튼을 클릭하기 전에 큰 파일을 미리 다운로드하지 않도록 합니다.

`crossorigin` 속성

crossorigin 속성은 src로 지정한 오디오 파일이 외부 출처(다른 도메인)의 리소스인 경우 현재 웹 페이와의 상호작용을 할 수 있도록 CORS(교차 출처 리소소 공유, Cross-Origin Resource Sharing)를 설정합니다.

허용되는 값은 다음과 같습니다.

crossorigin 속성의 값
`anonymous`	교차 출처 리소소 공유 체계 요청 시 인증 정보를 보내지 않도록 설정합니다.
`use-credentials`	교차 출처 리소소 공유 체계 요청 시 인증 정보를 보내도록 설정합니다. (예: cookie, certificate, HTTP Basic 인증)

crossorigin 또는 crossorigin=""처럼 빈 값을 할당하는건 anonymous와 동일합니다.

예제

HTML

<!-- 동일 출처(같은 도메인)의 리소스인 경우 -->
<audio src="example.mp3"></audio>

<!-- 외부 출처(다른 도메인)의 리소스인 경우 -->
<audio src="https://example.com/audio.mp3" crossorigin="anonymous"></audio>
<audio src="https://example.com/secure-audio.mp3" crossorigin="use-credentials"></audio>

활용 예제

이 예제는 <audio> 태그와 <figure>, <figcaption> 태그가 어떻게 함께 사용되어, 오디오 콘텐츠와 그 설명을 잘 결합하는지를 보여주는 좋은 예입니다.

CSS

figure {
    margin: 0 auto;
    color: #fff;
    text-align: center;
    padding: 1.6em;
    background-color: #000;
    border-radius: 1.5em;
}
figcaption {
    margin-bottom: 1em;
}
audio {
    max-width: 100%;
}

브라우저 호환성

audio 태그의 데스크탑 브라우저 호환성
태그와 속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<audio>`	3	12	3.5	3.1
`autoplay`	지원하지 않음	지원하지 않음	지원하지 않음	지원하지 않음
`controls`	3	12	3.5	3.1
`crossorigin`	33	18	74	10
`loop`	3	12	3.5	3.1
`muted`	15	18	11	6
`preload`	3	12	4	3.1
`src`	3	12	3.5	3.1

명세서

audio 태그의 명세서 사양
명세서 사양
`<audio>`	HTML Standard #the-audio-element

HTML <audio> 태그 – 올바른 이해와 사용 방법

`<audio>` 태그의 정의 및 사용법

두 가지 작성 방법

관련 속성 사용하기

`src` 속성

지원하는 오디오 파일 형식

오디오 파일 경로 지정하기

`<audio>` 태그에 `src` 속성 사용하는 방법

`<source>` 태그에 `src` 속성 사용하는 방법

`controls` 속성

`autoplay` 속성

`muted` 속성

`loop` 속성

`preload` 속성

오디오 파일의 용량과 사용자 경험

예제

`crossorigin` 속성

예제

활용 예제

브라우저 호환성

명세서

참고문헌

같이 보기

<audio> 태그의 정의 및 사용법

두 가지 작성 방법

관련 속성 사용하기

src 속성

지원하는 오디오 파일 형식

오디오 파일 경로 지정하기

<audio> 태그에 src 속성 사용하는 방법

<source> 태그에 src 속성 사용하는 방법

controls 속성

autoplay 속성

muted 속성

loop 속성

preload 속성

오디오 파일의 용량과 사용자 경험

예제

crossorigin 속성

예제

활용 예제

브라우저 호환성

명세서

참고문헌

같이 보기

`<audio>` 태그의 정의 및 사용법

`src` 속성

`<audio>` 태그에 `src` 속성 사용하는 방법

`<source>` 태그에 `src` 속성 사용하는 방법

`controls` 속성

`autoplay` 속성

`muted` 속성

`loop` 속성

`preload` 속성

`crossorigin` 속성