Building an Audio Visualizer With JavaScript.
Creating visuals to go along with music is one of the oldest pastimes. You will find many videos on YouTube with some pretty neat designs being played in parallel with music. Usually, your operating system will also have a built-in audio visualizer, although it's relatively limited. But the web as a whole seems to be lacking in a nice selection of visualizers. This is likely due to the canvas API and web audio API being relatively new.
Audio Visualizer Libraries
If you’re looking for a pre-built library to use to visualize audio, I would suggest Wave.js for dynamic visuals that respond to an audio html element or media stream. This library works with browser environments and has a npm package for React type environments. For working with static visuals you can use Wavesurfer.js. Which has been around for a while but does lack a npm package.
Building Your Visualizer
To build your visualizer with javascript there are only a few basic components that you need to get the flow working.
- The canvas API
- The web audio API
- requestAnimationFrame
With these tools, you can build just about any 2d or 3d visual.
