지금까지는 웹에서 음악을 재생할 때 플래시 플레이어나 윈도우 미디어 플레이어, 퀵타임 등의 프로그램을 이용해야
했습니다. 웹 브라우저 자체에서 음악을 재생할 수 없었기 때문입니다. HTML5에서는 <audio>요소를 도입함
으로써 웹 브라우저에서 바로 음악을 재생할 수 있도록 했습니다.
<audio> 요소는 <video> 요소와 사용법이 거의 같습니다. 삽입할 음악 파일을 지정해 주고 필요한
속성만 추가하면 되는데, <audio>태그에서 사용할 수 있는 속성 역시 <video> 태그의 속성과 거의
같습니다. <audio> 태그를 사용해 웹 브라우저에서 재생할 수 있는 음악 파일 형식은 다음과 같습니다.
| 브라우저 | 오디오 코덱 |
|---|---|
| 파이어폭스 | ogg/vorbis, wav |
| 사파리 | mp3, wav, AAC |
| IE | mp3, AAC |
| 크롬 | ogg/vorbis, MP3, wav, AAC |
| 오페라 | ogg/vorbis, wav |
<audio>태그를 사용하면 편리하긴 하지만 아직까지는 브라우저 마다 사용할 수 있는 음악 파일이 다르기 때문에 <vidoe>태그에서와 마찬가지로 <source>태그를 이용해 파일 종류별로 따로따로 지정해 주어야 합니다.
<audio controls autoplay>
<source src="melody.ogg">
<source src="melody.mp3">
</audio>
파이어폭스의 경우 <source> 태그에 대한 버그가 있어서 자기가 지원하지 않는 파일 형식은 제대로 처리하지 못합니다. 즉, <source src="melody.mp3">라는 소스를 먼저 쓰게 되면 음악이 제대로 재생되지 않습니다. 따라서 상기 소스에서 보는 것처럼 ogg 파일의 경로를 먼저 입력해야 합니다.
