Html5 <audio> 태그 사용하기
- Html5에 새롭게 추가된 기능으로 구 버전의 브라우저(IE8 이하)에서는 지원되지 않습니다.
- 현재는 mp3/ogg/wav 파일 형식만 지원 합니다.
사용 예제
<audio controls>
<source src="음악 주소.ogg" type="audio/ogg">
<source src="음악 주소.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
속성&값
※ 사용할 수 있는 속성
- src: 음악 파일이 있는 위치를 지정해 줍니다.
- controls: '재생/정지/일시정지' 등의 조절 장치를 보여 줄지를 정해줍니다.
- loop: 노래가 끝이 나면 반복해서 재생을 할지를 지정해 줍니다.
- autoplay: 페이지를 열면 자동으로 재생 시작할지를 지정해 줍니다.
- preload: 페이지를 열면 음악파일을 어떻게 로드할지를 정해 줍니다.(none/metadata/auto)
※ 사용할 수 있는 속성의 값
- src: 음악 파일이 있는 곳의 주소(URL).
- controls: controls / "" / - , (값을 지정해 주지 않고 'controls'만 사용해도 controls="controls"와 동일 합니다.)
- loop: loop / "" / - , (값을 지정해 주지 않고 'loop'만 사용해도 loop="loop"와 동일 합니다.)
- autoplay: autoplay / "" / - , (값을 지정해 주지 않고 'autoplay'만 사용해도 autoplay="autoplay"와 동일 합니다.)
- preload: none / metadata / auto
- none: 미리 음악 파일을 다운로드하지 않음.
- metadata: 기본정보(크기,길이 등)만 가져옴.
- auto: 미리 음악 파일을 다운로드 함. (기본값 = auto)
source 태그
- 위 속성 이외에 <audio> 태그 안에 다시 태그(Tag) 사용이 가능 합니다.
- 브라우저마다 지원하는 코덱이 다르기 때문에 source 태그를 사용하여 모든 브라우저에서 audio 태그가 실행되게 해줍니다.
※ 브라우저 별 지원 코덱
- MP3: IE / 크롬 / 사파리
- OGG: 크롬 / 파이어폭스 / 사파리 / 오페라
- WAV: 크롬 / 파이어폭스 / 오페라
※ 오디오 포멧에 따른 MIME Types.
- MP3: audio/mpeg
- OGG: audio/ogg
- WAV: audio/wav
<audio> 태그 지원되지 않는 브라우저를 위한 안내 문구
- 사용하지 않아도 무방 합니다.
- 위 '사용 예'에서 아래 문구 부분에 원하는 안내 문구를 넣어 사용하면 됩니다.
- Your browser does not support the audio tag.
- 구글 크롬과 IE에서 보여지는 모습.
via HTML <AUDIO> Tag