HTML5 Audio Element, 한 판 붙자!

잠깐! HTML5 관련 글을 읽기 전에...

HTML5와 관련된 글을 읽기 전에, 사용하고 있는 브라우저가 HTML5를 지원하는지 확인해보세요.
HTML5를 지원하는 브라우저는 Internet Explore9+, Google Chrome, Mozilla Firefox, Apple Safari, Opera 등이 있으니, 참고 하세요.
스마트폰에서는 아이폰의 경우 Mobile Safari, 안드로이드의 경우 Opera(Webkit) 브라우저가 있습니다.

예제파일 첨부했으니, 받아가세요!

이 글을 보시면서 예제를 직접 코딩해보시려면, 다른 건 몰라도 고급단계에 있는 코드들은 만만치 않게 내용이 많습니다.
첨부한 예제 파일을 다운로드하여 보시면, 훨씬 수월해질겁니다.
다운로드 : Examples.zip

목차

이번 포스팅은 너무 길어서, 특별히 목차를 삽입했습니다. 필요한 내용만 쏙쏙 골라보세요~

#1. Audio 엘리먼트란?
#2. Audio 엘리먼트가 지원하는 파일형식
#3. Source 엘리먼트는 또 뭐야?!
#4.<audio> 태그 속성
#5. Audio 객체(Object) 속성
#6. Audio 객체의 메소드 함수
#7. Audio 객체의 이벤트
#8. <source> 태그의 속성
#9. 실전! 기본적인 사용법
#10. 실전! Javascript를 이용한 간단한 Audio Player 제작하기 (초급)
#11. 실전! Javascript를 이용한 사용법 (중급)
#12. 실전! Javascript를 이용한 사용법 (고급)
#13. 저작권 출처
#14. 마치며...

Audio 엘리먼트란?

기존 ‘HTML4.01’에서 사용하던 bgsound, embed 엘리먼트는 외부 플레이어에 의존하여, 플레이어가 없거나 코덱이 없으면 플레이를 못하는 의존성이 강한 엘리먼트였었습니다.
HTML5에서는 이를 보완하기 위해 브라우저 자체에 코덱을 내장시켜, 클라이언트 즉 사용자가 사용하는 컴퓨터 환경에 아무런 제약 없이, 오디오/비디오를 재생할 수 있게 되었습니다. 이를 통해, 오디오나 비디오를 재생하는 데에 있어서 플레이어나 플래시 등 기타 플러그인에 의존하지 않아도 오디오/비디오를 재생하실 수 있습니다. 이 기술을 사용할 수 개체로서는 Video 엘리먼트, Audio 엘리먼트가 있습니다.
쉽게 말하자면, Audio 엘리먼트는 음악이나 사운드를 재생하는 개체입니다.

Audio 엘리먼트가 지원하는 파일형식

공식적으로, 지원하는 파일형식(MIMEType)은 mp3(Audio/mpeg), ogg(Audio/ogg), wav(Audio/wav)입니다. (2012년 기준)
But, 각 브라우저별로 지원하는 코덱이 다르다는 걸 반드시 인지하고 계셔야 합니다.
Mp3코덱을 사용하려면 그에 따른 인센티브를 지불해야하는데, Firefox는 이를 부정적으로 받아들여, MP3 코덱 대신 무료로 오픈되어 있는 Ogg코덱을 내장시켰습니다.
이처럼 브라우저마다 지원되는 코덱이 다르다는 것을 인지하시기 바랍니다. 차후에 코덱이 하나로 통일되게 업데이트가 좀 되었으면 하는 개인적인 소망입니다.

아래 표는 각 브라우저 별 코덱 지원 현황입니다. (2012.11 기준)

Browser	MP3(audio/mpeg)	Wav(audio/wav)	Ogg(audio/ogg)
Intenet Explorer 9	YES	NO	NO
Firefox 4.0	NO	YES	YES
Google Chome 6	YES	YES	YES
Apple Safari 5	YES	YES	NO
Opera 10.6	NO	YES	YES

Source 엘리먼트는 또 뭐야?!

