audio

HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는
<audio> 태그를 사용합니다. 이때 대부분의 브라우저에서 mp3
파일을 지원하기 때문에 mp3 파일을 사용하는 것이 좋습니다.

기본형

<audio autoplay controls loop muted preload="xxx">
  <source src="xxx" type="xxx">
  이 문장은 사용자의 웹 브라우저가 audio 태그를 지원하지 않을 때 나타납니다!
</audio>

• autoplay : 오디오를 자동 재생합니다.


• 
  controls : 재생, 정지, 볼륨, 진행바 등 컨트롤 막대를
  표시합니다.
  


• loop : 오디오를 반복 재생합니다.


• muted : 오디오를 음소거합니다.


• 
  preload : 오디오를 재생하기 전에 파일의 내용을 미리
  다운로드하여 불러올지를 정합니다.
  


• 
  source
  
  
  
  • 
    src : 경로를 입력합니다. 웹브라우저가 가장 많이 지원하는 형식은
    MP3입니다.
    
  
  
  • 
    type : 타입을 입력합니다. 만약 MP3 파일이라면 audio/mp3라고
    적습니다.
    
  
  
  
  

예제

• mp3 오디오를 HTML에 삽입합니다.


• 페이지 로드되면 오디오가 자동 재생되고, 반복하여 재생됩니다.


• 크기, 배치 등은 CSS를 이용하는 것이 좋습니다.

<audio controls>
  <source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>

<audio controls muted>
  <source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>

<audio controls loop>
  <source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>

<audio controls loop muted>
  <source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>

audio {
  display: block;
  margin: 20px auto;
}