CLOSE SEARCH

HTML5 audio tag

HTML5를 지원하는 브라우저는 플러그인의 도움없이 오디오 파일을 재생할 수 있습니다. HTML5 자체적으로 mp3, ogg, wav 등과 같이 다양한 포멧를 지원하지만, 실제로 지원되는 포멧은 브라우저에 따라 달라집니다.

가장 기본적인 사용법은 src 속성을 통해 재생할 파일의 URL을 지정해 주는 것입니다.

audio 태그는 여러가지 옵션을 가지고 있습니다. 그 중 자주 사용되는 옵션은 다음과 같습니다.

  • controls : 재생 도구를 표시합니다.
  • preload : 오디오 파일을 미리 읽어옵니다.
  • autoplay : 오디오 파일을 자동으로 재생합니다.
  • loop : 오디오 파일을 반복적으로 재생합니다.

각 옵션을 지정할 때는 원하는 옵션의 이름을 나열해 주면 됩니다.

앞에서 언급했던 것과 같이 브라우저 별로 지원하는 오디오 포멧이 다르기 때문에 모든 브라우저를 지원하기 위해서는 audio 태그 내에 source 태그를 추가해서 브라우저들이 지원하는 오디오 포멧을 모두 제공해주어야 합니다. http://html5test.com 에서현재 브라우저가 지원하는 오디오 포멧을 확인할 수 있습니다.

source 태그의 src 속성에는 각 오디오 파일의 URL을 지정해 줍니다. type 속성은 오디오 파일의 포멧을 지정해주며 필수 속성은 아닙니다. 그러나 이 속성을 지정해 줄 경우 브라우저가 오디오 포멧을 확인하기 위해 파일을 미리 다운로드 해야 하는 불필요한 작업을 줄일 수 있고, 결과적으로 웹 서버에서 발생할 수 있는 트래픽 낭비를 줄일 수 있습니다.  이렇게 source 태그를 통해 여러 포멧의 오디오 파일을 나열해 두면, 각각의 브라우저가 자신이 재생할 수 있는 파일을 찾아 재생하게 됩니다.

source 태그를 통해 여러 포멧을 제공하는 방식은 HTML5의 video 태그에서도 동일하게 사용됩니다.

Filed under: Web