지난 12번째 블로그 내용으로 웹문서에 image를 불러오는 <img>태그와 이 <img>태그와 관련된 src, alt, width and height, title 등 다양한 속성에 대하여 알아보았습니다. 그리고 이번 13번째 블로그 내용으로 음악과 소리를 불러오는 <audio>태그와 이 <audio>태그와 함께 사용되는 src, alt, width and height, title 등 다양한 속성(attribute)에 대하여 소개하고자 합니다
1. < audio> 태그란?
HTML5 이전의 음악 멀티미디어를 재생할 수 있는 오디오 파일은 플래시와 같은 plug-in이 있는 브라우저에서만 재생할 수 있었습니다. 그러나 HTML5부터 생긴 <audio> 태그는 plug-in의 도움없이 웹 페이지에서 음악 멀티 미디어를 재생할 수 있게 해주는 태그라 할 수 있습니다.
---------- ----------
2. Web Browser에서 지원되는 오디오 파일 유형
HTML5에는 MP3, WAV 및 OGG의 3가지 오디오 형식이 지원됩니다.
그러나 이 3개의 오디오 파일유형이 웹브라우저마다 재생할 수 있는 파일유형에 차이가 있기 때문에 오디오 파일을 재생하기 위햇허는 각 웹브라우저에 맞는 파일유형으로 실행해야 합니다.
아래표는 각 웹브라우저에서 지원되는 오디오 파일 유형들입니다.
1) MP3 파일은 Internet Explorer, Chrome, Firefox, Safari, Opera 등 5개 브라우저 모등에서 지원이 되며,
2) WAV파일은 Chrome, Firefox, Safari, Opera 등 4개 브라우저에서 지원이 됩니다.
3) OGG 파일은 Chrome, Firefox, Opera 등 3개 브라우저에서만 지원이 됩니다.
위의 표에서 보듯이 MP3 파일은 모든 웹브라우저에서 지원되기 때문에 이 파일유형이 많이 추천되고 있습니다. 만약 웹브라우저를 지원하지 않는 오디오 파일이 있다면, 파일변환 프로그램 등을 통해서 웹브라우저 지원이 가능한 파일형태로 변환하여 올리는 것이 중요합니다.
3. <audio> 태그 지정방법
1) <audio> 태그는 열기태그(opening tag)와 종료태그(closing tag)로 구성되어 있습니다.
2) 열기태그에 <audio> 태그와 관련된 src, controls, autoplay, loop 등의 속성을 입력합니다
4. audio 태그와 함께 사용되는 다양한 속성지정 방법
audio 태그와 함께 사용되는 속성으로 src, controls, autoplay, loop 등이 있습니다.
1) source의 약자인 src 속성은 반드시 <audio>태그와 함께 사용되어지는 대표적인 속성으로 오디오 파일이 있는 위치와 파일이름을 지정하는 곳입니다. 그 지정방식은 <audio src = "file name">의 형식으로 지정합니다.
2) Controls속성은 audio 재생과 관련한 audio controls, play, pause, and volume등의 기능을 수행합니다.
3) autoplay 속성은 오디오를 자동실행하는 기능을 수행합니다.
4) loop 속성은 오디오를 반복재생하는 기능을 수행합니다.
5) <오디오>와 <오디오> 태그 사이의 텍스트(콘텐츠)는 <오디오> 요소를 지원하지 않는 브라우저에만 표시됩니다.
5. <audio> 태그와 함께 사용되는 다양한 속성(attribute) 코딩 예
