HTML - 오디오(audio)태그와 그 속성 - 멀티미디어 (1)

HTML - 오디오(audio)태그와 그 속성 

멀티미디어 (1)

 오늘은 HTML - 오디오(audio)태그와 그 속성에 

대해서 알아 보도록 하겠습니다.

태그 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.)

먼저 HTML에서 오디오(audio)태그란?

HTML5에서 오디오를 재생할 수 있는 태그

<audio>태그를 지원 하는데 흔히 웹 페이지에서 자신이 좋아하는

오디오 파일 음원을 배경음으로 재생할때 사용하는 태그입니다.

<오디오 태그 사용법>

위 이미지는 오디오 태그 src 속성으로 오디오 파일 music.mp3 를 지정 후

속성 outoplay (자동재생) 과 controls(화면에 제어기 생성)을 입력해  

웹 브라우저상에서 출력한 모습 입니다.

(추가로 본 이미지 파일은 오디오 파일 music.mp3 은 

html 문서와 같은 위치에서 가져온 절대경로)

절대경로의 자세한 내용은 아래 링크

압타나 스튜디오 3 (Aptana Studio 3)

HTML 문서 편집 및 상대경로 절대경로  #4

에서 확인 하시기 바랍니다. ^^

그리고 오디오 태그에 속성은

outoplay (자동재생) 과 controls(화면에 제어기 생성) 말고도

아래 표와 같이 여러가지가 있으며 상황에 맞게 지정 하시면 됩니다.

속성	내용
aotoplay	웹 브라우저에서 음원을 자동으로 재생
loop	웹 브라우저에서 음원 반복 재생
src	재생할 음원 존재하는 URL 입력
controls	웹 브라우저에 음원재생을 제어하는 제어기 생성
preload	사용자가 사용할 생각이 없더라도 음원을 미리 다운
volume	음원의 재생 볼륨을 설정 (0.0 ~ 1.0까지)

<오디오 태그 속성>

여기까지 오디오 태그의 속성이였습니다.

이번 내용은 오디오 태그의 여러 가지 확장자를 지원 하는 

방법에 대해서 간략하게 알아 보도록 하곘습니다.

먼저 오디오 파일 형식에는 MP3, WAV, OGG 등 많은 것들이 있는데요

각 브라우저 (익스플로러, 파이어폭스, 크롬, 오페라 등등)마다 탑재된 코덱이 다르기 때문에

재생할 수 있는 오디오 종류가 약간씩 차이가 납니다.

이럴때 오디오 태그안에 <source> 태그를 이용햐여

하나의 오디오 소스에 대해 여러가지 파일 형식을 동시에 제공하면 됩니다.

 

<source> 태그 사용법

소스 태그의 사용법은 위와 같습니다.

단지 달라진게 있다면 오디오 태그에 경로가 <source> 태그로 옮겨지고

 type 속성을 입력한 것인데요.

여기서 type 속성이란 인터넷에서 멀티미디어 전송을 위한

규약을 의미하며 각 확장자의 음원 형식을 뜻합니다.

그리고 위와 같이 모든 브라우저에서 음원이 잘 재생되게 하려면 

 각 음원 파일 mp3, ogg, mav등을 준비해서 작업하는 방식이 있습니다.

추가로 mp3 파일을 다른 확장자로 변환하는 방법은

변환 프로그램등을 이용해서 변환하는 방법도 있고 잘 찾아보면 온라인 사이트에서

바로 변환을 해주는 사이트가 있으니 검색해서 찾아보길 바랍니다. ^^

여기까지  HTML - 오디오(audio)태그와 그 속성에 대해서 기록해 보았습니다.

다시 한번 말하지만 백번 보는 것 보다 한두번 써보고 실행해 보는것이 이해하기 쉽습니다.

이상 HTML - 오디오(audio)태그와 그 속성 - 멀티미디어 (1)에 

관련된 포스팅을 마치도록 하겠습니다.