오디오 태그는 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그입니다. 이 기능은 HTML5에서 추가된 기능이므로 인터넷 익스프롤러 8 이하에서는 사용할 수 없습니다. 또한 img 태그와 사용방법이 비슷해서 사용이 간편합니다.
audio 태그
audio 태그의 기본 형태는 아래와 같습니다.
|
<body> <audio></audio> </body> |
audio 태그도 img 태그 처럼 다양한 속성을 가지고 있지만 이중에서도 audio 태그와 관련된 중요한 속성은 아래 표에 적혀 있습니다.
| 속성 이름 | 설명 |
| src | 음악 파일의 경로 지정 |
| preload | 음악을 재생하기 전에 모두 불러올지 지정 |
| autoplay | 음악을 자동 재생할지 지정 |
| loop | 음악을 반복할지 지정 |
| controls | 음악 재생 도구를 출력할지 지정 |
예시1
위의 속성을 이용하여 예시1을 완성할 수 있습니다. 표기방법은 2개가 있는데 XHTML5 방식과 HTML5 방식이 있습니다. 2개의 방식 전부 많이 사용합니다. 주의 할 점은 웹 브라우저의 버전에 따라서 실행이 되지 않을 수 있습니다. 브라우저 마다 지원 하는 확장자가 다르기 때문입니다. 2019년 1월 기준 지원하는 확장자는 아래 표와 같습니다.
| 인터넷 익스프롤러 | 크롬 | 파이어폭스 | 사파리 | 오페라 | |
| MP3 | O | O | O | O | O |
| OGG | X | O | O | O | O |
| WAV | X | O | O | X | O |
source 태그
게임기와 텔레비전에 들어가는 웹 브라우저 모두 지원하는 확장자 형식이 다릅니다. MP3 라이선스 문제가 있을 수도 있기 때문에 다른 확장자를 사용해야 하는데, 웹 브라우저 마다 지원하는 음악 파일 형식이 미세하게 달라 문제가 됩니다.
위의 문제를 해결하기 위해 source 태그를 사용하는데 source 태그는 audio 태그와 video 태그안에 입력합니다.
예시2
예시2로 알 수 있듯이 MP3 파일과 OGG 파일을 사용하면 모든 브라우저에서 음악을 재생 할 수 있습니다. 추가로 source 태그의 type 속성은 입력하지 않아도 문제가 없습니다만, type 속성을 입력하지 않으면 웹 브라우저가 음악 파일릏 내려받은 뒤에 재생 가능한 파일인지 확인하게 되므로 트래픽이 낭비됩니다. 따라서 넣어주는게 좋습니다.
'프로그래밍 공부 > HTML5' 카테고리의 다른 글
| HTML5 - 입력 양식 태그 (0) | 2019.11.12 |
|---|---|
| HTML5 - 비디오 태그 (0) | 2019.11.12 |
| HTML5 - 이미지 태그 (0) | 2019.11.12 |
| HTML5 - 테이블 태그 (0) | 2019.11.11 |
| HTML5 - 목록 태그 (0) | 2019.11.11 |