Source 엘리먼트는 Audio/Video 엘리먼트에서 불러올 음악파일을 지정해주는 엘리먼트입니다. 이 엘리먼트는 Audio/Video 엘리먼트에 종속적인 엘리먼트로서, 다중으로 중복하여 사용할 수 있습니다.
이 엘리먼트에 음악파일의 주소와 형식을 입력해놓으면, 브라우저에서 해당 미디어 타입을 자신이 지원하는지를 판단하여 로드합니다. 예로 들어, ‘type’이 "audio/mpeg"인 source와, "audio/ogg"인 source를 작성했다고 가정합시다. 만약 이 페이지를 ‘Firefox’에서 로드한다면, ‘type’이 "audio/ogg"인 source를 찾아 Audio를 재생할 것입니다. 여기서 ‘type’이 "auido/ogg"인 source가 없다면, ‘Firefox’에서 Audio는 재생 불가능한 엘리먼트로 인식합니다.
물론 Source 엘리먼트 없이 Audio 엘리먼트만 사용하여 파일을 로드할 수는 있지만, 원할한 크로스 브라우징을 위해서는 Source 엘리먼트를 사용하여 MP3, OGG 두 개의 파일을 링크시켜주는 것이 바람직하다고 볼 수 있습니다.

<audio> 태그 속성

자, 이제 본격적으로 Audio 엘리먼트에 대해서 파헤쳐 봅시다.
먼저 HTML문서 내, '<audio>'태그에 사용가능한 속성입니다.

속성	값	설명
autoplay	"autoplay"	재생할 준비가 완료되면, 자동으로 재생하는지를 설정합니다.
controls	"controls"	재생/일시정지 버튼과 같은 오디오 컨트롤 표시여부를 설정합니다.
loop	"loop"	오디오가 모두 재생되었으면, 매 번 반복하는지를 설정합니다.
preload	"auto" "metadata" "none"	페이지가 로드될 때, 오디오를 어떻게 로드할지 방법을 설정합니다.
src	URL	오디오 파일의 주소를 설정합니다.

대충 훑어보면 다 이해하시리라 믿습니다.(읭?)
간혹 '<audio autoplay controls>'처럼 작성한 코드를 보신 적 있지 않습니까? 저런 식으로 하면 웹 표준성에 어긋납니다. HTML은 XML파서로 해석이 되므로 반드시 '<audio autoplay="autoplay">'과 같이 "속성=값"으로 기입해주셔야 합니다.
이외에도 '<audio loop="false" autoplay="false" controls="true">'과 같이 표현하시는 분이 계신데, 'autoplay', 'controls', 'loop'속성은 'true', 'false'과 같은 Boolean 값을 인지하지 못합니다. 'autoplay'속성을 'false'로 설정하시려면, '<audio controls="controls">'와 같이 아예 표기를 안하면, 브라우저에서 'autoplay'속성을 'false'로 인지하여 자동재생을 하지 않습니다.
"<audio>"태그 속성 중에 'preload'속성은 좀 느낌이 안와서, 난해하시죠?
'preload'는 설명대로, 웹페이지를 로드할 때 오디오 데이터를 어떻게 로드를 할 것인가를 설정하는 속성입니다. "auto"로 설정하면, 페이지가 로드될 때 오디오파일 데이터와 메타데이터(정보)를 모두 로드하게 됩니다. "metadata"로 설정하면, 페이지가 로드될 때 오디오 파일의 메타데이터(정보) 즉, 재생길이와 파일형식, 파일크기 등의 정보만 로드하게 됩니다. "none"으로 설정하면, 페이지를 로드할 때 아무것도 가져오지 않고, 컨트롤에서 재생버튼 혹은 스크립트에서 재생이벤트를 발생시켜야 로드를 시작하게 됩니다.

자, 이제 좀 이해가 되셨습니까? 아직 모르시겠다면 댓글로 연락주세요. 정성껏 답변드리겠습니다.

Audio 객체(Object) 속성

다음으로, 태그가 아닌 Javascript의 객체(Object)로서의 속성을 알아보겠습니다.

