audio visualization english version

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

kmsheng.com

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