audio 태그로 웹에 음악 넣기

 

 

 

오늘 정리할 태그는 audio 태그로 html5에 새로나온 태그입니다.

이전에 wav나 동영상을 삽입할때 embed를 사용했는데 이번에 저도 다른게 있나 찾아보다가 우연히 알게되서 포스팅해보려고 합니다.

 

 

 

<audio controls>
   <source src="파일주소.ogg" type="audio/ogg">
   <source src="파일주소.mp3" type="audio/mpeg">
</audio>

 

 

 

오디오 소스에는 총 6가지 속성이 있고요.

이름	값	설명
autoplay	autoplay	자동재생 설정
controls	controls	오디오 재생에 관련된 컨트롤러 표시
loop	loop	무한반복 설정 (loop="3" 이라고 쓰면 3번 반복)
src	url	오디오 주소 설정
muted	muted	음소거 설정
preload	auto metadata none	오디오 재생전에 음악파일 모두 불러올지 설정 auto : 웹페이지 여는 순간 바로 다운로드 (기본값) metadata : 메타 정보만 받음 none : 재생 시 파일 다운로드

 

 

 

마지막으로 오디오파일은 확장자에 따라서 지원하는 브라우저가 있으니까 아래 표를 보고 오디오 파일을 제작하시길 바랍니다.