html5 audio player를 만들어 보았다.

http://jsdo.it/spectrum/webAudioPlayer

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
이쪽을 보자. 내용이 상당히 방대하다.
하지만 다른 곳에서 검색하는 것보다 역시 레퍼런스를 보는 편이 세세한 걸 잘 알 수 있다.