> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/undefined-12/untitled-5.md).

# 오디오(Audio) 요소

## \<audio>&#x20;

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

## 속성

* `src` - 오디오 파일 경로
* `volume` - 볼륨 조절(0.0 \~ 1.0)
* `muted` - 음소거 설정
* `poster` - 포스터 이미지 경로
* `preload` - 사용자 경험 향상(메타데이터 / 비디오 다운로드)에 관한 설정
* `controls` - 재생 컨트롤 표시 설정
* `autoplay` - 자동 재생 설정
* `loop` - 반복 설정

## 예제

```markup
<audio src="audiofile.mp3">
  HTML5 <code>audio</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용
  중입니다.
  <a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a>로
  업데이트 하세요.
</audio>
```

```markup
<!-- 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>
```

##