속성	설명
audioTacks	AudioTrackList 객체를 반환합니다.(현재 미지원)
autoplay	미디어가 로드되면, 바로 재생하는가에 대한 설정 값을 설정하거나 반환합니다.
bufferd	버퍼링된 미디어의 재생길이를 TimeRanges 객체로 반환합니다.   * 시작위치: Audio.bufferd.start(0), 종료위치: Audio.bufferd.end(0)
controller	미디어 컨트롤러 객체를 반환합니다.
controls	미디어 컨트롤러를 표시할 것인지 설정하거나 설정 값을 반환합니다.
crossOrigin	미디어의 CORS 설정 값을 설정하거나 반환합니다.(현재 미지원)
currentSrc	현재 미디어의 파일주소를 반환합니다.
currentTime	현재 미디어의 재생위치를 변경하거나 반환합니다.
defaultMuted	기본적으로 미디어를 음소거할 것인지를 설정하거나 설정 값을 반환합니다.
defaultPlaybackRate	미디어 재생속도의 기본값을 설정하거나 설정 값을 반환합니다.
duration	미디어의 총 재생길이를 반환합니다.(초 단위, 0.000000)
ended	미디어의 재생 완료 여부에 대한 값을 반환합니다.(Boolean)
error	미디어의 오류상태를 알려주는 MediaError 객체를 반환합니다.(IE에서만 작동) 코드는 error.code로 접근합니다. 1 : MEDIA_ERR_ABROATED – 사용자에 의해 로딩이 취소됨 2 : MEDIA_ERR_NETWORK – 다운로드 중 오류가 발생함 3 : MEDIA_ERR_DECODE – 미디어 디코딩 중 오류가 발생함 4 : MEDIA_ERR_SRC_NOT_SUPPORTED – 지원하지 않는 미디어
loop	미디어가 끝나면 다시 재생하게 설정하거나 설정 값을 반환합니다.
mediaGroup	미디어의 그룹을 설정하거나 값을 반환합니다.(현재 미지원)
muted	미디어를 음소거 설정하거나, 값을 반환합니다.(Boolean)
networkState	미디어의 현재 네트워크 상태를 반환합니다. 0 : NETWORK_EMPTY – 미디어가 아직 초기화되지 않음 1 : NETWORK_IDLE – 미디어가 활성화되었으며, 데이터를 모두 다운받아 네트워크를 사용하지 않음 2 : NETWORK_LOADING – 미디어 데이터 수신중 3 : NETWORK_NO_SOURCE – 미디어를 찾을 수 없음
paused	미디어를 일시정지 하거나, 값을 반환합니다.(Boolean)
playbackRate	미디어의 재생속도를 설정하거나, 값을 반환합니다.
played	현재 미디어에서 재생된 부분까지의 시간을 TimeRanges 객체로 반환합니다.   * 시작위치 : played.start(0), 종료위치 : played.end(0)
preload	페이지 로드시, 미디어가 로드되어야 하는지를 설정하거나 값을 반환합니다.
readyState	미디어의 현재 준비상태를 반환합니다. 0 = HAVE_NOTHING – 미디어가 준비되었는지 아닌지, 정보가 없음 1 = HAVE_METADATA – 미디어를 위한 메타데이터가 준비됨 2 = HAVE_CURRENT_DATA – 현재위치를 재생하기 위한 데이터가 사용가능함, 하지만 다음 프레임을 재생하기 위한 데이터가 충분치 않음 3 = HAVE_FUTURE_DATA - 현재 데이터와 적어도 다음 프레임이 사용가능함 4 = HAVE_ENOUGH_DATA – 재생을 시작하기 위한 데이터가 충분히 사용가능함
seekable	미디어의 탐색가능한 부분을 TimeRanges 객체로 반환합니다.   * 시작위치 : seekable.start(0), 종료위치 : seekable.end(0)
seeking	미디어에서 현재 사용자가 탐색하고 있는지를 반환합니다.(Boolean)
src	현재 미디어 객체의 주소를 설정하거나 값을 반환합니다.
startDate	현재 시간을 나타내는 Date 객체를 반환합니다.(현재 미지원)
textTracks	재생가능한 텍스트 트랙의 TextTrackList 객체를 반환합니다.(현재 미지원)
videoTracks	재생가능한 비디오의 VideoTrackList 객체를 반환합니다.(현재 미지원)
volume	미디어의 볼륨을 설정하거나 설정 값을 반환합니다.

(헉헉, 원문보고 번역하다가 시간 다 날렸습니다.)

자주 사용되는 속성만 강조해놓았으니 확인바랍니다.
몇 가지는 아직 브라우저에서 구현되지 않은 기능들이 있는데요, 브라우저들이 차차 업그레이드되면서, 지원하게 될 것 같습니다. 뭐 이렇게 객체속성들이 많은지 모르겠습니다.
이 속성들을 하나 하나 설명드리고 싶지만, 포스팅이 너무 길어져서 생략하겠습니다. 자바스크립트를 이용한 Audio 객체 컨트롤 방법은 아래, 실전! Javascript를 이용한 사용법에서 하도록 하겠습니다.

Audio 객체의 메소드 함수

미디어 객체의 대부분의 메소드 함수들은 유용하게 쓰이니, 꼭 짚고 넘어가시기 바랍니다.

