개념

• <audio>, <video>, <picutre> 요소에 사용할 수 있는 다중 미디어 자원을 정의하는 요소이다.
• 브라우저 호환성 문제를 해결하기 위해 여러 개의 미디어 파일 형식을 제공할 때 사용한다.

특징

• 브라우저가 지원하는 첫 번째 형식을 자동으로 선택하여 재생한다.

주의사항

• 브라우저가 위에서부터 순차적으로 확인하므로, 호환성을 고려해서 배치를 해야 한다.
• type 속성을 생략하면 브라우저가 파일을 다운로드한 후 확인하므로 type 속성은 필수이다.

실무

• 브라우저마다 최적화된 포맷이 다르기 때문에 필수적으로 사용한다.
• 대역폭에 따른 화질 조절이나 반응형 이미지 제공시에도 활용된다.

예시

<audio controls>
  <!-- 브라우저가 위에서부터 순서대로 확인 -->
  <source src="audio.ogg" type="audio/ogg">     <!-- Firefox, Chrome 우선 -->
  <source src="audio.mp3" type="audio/mpeg">    <!-- Safari, IE 대응 -->
  <source src="audio.wav" type="audio/wav">     <!-- 마지막 대안 -->
  <!-- 브라우저가 audio를 지원하지 않는 경우 표시 -->
  오디오를 지원하지 않는 브라우저입니다.
</audio>