() translation by (you can also view the original English article)
이 튜토리얼은 여러분에게 HTML5 오디오를 소개하고 자신만의 플레이어를 제작하는 방법을 알려드립니다.
빠른 길을 택하고 싶으면 Envato Market에서 판매 중인 HTML5 Audio Player를 보세요. 구매한 제품에 들어 있는 여러 가지 소스를 이용해 재생 목록을 만들 수 있으며, 맞춤형 옵션이 함께 들어가 있습니다.
또한, 여러분을 도와줄 HTML5 전문가를 Envato Studio에서 많이 찾을 수 있습니다.
서론
지금까지는 웹 프로젝트에서 오디오를 실행하는 데 Flash 같은 서드 파티 플러그인에 상당히 의존적이었습니다. 아이폰에서 플러그인을 허용하지 않고, 어도비에서 모바일용 플래시를 더이상 지원하지 않는다는 소식 때문에 많은 개발자가 프로젝트에서 오디오를 실행할 여러 가지 방법을 모색하는 중입니다. HTML5 audio가 그 문제를 해결할 방법으로 제시됩니다.
웹에서 오디오 파일을 재생하는 표준을 HTML5에서 제공합니다. 그러나 아직은 걸음마 단계이며, Flash 오디오 같은 다양한 플러그인에서 제공하는 기능을 모두 수용할 수 있을 때까지 갈 길이 매우 멉니다. 그래도 사용하기 적절한 경우가 대다수입니다.
단순한 Html5 Audio
HTML5를 이용해 웹 페이지에서 오디오를 실행하는 가장 간단한 방법은 새로운 audio 태그를 사용하는 것입니다. 아래 코드를 이용해 HTML5 문서에 audio 태그를 넣으세요.
1 |
<audio controls="controls"> |
2 |
<source src="track.ogg" type="audio/ogg" /> |
3 |
<source src="track.mp3" type="audio/mpeg" /> |
4 |
Your browser does not support the audio element. |
5 |
</audio>
|
위의 코드에서 <audio> 태그를 명시하고, controls 속성을 정의한 것을 볼 수 있습니다. 여러분은 플레이어용 기본 controls를 본 것입니다.
<audio>에 중첩된 'src' 태그가 2개 있습니다. 하나는 MP3 트랙을 명시하고, 다른 하나는 OGG 포맷을 명시합니다. OGG 포맷은 특히 파이어폭스에서 음악을 재생하는 데 사용됩니다. 왜냐하면, 플러그인을 사용하지 않는 MP3를 파이어폭스에서 지원하지 않는다는 라이센스 이슈가 있기 때문입니다. '브라우저에서 오디오 요소를 지원하지 않습니다.'라고 쓰인 텍스트 한 줄은 지원되지 않는 브라우저를 사용하는 사용자에게 문제가 발생한 이유를 알게 해줍니다.
기본 HTML5 오디오 플레이어
Html5 Audio 태그 속성
HTML5 속성에 대해 글로벌한 지원이 있으나, 태그 역시 자체적으로 특유한 속성 세트를 지원하고 있습니다.
- autoplay - 페이지가 로딩되자마자 자동으로 트랙을 재생할지 설정합니다. 그 값으로 "true"를 넣거나 "" 비워둘 수 있습니다.
- controls - 위의 예에서 보았듯이, '재생(play), 일시 정지(pause) 등'과 같은 네이티브 컨트롤을 보이게 할지 명시합니다.
- loop - "loop"로 설정할 수 있으며, 트랙이 끝나고 반복할지 명시합니다.
- preload - "auto" (페이지 로딩을 마치는 즉시 파일을 로딩할지 알려줌), "metadata" (메타데이터, 트랙 제목 등만 로딩할지 알려줌), "none" (페이지가 로딩되어도 파일을 로딩하지 말라고 지시함)으로 값을 설정할 수 있습니다.
- src - 이 또한 위의 예에서 보았습니다. audio 태그가 재생해야 하는 곡의 url을 명시합니다.
최고의 볼륨을 넘어
우리는 앞에서 한두 단계를 통해 HTML5 audio의 가장 단순한 형식을 보았습니다. 자바스크립트와 audio 태그를 함께 이용하면 흥미롭고 유용한 오디오 플레이어를 제작할 수 있습니다. jQuery에서 무엇이 가능한지 살펴봅시다. jQuery에서 document ready를 정의하고 나서 오디오 파일에 대한 변수를 새로 만들 수 있습니다. 관련 코드는 다음과 같이 단순합니다.
1 |
var myaudio = new Audio('mysong.mp3');
|
정말 단순하죠! 다음에는 audio에서 액션을 실행하고 싶을 때마다 'myaudio' 변수로 액션을 실행할 수 있습니다. 변수를 이용해 취할 수 있는 액션 목록은 다음과 같습니다. 그 목록을 메모해 두세요. 오디오 플레이어를 제작할 때 이 튜토리얼에서 나중에 이 중 몇 가지를 활용할 것입니다.
1 |
myaudio.play(); - This will play the music. |
2 |
myaudio.pause(); - This will stop the music. |
3 |
myaudio.duration; - Returns the length of the music track. |
4 |
myaudio.currentTime = 0; - This will rewind the audio to the beginning. |
5 |
myaudio.loop = true; - This will make the audio track loop. |
6 |
myaudio.muted = true; - This will mute the track |
음악 재생이 끝나자마자 함수를 호출하고 싶다면 'myaudio.addEventListener('ended',myfunc)'을 사용하면 됩니다. 이렇게 하면 음악이 끝나고 'myfunc()'을 호출합니다.
HTML5 오디오 플레이어 제작: 마크업
여러분이 HTML5 audio에 대해 배경 지식을 습득했고 기본 원칙을 이해했으니, 실제로 연습하면서 맞춤형 HTML5 오디오 플레이어를 제작해 보겠습니다. 디자인 과정은 이 튜토리얼 범위를 벗어나기 때문에 제외했습니다. 하지만 첨부된 소스 코드를 다운로드하고 PSD 파일을 살펴보면 어떻게 이 작업을 진행했는지에 대한 아이디어를 얻을 수 있을 것입니다.
문서의 상단은 HTML5 doctype으로 구성됩니다. Yahoos CSS Reset로 초기화하고, 제목은 구글의 웹 폰트인 'Lobster'를 적용합니다. 그 아래에는 최신 jQuery와 커스텀 JavaScript 파일인 js.js가 있습니다. 마지막에는 파이어폭스에서 HTML5의 input 속성이 range인 것을 보여주도록 하는 html5slider.js가 있습니다. 오디오 볼륨을 조절하는 바(scrubber)에 적용됩니다.
1 |
<!DOCTYPE html>
|
2 |
<head>
|
3 |
<title>HTML5 Audio Tutorial</title> |
4 |
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> |
5 |
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> |
6 |
<link rel="stylesheet" type="text/css" href="css/style.css"> |
7 |
<script src="http://code.jQuery.com/jQuery-latest.js" type="text/javascript"></script> |
8 |
<script type="text/javascript" src="js/js.js"></script> |
9 |
<script type="text/javascript" src="js/html5slider.js"></script> |
10 |
</head>
|
h1 제목 다음으로 "container"와 "gradient" class가 있는 div를 생성합니다. 다른 요소에 재사용될 거라서 gradient를 별도의 class로 만듭니니다. ".container" 안에 (앨범 표지가 될) 이미지를 추가합니다. 그 아래 앵커 태그 3개는 플레이어에서 컨트롤처럼 동작할 것입니다. 앵커 태그 사이에 볼륨 조절바/HTML5, 속성값이 range인 input이 보입니다.
1 |
<body>
|
2 |
|
3 |
<h1>HTML 5 Audio Player</h1> |
4 |
|
5 |
<div class="container gradient"> |
6 |
|
7 |
<img class="cover" src="images/cover.jpg" alt=""> |
8 |
|
9 |
<div class="player gradient"> |
10 |
|
11 |
<a class="button gradient" id="play" href="" title=""></a> |
12 |
<a class="button gradient" id="mute" href="" title=""></a> |
13 |
|
14 |
<input type="range" id="seek" value="0" max=""/> |
15 |
|
16 |
<a class="button gradient" id="close" href="" title=""></a> |
17 |
|
18 |
</div><!-- / player --> |
19 |
|
20 |
</div><!-- / Container--> |
21 |
</body>
|
22 |
</html>
|
HTML5 오디오 플레이어 제작: 스타일
CSS 코드를 상세히 설명하기보다는 전체적으로 요약하고, 여러분이 유의해야 할 특정 부분에 대해 알려드리겠습니다.
아래 코드에서 플레이어에 적용할 그래디언트를 작성했습니다. CSS gradient editor를 이용해 그래디언트 소스를 생성했습니다. 그다음에 CSS3 transition이 일부 들어간 플레이어 ".container"를 작성했습니다.
여러분은 제가 CSS3 box sizing 속성값을 'border-box'로 설정한 것도 알아챘겠지요. 이렇게 하면 container 둘레의 padding 10px를 제가 명시한 너비 안에 포함시킬 수 있습니다. 이 경우에 너비는 427px입니다. 이렇게 설정하지 않으면, padding 값이 427px에 더해져 제가 실제로 원했던 container 크기보다 더 커졌을 것입니다. 요즘에는 실전에서 * {box-sizing: border-box;}를 적용하는 사례가 많아지고 있습니다. 스타일을 더 직관적으로 작성하는 방식이죠.
또한, 플레이어가 처음 시작할 때 멋지게 변하는 효과를 보여주려고 ".coverlarge"에 CSS3 transition을 추가했습니다. CSS 소스가 처음에는 약간 어색하게 보일 것입니다. 하지만 대부분은 브라우저별로 제공하는 접두사(prefix) 코드이며, 오디오 플레이어가 다수의 브라우저에서 똑같이 보이고 작동하게 합니다.
1 |
.gradient { |
2 |
border: 1px solid black; |
3 |
|
4 |
-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2); |
5 |
-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2); |
6 |
box-shadow: inset 0 1px 0px rgba(255,255,255,.2); |
7 |
background: #494949; /* Old browsers */ |
8 |
background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); |
9 |
|
10 |
background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); |
11 |
background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); |
12 |
background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); |
13 |
background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */ |
14 |
-image filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */ |
15 |
}
|
16 |
|
17 |
.container { |
18 |
-webkit-transition: all .7s ease; |
19 |
-moz-transition: all .7s ease; |
20 |
-o-transition: all .7s ease; |
21 |
-ms-transition: all .7s ease; |
22 |
transition: all .7s ease; |
23 |
position: absolute; |
24 |
width: 427px; |
25 |
height: 70px; |
26 |
|
27 |
-webkit-border-radius: 10px; |
28 |
-moz-border-radius: 10px; |
29 |
border-radius: 10px; |
30 |
|
31 |
-webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2); |
32 |
-moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2); |
33 |
box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2); |
34 |
top: 50%; |
35 |
left: 50%; |
36 |
margin: -214px 0px 0px -214px; |
37 |
padding: 10px; |
38 |
|
39 |
-webkit-box-sizing: border-box; |
40 |
-moz-box-sizing: border-box; |
41 |
-ms-box-sizing: border-box; |
42 |
box-sizing: border-box; |
43 |
}
|
44 |
|
45 |
|
46 |
.containerLarge { |
47 |
height: 427px; |
48 |
}
|
49 |
|
50 |
.cover { |
51 |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
52 |
filter: alpha(opacity=0); |
53 |
opacity: 0; |
54 |
width: 398px; |
55 |
height: 10px; |
56 |
border: 2px solid black; |
57 |
|
58 |
-webkit-border-radius: 5px; |
59 |
-moz-border-radius: 5px; |
60 |
border-radius: 5px; |
61 |
|
62 |
-webkit-box-shadow: inset 0px 5px 5px rgba(0,0,0,1); |
63 |
-moz-box-shadow: inset 0px 5px 5px rgba(0,0,0,1); |
64 |
box-shadow: inset 0px 5px 5px rgba(0,0,0,1); |
65 |
}
|
66 |
|
67 |
.coverLarge { |
68 |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
69 |
filter: alpha(opacity=100); |
70 |
opacity: 1; |
71 |
height: 398px; |
72 |
|
73 |
-webkit-transition: opacity .7s ease; |
74 |
-moz-transition: opacity .7s ease; |
75 |
-o-transition: opacity .7s ease; |
76 |
-ms-transition: opacity .7s ease; |
77 |
transition: opacity .7s ease; |
78 |
|
79 |
-webkit-transition-delay: .5s; |
80 |
-moz-transition-delay: .5s; |
81 |
-o-transition-delay: .5s; |
82 |
-ms-transition-delay: .5s; |
83 |
transition-delay: .5s; |
84 |
}
|
이 단계에서 보이는 오디오 플레이어
플레이어로 쓰일 container를 완성했으니 실제 컨트롤을 만들 때입니다. CSS sprites를 이용해 버튼 대부분을 제작했습니다.
안타깝게도 IE는 HTML5 input 속성값인 range를 지원하지 않습니다. 그래서 IE 사용자에게 오디오 볼륨 조절 바를 보여주지 않기로 정했습니다. 여러분이 그것을 수용할 수 없는 직위에 있다면, 제가 이용했던 방법과 유사한 방법으로 jQuery UI slider를 사용하면 됩니다. 그래도 저는 볼륨 바를 숨기는 쪽을 선택했습니다. 고로 input{display:none\9!important;} 이 코드는 기본적으로 ie 사용자가 input을 볼 수 없게 합니다. (\9에 대해 더 알고 싶다면 Stack Overflow에서 이 스레드(thread)를 확인하세요.)
HTML5 range 슬라이더를 이용할 때 문제는 소수의 브라우저에서만 맞춤형 스타일을 지원한다는 것입니다. 주로 웹킷 브라우저(Chrome과 Safari)에서요. Opera와 Firefox에서는 아쉽게도 표준 range 슬라이더만 보여줍니다. 모든 브라우저에서 적용되는 맞춤형 스타일이 필요하다면 앞에서 얘기했던 jQuery UI slider를 사용하세요. input::-webkit-slider-thumb 속성에서 웹킷 브라우저용 맞춤형 스타일을 볼 수 있습니다.
1 |
.player { |
2 |
-webkit-box-sizing: border-box; |
3 |
-moz-box-sizing: border-box; |
4 |
-ms-box-sizing: border-box; |
5 |
box-sizing: border-box; |
6 |
position: absolute; |
7 |
width: 300px; |
8 |
bottom: 10px; |
9 |
width: 95%; |
10 |
|
11 |
-webkit-border-radius: 3px; |
12 |
-moz-border-radius: 3px; |
13 |
border-radius: 3px; |
14 |
padding: 5px; |
15 |
}
|
16 |
|
17 |
.button { |
18 |
display: block; |
19 |
width: 34px; |
20 |
height: 34px; |
21 |
background-image: url(../images/sprite.png); |
22 |
background-repeat: no-repeat; |
23 |
float: left; |
24 |
margin-right: 5px; |
25 |
}
|
26 |
|
27 |
#play { |
28 |
background-position: 6px 5px; |
29 |
}
|
30 |
|
31 |
#pause { |
32 |
background-position: -32px 5px; |
33 |
}
|
34 |
|
35 |
#mute { |
36 |
background-position: -63px 5px; |
37 |
}
|
38 |
|
39 |
#muted { |
40 |
background-position: -106px 5px; |
41 |
}
|
42 |
|
43 |
input[type="range"] { |
44 |
width: 250px; |
45 |
margin-top: -5px; |
46 |
}
|
47 |
|
48 |
#close { |
49 |
float: right; |
50 |
background-position: -146px 5px; |
51 |
display: none; |
52 |
}
|
53 |
|
54 |
.volume { |
55 |
position: absolute; |
56 |
height: 100px; |
57 |
width: 34px; |
58 |
border: 1px solid black; |
59 |
background-color: #242323; |
60 |
top: -97px; |
61 |
display: none; |
62 |
}
|
63 |
input{ |
64 |
display:none\9!important; |
65 |
}
|
66 |
input[type="range"] { |
67 |
-webkit-appearance: none; |
68 |
border: 1px solid black; |
69 |
position: absolute; |
70 |
top: 18px; |
71 |
display: block; |
72 |
width: 63%; |
73 |
height: 15px; |
74 |
|
75 |
-webkit-border-radius: 20px; |
76 |
-moz-border-radius: 20px; |
77 |
border-radius: 20px; |
78 |
background-color: #242323; |
79 |
left: 90px; |
80 |
|
81 |
-webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6); |
82 |
-moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6); |
83 |
box-shadow: inset 0px 4px 4px rgba(0,0,0,.6); |
84 |
}
|
85 |
|
86 |
input::-webkit-slider-thumb { |
87 |
-webkit-appearance: none; |
88 |
width: 20px; |
89 |
height: 20px; |
90 |
border:1px solid black; |
91 |
|
92 |
-webkit-border-radius: 10px; |
93 |
border-radius: 10px; |
94 |
background: #80e4df; /* Old browsers */ |
95 |
background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); |
96 |
|
97 |
background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); |
98 |
background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); |
99 |
background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */ |
100 |
}
|
HTML5 오디오 플레이어 제작: jQuery
스타일과 마크업 작업이 끝났으니 플레이어를 살아 움직이게 할 때입니다. 자바스크립트 프레임워크인 jQuery를 사용해서 이 작업을 할 수 있습니다. jQuery에서 document ready를 작성했다면 jQuery 객체에 저장할 변수를 생성합니다.
1 |
container = $('.container');
|
2 |
cover = $('.cover');
|
3 |
play = $('#play');
|
4 |
pause = $('#pause');
|
5 |
mute = $('#mute');
|
6 |
muted = $('#muted');
|
7 |
close = $('#close');
|
8 |
song = new Audio('music/track1.ogg','music/track1.mp3');
|
9 |
duration = song.duration; |
위의 "song" 변수에 두 가지 트랙을 명시했다는 것을 알 수 있습니다. Firefox용 OGG와 다른 브라우저용 MP3입니다. 그다음에 브라우저가 MP3 재생할 수 있는지를 확인하는 IF 조건문을 작성했습니다. 재생할 수 있으면, "song" 변수 소스에 MP3 트랙을 적용합니다. 재생할 수 없다면, 'OGG' 포맷을 재생할 것입니다.
1 |
if (song.canPlayType('audio/mpeg;')) {
|
2 |
song.type= 'audio/mpeg'; |
3 |
song.src= 'music/track1.mp3'; |
4 |
} else {
|
5 |
song.type= 'audio/ogg'; |
6 |
song.src= 'music/track1.ogg'; |
7 |
} |
그다음으로 작성할 것은 음악을 재생하고 일시 정지시킬 click 함수입니다. 저는 오디오를 시작하는데 오디오 액션 play()를 사용했고, 재생 버튼을 일시 정지(pause) 버튼으로 교체하는데 jQuery 메서드인 replaceWith를 적용했습니다.
또한, "coverLarge"와 "containerLarge" class를 "container"와 "cover"에 추가했습니다. 제가 CSS transition을 일찍이 CSS에 있는 이 class에 작성했기 때문에 오디오가 재생을 시작할 때 멋지게 변환할 것입니다. "pause" 함수도 유사하게 동작하지만 변환 효과는 없습니다. 그 함수는 버튼이 클릭됐을 때 일시 정지 버튼을 "재생" 버튼으로 교체합니다.
1 |
play.live('click', function(e) {
|
2 |
e.preventDefault(); |
3 |
song.play(); |
4 |
|
5 |
$(this).replaceWith('<a class="button gradient" id="pause" href="" title=""></a>');
|
6 |
container.addClass('containerLarge');
|
7 |
cover.addClass('coverLarge');
|
8 |
$('#close').fadeIn(300);
|
9 |
$('#seek').attr('max',song.duration);
|
10 |
}); |
11 |
|
12 |
pause.live('click', function(e) {
|
13 |
e.preventDefault(); |
14 |
song.pause(); |
15 |
$(this).replaceWith('<a class="button gradient" id="play" href="" title=""></a>');
|
16 |
|
17 |
}); |
음소거(mute)과 음소거된 상태의 버튼은 재생과 일시 정지 버튼과 비슷하게 동작하지만, 관련 액션을 호출하고 버튼을 적절한 대체물로 교체합니다.
1 |
mute.live('click', function(e) {
|
2 |
e.preventDefault(); |
3 |
song.volume = 0; |
4 |
$(this).replaceWith('<a class="button gradient" id="muted" href="" title=""></a>');
|
5 |
|
6 |
}); |
7 |
|
8 |
muted.live('click', function(e) {
|
9 |
e.preventDefault(); |
10 |
song.volume = 1; |
11 |
$(this).replaceWith('<a class="button gradient" id="mute" href="" title=""></a>');
|
12 |
|
13 |
}); |
사용자가 "닫기" 버튼을 클릭할 때는 "containerLarge"와 "coverLarge" class를 삭제하는 jQuery를 호출합니다. 그러면 표지 이미지를 숨기고 실행 중인 플레이어를 닫습니다. 그런 다음 pause() 액션을 호출해서 플레이어를 중지하고, 오디오의 currentTime을 0으로 재설정합니다. 이렇게 하면 트랙이 처음으로 되돌아갑니다.
1 |
$('#close').click(function(e) {
|
2 |
e.preventDefault(); |
3 |
container.removeClass('containerLarge');
|
4 |
cover.removeClass('coverLarge');
|
5 |
song.pause(); |
6 |
song.currentTime = 0; |
7 |
$('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""></a>');
|
8 |
$('#close').fadeOut(300);
|
9 |
}); |
이제는 id가 "seek"인 오디오 볼륨 조절 바로 옮겨갈 때입니다. 첫 번째 함수에서는 볼륨 조절 바가 오디오에서 어디까지 이동할 수 있는지 작성합니다. 누군가 볼륨 조절 바를 움직일 때마다 그 변화를 감지하게 해주면 됩니다. 그다음에는 볼륨 조절 바가 이동했던 곡의 부분과 song.currentTime을 일치하도록 설정합니다. 곡의 재생 길이(duration)를 반영하도록 max 속성도 설정해 줍니다.
1 |
$("#seek").bind("change", function() {
|
2 |
song.currentTime = $(this).val(); |
3 |
$("#seek").attr("max", song.duration);
|
4 |
}); |
jQuery의 마지막 부분은 "#seek" 볼륨 조절 바를 오디오의 재생 길이를 따라 이동하게 하는 것입니다. 볼륨 조절 바에 event listener를 추가하고 오디오 시간(time)이 업데이트 될 때 그 함수를 호출하게 하면 됩니다. 현재의 songtime값을 받는 "curtime" 변수를 설정했습니다. 그런 다음, 오디오의 현재 시간 위치를 반영하도록 볼륨 조절 바의 값을 업데이트 합니다.
1 |
song.addEventListener('timeupdate',function (){
|
2 |
curtime = parseInt(song.currentTime, 10); |
3 |
$("#seek").attr("value", curtime);
|
4 |
}); |
드디어 완성했습니다! 여러분의 사이트나 앱에서 실행 가능한 HTML5 오디오 플레이오입니다.
결론
앞에서도 얘기했듯이 HTML5 오디오는 아직은 걸음마 단계이고 앞으로 개선의 여지가 많이 있습니다. 바로 지금 오디오는 곡을 재생하는 용도로 설계되었습니다. 그에 따라 항상 서버에서 오디오를 스트리밍하게 될 것입니다. 그렇게 되면 결과적으로 재생하는 데 문제가 있는 브라우저가 일부 나오게 됩니다. 늘 문제가 되는 것은 아니지만, 때론 오디오 파일이 전부 다운로드되기 전에 재생을 시작한다는 의미입니다.
이는 게임에서의 사운드 효과나 전용 오디오 앱과 같은 것에 HTML5 audio를 사용하려고 한다면, 잠재적으로 문제가 발생할 수 있습니다. 이런 이유로 구글 직원들은 audio 태그의 약점을 개선할 방안을 찾고 있습니다. 구글에서 "Web Audio API"를 제작하고 그에 관한 제안서를 W3C에 제출했습니다. 네이티브 HTML5 오디오보다 더 강력하다는 것을 입증하겠지만, 문제는 지금 단계에 있는 것이죠. (눈치 채셨나요?!) Chrome에서만 동작한다는 거에요.
여러분은 구글의 Web Audio API에 대해 자세히 읽고, Google code에서 예제를 보거나 web audio specification을 확인할 수 있습니다.
여러분이 HTML5 audio에 관해 즐겁게 배우고, 자신만의 플레이어를 제작할 수 있기를 바랍니다. 저의 플레이어에는 기본 컨트롤이 들어있지만, 이에 멈추지 말고 볼륨 제어와 같은 기능을 더 많이 추가하고 맞춤형 애니메이션까지도 추가해보세요. 작은 생각이나 실험을 통해 여러분은 훌륭한 오디오 플레이어를 제작할 수 있습니다. 소스 코드를 다운로드하세요. 여러분이 제작한 오디오 플레이어를 볼 날을 고대합니다!
그리고 만약에 여러분이 오디오 플레이어와 HTML5에 있는 다른 미디어와 함께 작업할 수 있는 더 많은 옵션을 알고 싶다면, Envato Market에 있는 HTML5 Media 항목을 확인해 보세요.
