2012년 2월 11일 토요일

html5 audio player를 만들어 보았다.


audio 객체를 이용한 플레이어.

onTimeUpdate 이벤트를 이용해 재생 시간을 업데이트하고
audio.currentTime 을 이용해 구간 이동.

크로스플랫폼(iOS/Android등등) 플레이어가 필요하다면 간단하게 구현할 수 있다.

$=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;
      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;
    },
    onTimeUpdate : function() {
      var currTime = p.audio.currentTime;
      $('#time').textContent=parseInt(currTime/60,10)+':'+parseInt(currTime%60,10);
    }
};
window.onload=p.onLoad;

추가:
http://www.w3.org/TR/html5/the-iframe-element.html#media-element
비디오도 요령은 같다.
duration, timeupdate 관련 내용은
http://www.w3.org/TR/html5/the-iframe-element.html#mediacontroller
이쪽을 보자. 내용이 상당히 방대하다.
하지만 다른 곳에서 검색하는 것보다 역시 레퍼런스를 보는 편이 세세한 걸 잘 알 수 있다.