메소드	설명
addTextTrack()	새로운 텍스트 트랙을 미디어에 추가합니다. (현재 미지원)
canPlayType()	특정한 미디어 타입을 브라우저가 재생할 수 있는지 체크합니다. 파라미터로는 아래와 같은 MIMEtype(파일형식)을 입력하시면 됩니다. video/ogg, video/mp4, video/webm, audio/mpeg, audio/ogg, audio/mp4 부가적으로, 아래처럼 코덱명까지 입력할 수 도 있습니다. video/ogg; codecs="theora, vorbis" video/mp4; codecs="avc1.4D401E, mp4a.40.2" video/webm; codecs="vp8.0, vorbis" audio/ogg; codecs="vorbis" audio/mp4; codecs="mp4a.40.5" 반환하는 값은 아래와 같습니다. "probably" - 지원 가능 "maybe" - 추가기능 설치 시 사용가능 "" - (빈 문자열) 지원하지 않음
load()	미디어 엘리먼트를 다시 로드합니다.
play()	미디어를 재생합니다.
pause()	현재 미디어를 일시정지 시킵니다.

Audio 객체의 이벤트

미디어 객체의 이벤트 들입니다. 다들 이벤트 개념은 알고 계시지 않습니까? ;-)

이벤트	설명
abort	미디어의 로딩이 취소되었을 때 실행되는 이벤트
canplay	미디어의 재생이 가능할 때 실행되는 이벤트
canplaythough	미디어의 재생이 끊김없이 가능할 때 실행되는 이벤트 (모든 데이터 수신완료 상태)
durationchange	미디어의 재생길이가 바뀌면 실행되는 이벤트
emptied	현재 재생목록이 없으면 실행되는 이벤트
ended	현재 재생목록이 끝나면 실행되는 이벤트
error	미디어를 로딩하는 동안 오류가 발생하면 실행되는 이벤트
loadeddata	미디어의 현재 프레임이 로드되었을 때 실행되는 이벤트
loadedmetadata	미디어의 메타데이터가 로드되었을 때 실행되는 이벤트
loadstart	브라우저에서 미디어를 찾기 시작할 때 실행되는 이벤트
pause	미디어가 일시정지되면 실행되는 이벤트
play	미디어가 재생되거나 일시중지 상태가 아닐 때 실행되는 이벤트
playing	미디어가 버퍼링 등의 이유로 일시정지되었다가, 재생 준비가 되면 실행되는 이벤트
progress	브라우저에서 미디어를 다운로드 받는 동안 실행되는 이벤트
ratechange	미디어의 재생속도가 바뀌면 실행되는 이벤트
seeked	사용자가 미디어를 슬라이더로 탐색한 후에 실행되는 이벤트
seeking	사용자가 미디어를 슬라이더로 탐색하는 동안 실행되는 이벤트
stalled	브라우저가 미디어 데이터를 얻는 동안 실행되는 이벤트
suspend	브라우저가 의도적으로 미디어 데이터를 수집하지 않을 때 실행되는 이벤트
timeupdate	재생되는 동안 실행되는 이벤트
volumechange	볼륨이 바뀌면 실행되는 이벤트
waiting	다음 프레임을 위한 버퍼링으로 인하여 정지되었을 때 발생하는 이벤트

<source> 태그의 속성

드디어 <source> 태그 차례입니다.

속성	값	설명
media	media_query ex) "screen and (min-width:320px)"	미디어 자원의 형식을 설정합니다. (현재 미지원)
src	URL	로드할 미디어의 주소를 설정합니다.
type	MIME_type	로드할 미디어의 MIMEtype을 설정합니다.

Source 엘리먼트는 따로 메소드 함수나 이벤트가 존재하지 않습니다. 객체로서의 속성도 태그 속성과 똑같이 있습니다. 따라서, Javascript로 source객체 접근 시에는 'Source.src' 혹은 'Source.type' 이 2가지 속성만 존재하는 것, 짚고 넘어갑시다.

실전! 기본적인 사용법

Audio 엘리먼트를 어떻게 HTML로 표현하는지 알아보겠습니다. 노트패드나 HTML편집기에 아래 소스와 같이 코딩하세요. [예제파일 : x-html5-audio.html]

<!DOCTYPE html>
< html lang="ko">
< head>
< title>Audio개체 사용하기</title>
< /head>
< body>
  <audio controls="controls" autoplay="autoplay" loop="loop" preload="auto">
    <source src="exam.mp3" type="audio/mpeg" />  ← exam.mp3는 실행할 mp3파일주소입니다.
    <source src="exam.ogg" type="audio/ogg" />  ← exam.ogg는 실행할 ogg파일주소입니다.
    <p>죄송합니다. 지금 사용하고 계신 브라우저가 audio 태그를 지원하지 않습니다.</p>
  </audio>
