audio visualization english version
TRANSCRIPT
HTML5 Audio Visualization
@kmsheng
Who am I ?
• Kuan Min Sheng a.k.a kmsheng • Worked for MOXA and PIXNET as a
Software Engineer • Loves drawing, skateboarding and
cooking
• Wanted to create unique web component !• !Study HTML5 Web Audio API!• Enjoy the joy of coding
Why would I want to implement my own audio player?
codepen.io & MDN rule
AudioContext.createScriptProcessor
AnalyserNode.getByteFrequencyData
ScriptProcesscorNode.onaudioprocess
Notice! In safari all elements in a channel array are 0
Module Separation
<ks-stereo> <ks-icosahedron></ks-icosahedron> <ks-vinyl></ks-vinyl> <music-control></music-control> </ks-stereo>
NOTE: icosahedron and vinyl take cares of drawing only
Vinyl
Icosahedron
Stereo
HelperMath Util
Animation
music control
Audio
Enable Audio ContextCanvas Util
Three Renderer
Detector
Cache
Elementary Math
Checking if the mouse is inside a circle
Given coordinates of a circle’s center and central angle G, find point (x3, y3)
( x3, y3 )
( x1, y1 )
G
Given radius and chord, find minor arc
?
context.arc(x, y, radius, 0, RADIAN * progress)
RADIAN = Math.PI * 2
Animation Design
context.fillStyle = ‘rgba(r, g, b, a)’
i^2
context.createRadialGradient
THREE.IcosahedronGeometry
The devil is in the details.
Simulate press and release behaviors
mouseup event optimization (mousedown in circle and allow
mouseup triggers outside of circle)
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
Issues you may experience when creating an audio visualization
https://github.com/kmsheng/angular-ks-
stereo
Pull Requests & Issues Welcome !
What about test ?
TONIGHT WE TEST
IN PRODUCTION
Feel free to contact me via my website
純
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