컴퓨터/HTML

audio

sayyesdoit 2019. 4. 26. 10:00

기능

audio 태그는 음원을 재생, 정지하는 등 제어할 수 있다.

 

<!DOCTYPE html>
<html>
<body>
  <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    <source src="horse.wav" type="audio/wav">
    Your browser does not support the audio element.
  </audio>
</body>
</html>

 

 

 

Attribute 들

위의 예제에 사용된 controls 처럼 사용되는 attribute 들에 대해 알아보자.

controls

재생 박스를 보여준다.

autoplay

오디오가 준비되자 마자 자동으로 재생된다.

loop

음원을 반복 재생한다.

muted

음소거 한다.

src

음원 소스를 지정한다. 

<audio src="play.mp3">

<source> 태그가 있기 때문에 기본적으로 사용할 일은 없지만 javascript로 동적으로 음원을 바꿔야 될 때는 필요하다.

playbackRate

음원 재생 속도로를 지정한다.

<audio playbackRate=1.2>

명시하지 않으면 기본적으로 1.0배속으로 재생되지만 javascript로 동적으로 재생속도를 변경시킬 때 유용하다. 값을 문자열로 전달하지 않고 숫자로 전달한다는 것에 주의하자.

controlsList

다운로드 가능 여부를 결정한다.

controlsList="nodownload"