< /body>
< /html>

* Tip : HTML5는 SGML을 기반으로 동작하는 HTML4.01과는 달리, DOCTYPE 속성 중 DTD선언을 할 필요가 없어졌습니다.
* SGML이란? ISO(국제표준화기구)에서 정의한 문서처리 표준입니다.
* DOCTYPE이란? 현재 문서의 파서/렌더링 방법을 브라우저에게 지시하는 선언문입니다.

위 코드를 HTML5를 지원하는 브라우저에서 실행해보면, 음악이 재생되는 것을 확인할 수 있을겁니다.
물론, 'type'이 "audio/ogg"인 Source 엘리먼트도 추가해주었으므로 Firefox, Opera에서 확인이 가능합니다.

위 소스는 "exam.mp3"파일과 "exam.ogg"파일을 올러옵니다. 또 한 컨트롤이 표시되며, 자동으로 재생되고, 반복적으로 재생되게 설정했습니다. 또, 페이지 로드 시 데이터를 통째로 다운로드 받게 설정했습니다.
무슨 소린지 모르시겠습니까?
Source 엘리먼트에서 'src="exam.mp3"', 'src="exam.ogg"'를 입력했습니다. 이 뜻은 즉, 미디어 개체에서"exam.mp3"파일과 "exam.ogg" 파일을 로드하겠다는 뜻입니다.
또, Audio 엘리먼트에서 'controls="controls"'를 입력하여, 컨트롤 상자가 나타나게 설정했습니다. 이 밖에도'loop="loop"'를 입력하여 자동으로 반복되며, 'autoplay="autoplay"'를 입력하여 자동으로 재생이 되게 코딩하였습니다. 이제 좀 아시겠습니까? ;-)

실전! Javascript를 이용한 간단한 Audio Player 제작하기 (초급)

초급단계에서는 미디어 컨트롤 없이, 버튼으로 오디오를 조작하는 방법에 대해서 배워보겠습니다.
초급단계는 자바스크립트 입문자들을 위해 상세히 설명하겠습니다. [예제파일 : x-html5-player-easy.html]

<!DOCTYPE html>
< html lang="ko">
< head>
< title>Audio개체 사용하기</title>
< script type=“text/javascript”>
< !--
 function doPlay(){
  var obj = document.getElementById(‘player’);
  obj.play();
 }
 function doPause(){
  var obj = document.getElementById(‘player’);
  obj.pause();
 }
 function doStop(){
  var obj = document.getElementById(‘player’);
  obj.pause();
  obj.currentTime=0;
 }
//-->
< /script>
< /head>
< body>
  <audio id=“player” controls="controls" loop="loop" preload="auto">
    <source src="exam.mp3" type="audio/mpeg" />
    <source src="exam.ogg" type="audio/ogg" />
    <p>죄송합니다. 지금 사용하고 계신 브라우저가 audio 태그를 지원하지 않습니다.</p>
  </audio>
  <br />
  <button onclick=“doPlay()” title=“”>Play</button>
  <button onclick=“doPause()” title=“”>Pause</button>
  <button onclick=“doStop()” title=“”>Stop</button>
< /body>
< /html>

간단하죠? Audio 엘리먼트에 "id"속성 부여했습니다. 나머지는 그냥 버튼만 추가하고, onclick 이벤트에 각 javascript 함수들을 실행하게 했습니다. 또 이건 재생/일시정지/정지 기능을 사용할거라서, Audio 엘리먼트에서 "autoplay" 속성을 제거했습니다.
이제 스크립트만 잘 보시면 되는데, 대체로 간단간단 합니다.
"doPlay()"함수는 단순히 Audio 엘리먼트의 재생명령인 "play()" 메소드를 실행하는 함수입니다. "doPause()"함수도 마찬가지로 Audio 엘리먼트의 일시정지 명령인 "pause()" 메소드를 실행하는 함수입니다. "doStop()"함수는 한줄 더 길어졌습니다. "doPause()"함수와 2줄이나 똑같습니다. 하지만, 밑에 "obj.currentTime=0" 한 줄이 추가 되었습니다. 이건 무슨 소리냐 하면, 재생위치를 0초로 설정하라는 스크립트입니다.

실전! Javascript를 이용한 사용법 (중급)

중급단계부터는 자바스크립트를 어느 정도 하실 수 있으시면 진행할 수 있는 단계로서 자바스크립트로 재생 목록을 설정하고 재생하는 방법을 배워보겠습니다. [예제파일 : x-html5-audio-player-std.html]

