spectrum learns to dig

HTML5 + js 를 UI로 사용하는 앱을 만들때 제일 당혹스러운 점은 크로스플랫폼으로 사용하기 위해 같은 기준인 UI 렌더러를 쓰는 목적이었는데도 불구하고 파편화가 매우 심각하다는 점이다. 해상도 같은 건 논외로 치고 공통으로 사용하는 WebView 시스템 컴포넌트가 똑같은 " Modern Browser "가 아니라는 점이다. 심지어 같은 OS라고 해도 버전별로 다르다는 건 문제가 크다. 그래서 canvas만 가지고 떼어내서 만들까 어쩔까하고 고민하면서 검색 중  https://crosswalk-project.org/  프로젝트를 발견. webRTC( https://github.com/alongubkin/phonertc )나 webAudio( https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html )같은 것들도 있지만 가장 큰 관심사는 iOS에서 safari가 아니라 chrome 일지가 첫번째. 첫번째 시도. cordova platform add ios cordova run ios Safari에서 확인. 기존 mobile safari임. cordova add cordova plugin add cordova-plugin-crosswalk-webview 소스 확인. 역시 WKWebView는 없음. 없다고 했는데 확인사살. 그러면  https://crosswalk-project.org/documentation/ios/quick_start_guide.html 이렇게 소스코드를 아예 받아서 해볼 수 밖에 없다. git clone https://github.com/crossw...

콘솔창을 열고 > jsbin.home(' <key> ', ' <value> '); value는 아무래도 상관없다. 중복체크 후 Title 에 해당키가 생기는 것을 확인 할 수 있음. 그리고 jsbin.com/list를 들어가보면 key를 생성한 시점부터 만든 파일들을 이력과 함께 조회 가능함. AJAX 테스트를 위해 더미값을 넣어보고 싶을때가 있다. pastie 같은 텍스트 전용 서비스를 이용한느 것도 방법이겠지만 css, html을 다 지우고 js 쪽에 JSON을 넣고 해당 URL에 /js 를 붙이는 식으로 접근 가능하다. cross domain 문제 때문에 골머리를 앓지 않아도 된다. 예) http://jsbin.com/qweas/js http://jsbin.tumblr.com/ 그 외에도 유용한 팁이 가득. jsdo.it 과 더불어 참 좋은 html5 연습장.

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/rG9b setInterval 로 bpm 카운터를 만들어봤더니 시간이 말도 안되게 안맞아서 requestAnimFrame을 사용해 오차를 측정해보았다. var p = {     frameRate : 60,     fps : document.querySelector('#fps'),     deltaTime : 0,     onLoad : function() { fps.onclick=p.onClick;     },     onClick : function() { p.setDelta(); p.animationLoop();     },     setDelta : function() { p.deltaTime = +(new Date());     },     animationLoop : function() { var currentTime = +(new Date()); p.fps.innerHTML= (currentTime - p.deltaTime) +'msec/frame in 60frames'; p.setDelta(); requestAnimFrame(p.animationLoop);     } }; window.onload=p.onLoad; window.requestAnimFrame = (function(callback) {     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || ...