Audio visualization English Version
1 like598 views
This document discusses creating an HTML5 audio visualization component. It introduces the author Kuan Min Sheng and their motivation to build a unique web component. It provides an overview of using the HTML5 Web Audio API, including the AudioContext, AnalyserNode, and ScriptProcessorNode interfaces. It then describes the component's modular design and shows examples of animating visualizations, handling user input, and addressing cross-browser compatibility issues. References for further reading are provided at the end.
Audio visualization English Version
- 2. Who am I ? Kuan Min Sheng a.k.a kmsheng Worked for MOXA and PIXNET as a Software Engineer Loves drawing, skateboarding and cooking
- 3. 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?
- 4. codepen.io & MDN rule
- 5. AudioContext.createScriptProcessor AnalyserNode.getByteFrequencyData ScriptProcesscorNode.onaudioprocess Notice! In safari all elements in a channel array are 0
- 7. <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
- 8. Vinyl Icosahedron Stereo Helper Math Util Animation music control Audio Enable Audio Context Canvas Util Three Renderer Detector Cache
- 10. Checking if the mouse is inside a circle
- 11. Given coordinates of a circles center and central angle G, 鍖nd point (x3, y3) ( x3, y3 ) ( x1, y1 ) G
- 12. Given radius and chord, 鍖nd minor arc ?
- 13. context.arc(x, y, radius, 0, RADIAN * progress) RADIAN = Math.PI * 2
- 14. Animation Design
- 15. context.鍖llStyle = rgba(r, g, b, a) i^2
- 18. The devil is in the details. Simulate press and release behaviors mouseup event optimization (mousedown in circle and allow mouseup triggers outside of circle)
- 20. fallback Modernizr.audio Modernizr.webaudio && (! Modernizr.touch)
- 21. 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
- 22. https://github.com/ kmsheng/angular-ks- stereo Pull Requests & Issues Welcome !
- 23. What about test ?
- 24. TONIGHT WE TEST IN PRODUCTION
- 25. kmsheng.com
- 26. Feel free to contact me via my website 膣
- 27. Q & A