오디오(Audio) 요소

<audio>

  • 동영상 콘텐츠를 포함하기 위해서 사용.

  • src 속성이나 요소 이용해 여러개의 동영상 소스를 표시. (현재는 mp3, mp4가 모든 브라우저에 지원되기 때문에 souce속성을 사용 하지않아도 상관없다.)

속성

  • src - 오디오 파일 경로

  • volume - 볼륨 조절(0.0 ~ 1.0)

  • muted - 음소거 설정

  • poster - 포스터 이미지 경로

  • preload - 사용자 경험 향상(메타데이터 / 비디오 다운로드)에 관한 설정

  • controls - 재생 컨트롤 표시 설정

  • autoplay - 자동 재생 설정

  • loop - 반복 설정

예제

<audio src="audiofile.mp3">
  HTML5 <code>audio</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용
  중입니다.
  <a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a>로
  업데이트 하세요.
</audio>
<!-- audio -->
<figure style="margin: 0;"> (`<margin>` 여백 없음)
  <img
  src="media/audio/tobu-Itro_Cloud9--cover.jpg"
  alt="cloud9 - todu & itro" width="300" height="300">
<figcaption>
  <audio src="media/audio/tobu-Itro_Cloud9.mp3" controls autoplay>
    <p>
      HTML5 <code>video</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용 중입니다.
      <a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a> 하세요.
    </p>
  </audio>
</figcaption>
</figure>

Last updated