HTML audio 태그로 웹사이트에 배경 음악 추가하는 방법

HTML <audio> 요소와 다양한 속성을 활용해 웹사이트에 배경 오디오 또는 음악 파일을 추가하는 방법을 알아보세요.

웹사이트에 배경 음악이나 오디오를 넣고 싶다면 HTML 오디오 요소(<audio>...</audio>)를 사용하면 됩니다.

예를 들어, 사용자가 웹사이트에 접속하는 즉시 백그라운드에서 재생하고 싶은 오디오 파일이 있다고 가정해 보겠습니다. 이때 필요한 기본적인 HTML 코드는 다음과 같습니다.

<audio autoplay>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

<audio> 요소의 src 속성은 내부 경로와 외부 URL 어느 쪽이든 오디오 소스로 지정할 수 있습니다.

여기서 주목할 부분은 autoplay 속성입니다. 사용자가 웹페이지에 들어오는 즉시 오디오가 자동으로 재생되길 원한다면 이 속성이 반드시 필요합니다.

데모: 예시 사운드를 직접 확인해 보려면 컴퓨터나 헤드폰 볼륨을 미리 낮춘 뒤 데모를 클릭해 보세요.

HTML에서 지원하는 오디오 형식은 MP3, WAV, OGG 세 가지입니다. <audio> 요소에서는 type 속성으로 형식을 지정합니다.

이 튜토리얼에서는 WAV 형식을 사용하기 때문에 앞서 살펴본 <source> 요소에 type="audio/wav" 속성을 추가했습니다.

오디오 요소의 주요 속성

<audio> 요소에는 오디오를 세밀하게 제어할 수 있도록 유용한 내장 속성들이 여러 가지 마련되어 있습니다.

배경 오디오를 계속 반복 재생하려면 loop 속성을 추가하면 됩니다.

<audio autoplay loop>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

배경 오디오를 음소거 상태로 두려면 muted 속성을 추가합니다.

<audio muted>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

muted 속성은 언제 유용할까요? 웹페이지에서 오디오 요소 전체를 삭제하지 않고도 일시적으로 소리를 껐다가 나중에 다시 켜야 할 때 편리합니다.

재생·일시정지 같은 조작 버튼을 화면에 표시하려면 controls 속성을 사용하세요.

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

이제 사용자는 원할 때 재생 버튼을 눌러 오디오 파일을 들을 수 있습니다.

위 정보는 2020년 7월 기준입니다.

팁: 방문자의 브라우저가 기본 파일 형식을 지원하지 않는 경우에 대비해, <audio> 요소 안에 예비용 <source>를 하나 더 추가해 두는 것이 좋습니다.

<audio controls>
  <source src="your-audio-file.wav" type="audio/wav" />
  <source src="your-audio-file.mp3" type="audio/mpeg" />
</audio>

이렇게 하면 방문자의 브라우저가 WAV 형식을 지원하지 않을 때 자동으로 MP3 소스가 대신 재생됩니다.