狠狠撸

HTML5 Audio Visualization
實戰經驗分享
@kmsheng

Who am I ?
? 盛貫銘 ( Kuan Min Sheng )
? 前 MOXA 與 PIXNET 軟體?工程師
? 喜歡畫畫、玩滑板與燒菜

? 希望做出具有獨創性的網?頁元件!
? !藉此研究 HTML5 Web Audio API!
? 找回當初想學程式的初衷與熱情
為什麼要?自幹研究
?音樂視覺化播放器?

codepen.io 與 MDN
是你的好幫?手

AudioContext.createScriptProcessor
AnalyserNode.getByteFrequencyData
ScriptProcesscorNode.onaudioprocess
注意! safari 是回傳空陣列喔

<ks-stereo>
<ks-icosahedron></ks-icosahedron>
<ks-vinyl></ks-vinyl>
<music-control></music-control>
</ks-stereo>
NOTE: icosahedron 與 vinyl 只負責畫圖

Vinyl
Icosahedron
Stereo
Helper
Math Util
Animation
music
control
Audio
Enable Audio Context
Canvas Util
Three
Renderer
Detector
Cache

侦测滑?鼠指标是否在圆内

已知圓?心座標與圓?心?角 G, 求 (x3, y3)
( x3, y3 )
( x1, y1 )
G

已知半徑與弦??長求弧??長
?

context.arc(x, y, radius, 0, RADIAN * progress)
RADIAN = Math.PI * 2

context.?llStyle = ‘rgba(r, g, b, a)’
i^2

魔??鬼藏在細節裡...
壓下去與放開的觸感mouseup event 位置的判定

fallback
Modernizr.audio
Modernizr.webaudio && (! Modernizr.touch)

? browser memory leak!
? cross browser support & fallback!
? custom cursor loading issue!
? html canvas animation stutter!
? responsive handling!
? webgl context gc bug
製作?音樂視覺化元件
可能會遇到的問題

https://github.com/
kmsheng/angular-ks-
stereo
Pull Requests & Issues Welcome !

https://developer.mozilla.org/en-US/docs/Web/API/
ScriptProcessorNode
https://developer.mozilla.org/en-US/docs/Web/API/
AudioContext.createScriptProcessor
http://codepen.io/soulwire/pen/Dscga
https://developer.mozilla.org/en-US/docs/Web/Guide/
Events/Media_events
http://kenjiendo.com
Reference

狠狠撸

Audio Visualization

More Related Content

Audio Visualization