HTML audio , 오디오 컨텐츠를 웹페이지 넣을 수 있는 태그

AUDIO 태그란?

HTML에서 audio 태그를 사용하면 오디오 콘텐츠를 웹페이지에 삽입할 수 있습니다. 오디오 콘텐츠란 음악, 음향 등을 말하는데요. MP3, WAV, OGG 등 확장자가 대표적입니다. 또한 <audio> 태그는 시맨틱 구조를 만드는 요소이기도 합니다.

 

사용법

<audio src="music.mp3" controls>
Your browser does not support the audio tag.
</audio>

• 먼저 audio 태그를 엽니다.
• src 속성에 오디오 파일의 소스 URL을 지정합니다
  • controls : 이 속성을 넣으면 오디오 플레이어 컨트롤이 표시되어 사용자가 재생, 일시정지, 볼륨 조정 등을 처리할 수 있어요
  • autoplay : 웹페이지를 열때 자동으로 오디오를 재생합니다
  • muted : 이 속성을 쓰면 음소거를 할 수 있어요
  • preload : 웹페이지를 열 때 미리 오디오 소스를 로딩해 둡니다. 속성값은 "auto", "metadata", "none"이 있어요
• 오디오를 지원하지 않을 경우의 메시지를 작성합니다
• 마지막으로 audio 태그를 닫습니다

src 속성을 별도로 구분할 수도 있습니다.

<audio  controls>
Your browser does not support the audio tag.
  <source="music.mp3" type="audio/mp3">
  <source="music.ogg" type="audio/ogg">
</audio>

 

위의 속성을 사용한 예제 코드를 살펴볼께요.

<audio src="music.mp3" controls autoplay loop muted preload="auto">
  Your browser does not support the audio tag.
</audio>

 

그럼 오늘도 즐거운 하루 되세요!