spectrum learns to dig

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...

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.aud...