<!DOCTYPE html>
<html lang="ko">
<head>
<title>Audio개체 사용하기</title>
<script type="text/javascript">
<!--


 var playlists = new Array();
 var pointer = 0;
 playlists.push("exam");
 playlists.push("exam2");


 function getItem(){
  var returnVal = playlists[pointer];
  pointer++;
  if(pointer>playlists.length-1){
   pointer = 0;
  }
  return returnVal;
 }


 function load_proc(){
  var player = document.getElementById('player');
  var source = document.getElementById('source');


  if(player.canPlayType("audio/mpeg")!=""){
    source.src = getItem() + ".mp3";
    source.type = "audio/mpeg";
  } else {
    source.src = getItem() + ".ogg";
    source.type = "audio/ogg";
  }
  player.load();
  player.play();


  if(player.attachEvent != null){
    player.attachEvent("onended",load_proc);
  } else {
    player.addEventListener("ended",load_proc,false);
  }
 }


 if(window.attachEvent != null){
   window.attachEvent("onload",load_proc);
 } else {
   window.addEventListener("load",load_proc,false);
 }


//-->
</script>
</head>
<body>
  <audio id="player" controls="controls" preload="auto">
    <source id="source" src="" type="" />
    <p>죄송합니다. 지금 사용하고 계신 브라우저가 audio 태그를 지원하지 않습니다.</p>
  </audio>
</body>
</html>

스크립트는 비교적으로 단순한 편입니다.
플레이리스트 배열을 만들어서, 플레이할 파일의 이름을 "push"합니다. 페이지가 로드되면 "load_proc()"이라는 함수를 실행하면 "getItem()"함수를 통해 파일명을 가져옵니다. "getItem()"함수는 아까 설정해준 플레이리스트에서 재생할 파일을 순차적으로 반복하여 출력합니다. 이 때, 미디어 컨트롤이 "audo/mpeg"형식의 파일이 재생가능하다면 확장자를 .mp3 붙여주고, 소스의 'type'을 "udio/mpeg"으로 설정해줍니다. 만약 위의 형식을 지원하지 않는다면, 확장자에 ".ogg"를 붙여주고, 소스의 'type'을 "audio/ogg"로 설정해줍니다. 그 후, 미디어 컨트롤로 로드하여 재생을 개시합니다. 또, 반복으로 재생하기 위해서 미디어 컨트롤에 'ended'이벤트를 추가시켜서 "load_proc()"함수를 다시 실행하게 합니다. 간단하죠? ;-)

실전! Javascript를 이용한 사용법 (고급)

고급단계는 자바스크립트를 이용하여 Player를 만들어보는 단계로서, 프로그램 개발지식을 가지고 있으셔야 진행할 수 있는 단계입니다. 스크립트/HTML 나눠서 코딩합니다. [예제파일 : x-html5-audio-player-pro.html, x4.js]

