웹사이트에 배경 오디오/음악을 추가하는 방법

HTML

웹사이트에 배경 음악/오디오를 추가하려면 HTML 오디오 요소(<audio>...</audio> ).

사용자가 웹사이트를 방문하는 즉시 백그라운드에서 재생하려는 오디오 파일이 있다고 가정해 보겠습니다. 다음은 이를 수행하는 데 필요한 일반 HTML 코드입니다.

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

<audio> 요소의 src 속성은 내부 및 외부 오디오 소스를 모두 값으로 허용합니다.

autoplay에 주목하세요. 기인하다. 사용자가 웹페이지에 들어가는 즉시 오디오 재생을 시작하려면 이 작업이 필요합니다.

데모: 예를 들어 보려면 컴퓨터/헤드폰의 볼륨을 낮추고 이 데모를 클릭하세요.

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

이 튜토리얼에서는 WAV 형식을 사용하므로 type="audio/wav"를 추가했습니다. 위의 요소에 대한 속성입니다.

오디오 요소 속성

다음은 <audio>에 내장된 몇 가지 유용한 속성입니다. 요소를 제공하고 세분화된 제어를 제공합니다.

루프 배경 오디오

배경 오디오를 반복하려면 loop를 추가할 수 있습니다. 속성:

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

배경 오디오 음소거

배경 오디오를 음소거하려면 mute를 추가할 수 있습니다. 속성:

<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>

이제 사용자가 오디오 파일을 듣고 싶다면 재생을 클릭할 수 있습니다.

오디오 형식에 대한 브라우저 지원

• MP3는 모든 브라우저에서 지원됩니다.
• WAV는 Edge/IE를 제외한 모든 브라우저에서 지원됩니다.
• OGG는 Edge/IE 및 Safari를 제외한 모든 브라우저에서 지원됩니다.

2020년 7월 기준.

도움말: 추가 <source> 추가 <audio>로 최종 사용자가 기본 파일 형식을 지원하지 않는 브라우저를 사용하는 경우:

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

이제 최종 사용자의 브라우저가 WAV 형식을 지원하지 않으면 대신 MP3 소스를 재생합니다.