html5 audio player를 만들어 보았다. #2

html5 audio player를 만들어 보았다.
에서 언급했던 audio player 를 조금 업데이트.

마찬가지로 소스는 이곳 : http://jsdo.it/spectrum/webAudioPlayer
플레이 전용(모바일 등등)은 http://jsrun.it/spectrum/webAudioPlayer

전체 시간을 보여주고 재생 배속을 설정할 수 있다.
소스는 대동소이.
duration 을 사용. 전체 재생 길이를 보여주고
playbackRate 으로 재생 배속을 변경하도록 하였다.
http://dev.w3.org/html5/spec/Overview.html#htmlmediaelement
의외로 오디오 재생 피치를 유지한 상태로 정말 배속만 변하더라.
double 값이라서 세세한 조정은 가능함.
아쉽게도 android/iOS에서는 배속 지원은 안함.

$=function(element) { 
    return document.querySelector(element);
};
p={
    audio : null,
    onLoad: function() {
 p.audio = new Audio('http://k003.kiwi6.com/hotlink/3dgmyavs49/your_name_ft_gaduk.mp3');
 $('#play').onclick=p.onPlay;
 $('#stop').onclick=p.onStop;
 $('#pause').onclick=p.onPause;
 $('#rew10').onclick=p.on10rew;
 $('#ff10').onclick=p.on10ff;
 $('#rate').onclick=p.onRate;
 p.audio.addEventListener('timeupdate', p.onTimeUpdate, false);
    },
    onPlay: function() {
 p.audio.play();
    },
    onStop: function() {
 p.audio.currentTime = 0;
 p.onPause();
    },
    onPause: function() {
 p.audio.pause();
    },
    on10rew: function() {
 p.audio.currentTime -=10;
    },
    on10ff: function() {
 p.audio.currentTime +=10;
    },
    onRate: function() {
 var rate = $('#rate').textContent;
 $('#rate').textContent= rate === '1x' ? '2x' : rate === '2x' ? '1/2x' : '1x';
 rate = $('#rate').textContent;
 p.audio.playbackRate = rate === '1x' ? 1.0 : rate=== '2x' ? 2.0 : 0.5;
    },
    onTimeUpdate : function() {
 var currTime = p.audio.currentTime;
 $('#time').textContent=parseInt(currTime/60,10)+':'+
     parseInt(currTime%60,10) + '/' + 
     parseInt(p.audio.duration/60,10)+':'+
     parseInt(p.audio.duration%60,10);
    }
};
window.onload=p.onLoad;