ex)function player(){
 var pointer, playlists, subjectlists;
 var obj_player, obj_source;
 var displayLine;
}
player.prototype.create = function(){
 var obj = this;
 var players, source = null;
 var displayLine = null;
 
 try{
  players = document.createElement("audio");
  source = document.createElement("source");
  displayLine = document.createElement("p");
  btnPlay = document.createElement("button");
  btnStop = document.createElement("button");
  btnPause = document.createElement("button");
  btnPrev = document.createElement("button");
  btnNext = document.createElement("button");
  btnFoward = document.createElement("button");
  btnBackward = document.createElement("button");


  players.preload="preload";
  displayLine.style.cssText="display:block; width:98%; padding:1%; background:#CCC; color:#444";
  displayLine.innerHTML = "Initializing...";
  btnPlay.innerText = "재생";
  btnStop.innerText = "정지";
  btnPause.innerText = "일시정지";
  btnPrev.innerText = "이전트랙";
  btnNext.innerText = "다음트랙";
  btnFoward.innerText = "5초 앞으로";
  btnBackward.innerText = "5초 뒤로";


  if(window.event != null){
   btnPlay.attachEvent("onclick", function(){obj.play();});
   btnStop.attachEvent("onclick", function(){obj.stop();});
   btnPause.attachEvent("onclick", function(){obj.pause();});
   btnPrev.attachEvent("onclick", function(){obj.prev();});
   btnNext.attachEvent("onclick", function(){obj.next();});
   btnFoward.attachEvent("onclick", function(){obj.foward();});
   btnBackward.attachEvent("onclick", function(){obj.backward();});
   players.attachEvent("ontimeupdate",function(){obj.callback();});
   players.attachEvent("onended",function(){obj.next();});
  } else {
   btnPlay.addEventListener("click", function(){obj.play();},false);
   btnStop.addEventListener("click", function(){obj.stop();},false);
   btnPause.addEventListener("click", function(){obj.pause();},false);
   btnPrev.addEventListener("click", function(){obj.prev();},false);
   btnNext.addEventListener("click", function(){obj.next();},false);
   btnFoward.addEventListener("click", function(){obj.foward();},false);
   btnBackward.addEventListener("click", function(){obj.backward();},false);
   players.addEventListener("timeupdate",function(){obj.callback();},false);
   players.addEventListener("ended",function(){obj.next();},false);
  }


  players.appendChild(source);
  document.body.appendChild(players);
  document.body.appendChild(displayLine);
  document.body.appendChild(btnPrev);
  document.body.appendChild(btnBackward);
  document.body.appendChild(btnPause);
  document.body.appendChild(btnPlay);
  document.body.appendChild(btnStop);
  document.body.appendChild(btnFoward);
  document.body.appendChild(btnNext);


  obj.pointer = 0;
  obj.obj_player = players;
  obj.obj_source = source;
  obj.displayLine = displayLine;


  obj.playlists = new Array();
  obj.subjectlists = new Array();
  obj.playlists.push("exam");
  obj.playlists.push("exam2");
  obj.subjectlists.push("Windows Welcome Music - Microsoft");
  obj.subjectlists.push("Welcome Windows98 Start");


  obj.displayLine.innerHTML = "Load Complete!";
 } catch(e) {
  alert(e+"\n "+e.description+"\n\t at player.create");
 }
}
player.prototype.checkFileType = function(){
 var obj = this;
 try{
  var str = arguments[0].substring(arguments[0]-3,arguments[0]);
  var typeRef = {
    'mp3' : "audio/mpeg",
    'ogg' : "audio/ogg"
  }
  if(typeRef[str]!=""){
   return typeRef[str];
  } else {
   return -1;
  }
 } catch(e) {
  alert(e+"\n "+e.description+"\n\t at player.checkFIleType");
 }
}
player.prototype.play = function(){
 var obj = this;
 try{
  if(obj.obj_player.currentTime==0){
  obj.obj_source.type = obj.checkFileType(obj.playlists[obj.pointer]);
  if(obj.obj_player.canPlayType("audio/mpeg")!=""){
    obj.obj_source.type = "audio/mpeg";
    obj.obj_source.src = obj.playlists[obj.pointer] + ".mp3";
    obj.obj_player.src = obj.playlists[obj.pointer] + ".mp3";
  } else {
    obj.obj_source.type = "audio/ogg";
    obj.obj_source.src = obj.playlists[obj.pointer] + ".ogg";
    obj.obj_player.src = obj.playlists[obj.pointer] + ".ogg";
  }
  obj.obj_player.load();
  }
  obj.obj_player.play();
 } catch(e) {
  alert(e+"\n "+e.description+"\n\t at player.play");
 }
}


player.prototype.stop = function(){
 var obj = this;
 try{
  obj.displayLine.innerHTML = "[Stopped]";
  obj.obj_player.pause();
  obj.obj_player.currentTime = 0;
 } catch(e) {
  alert(e+"\n "+e.description+"\n\t at player.create");
 }
}
player.prototype.pause = function(){
 var obj = this;
 try{
  obj.displayLine.innerHTML = "[Paused]";
  obj.obj_player.pause();
 } catch(e) {
  alert(e+"\n "+e.description+"\n\t at player.create");
 }
}
player.prototype.prev = function(){
 var obj = this;
 try{
  obj.stop();
  obj.pointer--;
  if(obj.pointer<0){
    obj.pointer = obj.playlists.length-1;
  }
  obj.play();
 } catch(e) {
  alert(e+"\n "+e.description+"\n\t at player.create");
 }
}
player.prototype.next = function(){
 var obj = this;
 try{
  obj.stop();
  obj.pointer++;
  if(obj.pointer>obj.playlists.length-1){
    obj.pointer = 0;
  }
  obj.play();
 } catch(e) {
  alert(e+"\n "+e.description+"\n\t at player.create");
 }
}
player.prototype.backward = function(){
 var obj = this;
 try{
  obj.obj_player.currentTime -= 5;
 } catch(e) {
  alert(e+"\n "+e.description+"\n\t at player.create");
 }
}
player.prototype.foward = function(){
 var obj = this;
 try{
  obj.obj_player.currentTime += 5;
 } catch(e) {
  alert(e+"\n "+e.description+"\n\t at player.create");
 }
}
player.prototype.callback = function(){
 var obj = this;
 var totalTime, total_min, total_sec;
 var currentTime, run_min, run_sec;
 try{
  totalTime = obj.obj_player.duration;
  currentTime = obj.obj_player.currentTime;
  total_min = Math.floor(Math.floor(totalTime)/60);
  total_sec = Math.floor(totalTime) - total_min*60;
  totalTime = String(total_min) + ":" + String(total_sec);


  run_min = Math.floor(Math.floor(currentTime)/60);
  run_sec = Math.floor(currentTime) - run_min*60;
  currentTime = String(run_min) + ":" + String(run_sec);


  obj.displayLine.innerHTML = "지금 재생중..."+obj.subjectlists[obj.pointer];
  obj.displayLine.innerHTML += " ("+currentTime + " / " + totalTime+")";


 } catch(e) {
  alert(e+"\n "+e.description+"\n\t at player.callback");
 }
}


