HTML5와 자바스크립트로 사운드 플레이어 만들기를 해 보겠습니다.
이렇게 하면 아주 간단하 사운드 플레이어가 만들어 졌습니다.
물론 HTML5를 사용해서
<audio controls="controls">
<source src="test.mp3" />
</audio>
이렇게 구현할 수도 있겠죠.
하지만 나만의 디자인과
각 요소를 모두 콘트롤하는 플레이어를 만드는 것을 목표로 해서 작업하겠습니다.
아래와 같이 작업하면 현재의 진행상태와 볼륨상태가 나옵니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>사운드플레이어</title>
</head>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var audio = new Audio("test.mp3");
audio.addEventListener(
"timeupdate", function(e){
$("time_info").innerHTML = "진행 : " + audio.currentTime + "/" + audio.duration;
$("volume_info").innerHTML = "볼륨 : " + audio.volume;
}
);
function changeVolume(v){
var new_v = audio.volume + v;
if( 0 <= new_v && new_v <= 1.0){
audio.volume = new_v;
}
}
function audio_play(){
audio.play();
}
function audio_pause(){
audio.pause();
}
function audio_stop(){
audio.currentTime = 0;
audio.pause();
}
</script>
<body>
<h2>사운드플레이어</h2>
<div id="time_info"></div>
<div id="volume_info"></div>
<div id="player_div">
<input type="button" value="play" onClick="audio_play()" />
<input type="button" value="pause" onClick="audio_pause()" />
<input type="button" value="pause" onClick="audio_pause()" />
<input type="button" value="Vol+" onClick="changeVolume(+0.2)" />
<input type="button" value="Vol-" onClick="changeVolume(-0.2)" />
</div>
</body>
</html>
'WEB_TECH > HTML5' 카테고리의 다른 글
| 단말기의 기종을 알아내는 구문 (0) | 2013.06.13 |
|---|---|
| canvas animation 예제입니다. (0) | 2013.05.24 |
| Geolocation API (0) | 2012.10.25 |
| Google Maps Javascript API V3 (0) | 2012.10.25 |
| 새로운 HTML5 Javascript API (0) | 2012.10.22 |
| <canvas>에 4가지 간단 그리기 예제 (0) | 2012.10.22 |
| <canvas>란 무엇일까? (0) | 2012.10.22 |
| HTML5에서 새로 사용된 엘리먼드들 (0) | 2012.10.22 |
| html5에서 사운드 사용하기 (0) | 2012.08.09 |
