Creating visuals to go along with music is one of the oldest past times. 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 its 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 your looking for a pre built library to use to visualize audio, I would suggest Wave.jsfor dynamic visuals that respond to a 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 Own Visualizer

To build your own 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.

#visualization #canvas #music #audio #javascript