var player_ctrl = new player;

<!DOCTYPE html>
<html lang="ko">
<head>
<title>Javascript Audio Player (고급용) :: CrossXP.tistory.com</title>
<script type="text/javascript" src="./x4.js"></script>
</head>
<body>
<script type="text/javascript">player_ctrl.create();</script>
</body>
</html>

고급단계는 개발자 대상 예제이므로, 중요한 부분만 설명 하겠습니다. 소스는 알아서 해석해보세요.
전체적으로, player_ctrl이라는 객체로 플레이어를 생성하고, 컨트롤 합니다. 아래는 player_ctrl의 속성, 메소드 함수입니다.

종류	속성/메소드	설명
속성	pointer	현재 몇 번째 트랙을 재생하는지에 대한 값
속성	playlists	재생파일목록을 저장하는 배열
속성	subjectlists	재생파일에 대한 제목을 저장하는 배열
속성	obj_player	미디어컨트롤을 저장하는 객체
속성	obj_source	소스객체를 저장합니다.
속성	displayLine	상태를 나타내는 객체를 저장합니다.
메소드	create()	플레이어를 초기화 시킵니다.
메소드	checkFileType()	파일의 MIMEType을 체크합니다.
메소드	play()	미디어를 재생합니다.
메소드	stop()	미디어를 정지합니다.
메소드	pause()	미디어를 일시정지합니다.
메소드	prev()	이전 트랙을 재생합니다.
메소드	next()	다음 트랙을 재생합니다.
메소드	backward()	5초 뒤로 이동합니다.
메소드	forward()	5초 앞으로 이동합니다.
메소드	callback()	미디어가 재생되는 동안 실행되는 함수입니다.

저작권 출처

종류	컨텐츠명	출처
그림	HTML5 Logo	http://www.w3.org/html/logo/
글	HTML5 Audio	http://www.w3schools.com/html/html5_audio.asp
글	HTML <audio> Tag	http://www.w3schools.com/tags/tag_audio.asp
글	HTML <source> Tag	http://www.w3schools.com/tags/tag_source.asp
글	HTML Audio and Video DOM Reference	http://www.w3schools.com/tags/ref_av_dom.asp
음악	Windows Welcome Music(XP)	http://www.microsoft.com
음악	Welcome Windows98 Start Music	http://www.microsoft.com

마치며...

장문 읽으시느라 수고 많으셨습니다! ;-)

헉, 헉, HTML5 Audio 엘리먼트 설명하다가 하루를 끝내버렸습니다.
(뭐 중간에 김장한다고 배추사고 다듬고 절이고 하긴 했었습니다.)
내일은 포스팅 쉬어야겠습니다. 하루종일 포스팅만 썼더니 너무 피곤합니다.
이번 포스팅이 얼마나 길면, 한글과컴퓨터 한글로 무려 A4용지 15장 분량이 나옵니다.
본인도 놀랐습니다. 책이나 한번 만들어볼까? (읭?)

P.S. 왠지 이 글이 개발자 분들에게 참고하기 좋은 레퍼런스 문서(?)로 많이 조회를 해주실 것 같다.??

자주 묻는 질문들...

Q. Audio태그는 중복사용이 불가능한가요? 여러개를 쓰면 하나만 나옵니다.
A. 아니요. Audio 태그는 중복사용 가능합니다. 다음과 같이 소스를 작성해보고 테스트해보세요.

<h1>HTML5 Audio</h1>
< audio controls="controls">
< source src="test.mp3" />
< /audio>
< h1>HTML5 Audio</h1>
< audio controls="controls">
< source src="test.mp3" />
< /audio>