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

HelperMath Util

Animation

music control

Audio

Enable Audio ContextCanvas 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.fillStyle = ‘rgba(r, g, b, a)’

i^2

context.createRadialGradient

THREE.IcosahedronGeometry

魔⻤⿁鬼藏在細節裡...

壓下去與放開的觸感mouseup event 位置的判定

Button Status Design

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 !

What about test ?

TONIGHT WE TEST

IN PRODUCTION

kmsheng.com

個⼈人⼯工作室純

Q & A

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