[Html] audio 태그 사용법 & 예제 총정리

HTML5에 새로 추가된 <audio> 태그
오디오나 비디오와 같은 멀티미디어를 직접 재생할 수 없었던 과거에는 웹 브라우저에서 플러그인(plug-in) 프로그램을 사용했습니다. 대표적으로 flash가 있죠. 그래서 과거에는 인터넷에서 음악을 듣거나 온라인 강의를 실청하려고 할 때 특정 프로그램을 설치하라는 메시지가 뜨곤 했는데 HTML5에서는 이런 플러그인 없이도 멀티미디어를 사용할 수 있는 태그들이 추가되었습니다.

 

 audio 태그 사용법 

<audio src="오디오 파일 경로"></audio>

HTML5에서 배경음악이나 효과음 등 오디오를 삽입할 때는 <audio> 태그를 사용합니다. 웹 사이트에 특히 bgm을 설치할 때 많이 사용합니다.

 

audio 태그에서 사용할 수 있는 파일

확장자	설명
mp3	대부분의 음원에서 사용되며 Moving Picture Experts Group에 의해 개발되었습니다. MPEG-1의 오디오 규격으로 개발된 손실 압축형 파일 형식입니다.
wav	IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식입니다.
ogg	Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다. 라이센스 없이 무료이므로 게임등에서 많이 사용합니다.

 

audio 태그에서 사용할 수 있는 속성

속성	설명
controls	웹 화면에 컨트롤 막대를 표시합니다. 컨트롤 막대에는 재생/멈춤, 진행바, 볼륨 등이 있습니다.
autoplay	오디오를 자동 재생합니다.
loop	오디오를 반복해서 재생합니다.
muted	오디오는 재생하지만 소리는 음소거합니다.
preload	재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해서 준비합니다.

 

controls (재생 바 생성)

See the Pen 오디오 태그 사용법1 by wjdxo513 (@wjdxo513) on CodePen.

 

audio태그를 단독으로 사용하면 화면상에는 보이지 않고 배경음악으로 재생됩니다. 그렇기에 사용자가 오디오를 제어하지는 못하는데요. 하지만 위에서 설명하는 controls 속성을 같이 써준다면 재생 바가 생성되어 사용자가 음악을 제어할 수 있습니다.

 

 

autoplay (자동 재생)

See the Pen 오디오 태그 사용법2 by wjdxo513 (@wjdxo513) on CodePen.

 

autoplay 속성을 사용하면 오디오가 실행될 준비가 끝나는 대로 자동으로 실행됩니다.

 

 

loop (반복 재생)

See the Pen 오디오 태그 사용법3 by wjdxo513 (@wjdxo513) on CodePen.

 

loop 속성을 사용하면 오디오를 계속해서 반복 재생합니다.

 

 

muted (음소거)

See the Pen 오디오 태그 사용법4 by wjdxo513 (@wjdxo513) on CodePen.

 

muted 속성을 사용하면 오디오가 음소거로 초기 세팅됩니다.

 

 

preload (오디오 파일 로드하기)

See the Pen 오디오 태그 사용법5 by wjdxo513 (@wjdxo513) on CodePen.

 

preload 속성은 페이지가 로드될 때 오디오 파일이 같이 로드되어야 하는지 여부와 그 방법을 명시합니다. 단 autoplay 속성이 적용되어있으면 preload 속성은 적용되지 않습니다.

 

 

 source 태그 사용법 (여러개의 오디오 파일형식 지정하기) 

<audio controls>
    <source src="오디오 파일 경로" type="audio/ogg">
    <source src="오디오 파일 경로" type="audio/mpeg">
    audio 오류 시 대체 텍스트
</audio>

• src : 미디어 파일의 경로를 지정합니다.
• type : 웹 브라우저가 해당 오디오 파일을 재생할 수 있는지 확인하도록 오디오 파일의 유형을 알려줍니다.
• codecs : 코덱을 지정합니다.

브라우저에 따라 지원하는 오디오 파일 형식이 다르기 때문에 한가지 형식만 사용했을 경우 일부 오래된 브라우저에서는 작동을 안할 수 있습니다. 사용자의 브라우저 환경을 모두 고려한다면 최신 브라우저와 이전 브라우저도 모두 오디오를 재생할 수 있도록 여러개의 파일도 함께 지정해주어야 합니다. 이렇게 여러 형식의 오디오 파일을 함께 사용하려면 <audio> 태그와 <source> 태그를 함께 사용해 여러개의 파일을 지정해야 합니다. <source> 태그에서는 오디오 파일의 경로를 지정하는 src 속성과 오디오 파일의 형식을 알려주는 type속성을 명시합니다.

 

source 태그의 type 속성을 입력하지 않으면?
웹 브라우저가 재생이 가능한 파일인지 확인하므로 트래픽이 낭비됩니다. 따라서 type 속성은 꼭 지정해주도록 합시다.

 

source 태그 예제

See the Pen 오디오 태그 사용법6 by wjdxo513 (@wjdxo513) on CodePen.

 

웹 브라우저에서 지원하는 오디오 파일 형식

웹 브라우저에서 사용할 수 있는 오디오 파일 형식은 MP3, OGG, WAV와 같이 3가지가 있습니다.  익스플로러에서는 MP3 파일 형식만 지원하며, 사파리에서는 MP3와 OGG 파일 형식을 지원합니다. 파이어폭스와 오페라는 OGG와 WAV 파일 형식을 지원하며  크롬은 MP3, OGG, WAV 모든 파일 형식을 지원합니다. 웹 문서에서 비디오 파일을 사용할 때 해당 브라우저에서 지원하는 오디오 파일 형식을 확인해야 합니다.