#06 HTML 강좌 음악 넣기, 오디오 태그

안녕하세요 대남이 입니다. 오늘은 html을 이용하여 웹 페이지에 음악 넣는 법, 오디오 태그에 대하여 알아보겠습니다.

브라우저에 오디오나, 비디오 파일을 삽입하여야 할 때가 있으실텐데, html에서 지원하는 태그를 이용하여 쉽게 삽입할 수 있습니다.

html5의 <audio> 태그로 음악을 재생 시킬 수 있습니다. 오디오 태그의 기본적인 구조는 다음과 같습니다.

일단 태그는 < audio .. 로 시작합니다. 그리고 src는 오디오 소스 파일의 경로를 나타내는 속성입니다. 이때 파일의 이름과 확장자를 정확히

입력해주셔야 합니다. src 속성 다음에는 재생 방식을 적는데, autoplay의 경우는 자동 재생을 나타냅니다.

그 다음 controls 라는 속성을 웹 브라우저에 재생, 정지를 할 수 있는 제어기를 생성하는 명령어 입니다.

오디오 태그는 기본적으로 이와 같은 구조를 가지는데요. 그럼 어떤 속성들이 있는지 구체적으로 정리하여 보겠습니다.

---

< audio > 태그의 요소들

속성	설명
autoplay	음악을 자동적으로 재생
controls	브라우저가 오디오 재생을 제어하는 제어기 표시
loop	오디오를 반복하여 재생
preload	오디오를 미리 다운로드
src	재생할 오디오 소스를 입력
volume	오디오 볼륨을 설정

다음과 같이 정리 할 수 있습니다.

웹 페이지에 본인의 의도대로 생성하자 할 때 적절히 사용하시면 됩니다.

그럼 이번에는 예시로 한번 오디오 파일을 웹페이지에 생성하는 코딩을 해보겠습니다.

<audio> 와 </audio> 사이에는 브라우저가 음악 파일을 출력하지 못했을 때 출력되는 텍스트 입니다.

src에 url을 입력하였고 오디오 요소들을 이용하여 자동재생 그리고 웹 브라우저 화면에 제어기를 생성하였습니다.

그리고 내부 스타일 시트를 이용하여 background-color : black 즉, 배경화면 색을 검은색으로 했는데,

제어기를 잘 표시하기 위해 바꿔주었습니다. 그럼 다음과 같이 출력됩니다.

제어기가 생성되었고 브라우저를 키면 자동재생 됩니다.

배경화면은 css를 이용하여 검은색으로 출력했습니다.

(css강좌 참조) 이런 방식으로 요소들을 적절히 사용하여 코딩을 하시면 쉽게 음악을 넣을 수 있습니다.

-

여기서, 음악파일의 출력을 실패할 때가 있습니다. 그때는 오디오 형식, 즉 확장자와 관련이 있습니다.

웹 브라우저마다 지원가능한 확장자가 다르기 때문에 발생하는 문제입니다.

음악 형식을 크게 mp3, wav, ogg가 있는데 밑에 표에 브라우저가 지원하는지 안하는지 정리해놓았습니다.

브라우저	MP3	WAV	OGG
인터넷 익스플로러	O	X	X
크롬	O	O	O
파이어폭스	X	O	O
사파리	O	O	X
오페라	X	O	O

다음을 참고하셔서 코딩을 하시면 되겠습니다.

오늘은 오디오 태그에 대해서 알아봤습니다. 다음 번에는 비디오를 삽입할 수 있는 비디오태그를 알아보겠습니다.

다음번에는 좀 더 유익한 정보를 가지고 오겠습니다. 감사합니다 !