🙋🏻‍♂️ It's been a while since I shared. In my most recent adventure, I wanted to add good-looking audio visualizers to my project and I didn't want to make any effort to understand audio principles. So I went scrounging GitHub for some good libraries and boy did I find one!

🌟 My Favourite Library

I think this particular library is by far the best, in terms of variation and simplicity. The visualizations are stunning and customizable, and the library is solid providing excellent support for integration and modifications.

It is called AudioMotion and you can check out its Official Demo just to see how lit it looks!

💃 An easy way to see variations in the demo is:

1. Double-click on a song to load it.

2. Play the song.

3. Click on the Settings button on the top left, a panel opens up. Then, select 'Demo (random)' Preset in the bottom right

4. Keep on clicking the 'Load' button to keep changing the visualizer.

As for why I picked this particular library among its competition, I have explained it in the 'The Competition' section below.

🎶 How to Use AudioMotion?

Install AudioMotion

npm i audiomotion-analyzer

Import the Package

import AudioMotionAnalyzer from 'audiomotion-analyzer';

Initialize AudioMotion

const container = document.getElementById('container');
const audioSource = document.getElementById('audio');
const audioMotion = new AudioMotionAnalyzer(container, {
    source: audioSource
});

Here,

1. container is the div inside which the visualizer canvas is added.

2. audioSource is the audio element to visualize.

❗️ A few things to remember:

1. Make sure the audio element has the crossorigin property set to "anonymous".

2. Sometimes audio cannot start playing till you interact with the browser. So make sure to click on the page once before you play the audio

I am sharing a Codepen Demo for the above code along with 14 presets! Mute the browser tab or your ears will rip out! (since multiple audios are playing together)

Codepen Demo 👉 https://codepen.io/adityakrshnn/pen/abQvNBp

🎛️ Combining Multiple Sources

To connect multiple audio sources to a single visualizer you can skip mentioning the source in the constructor and use the connectInput() method instead.

// Get the audio elements
const audioElements = document.getElementsByTagName('audio');

// Instantiate analyzer
const audioMotion = new AudioMotionAnalyzer(
  document.getElementById("container")
);

audioMotion.connectInput(audioElements[0]);
audioMotion.connectInput(audioElements[1]);

This way the audio from elements is combined into a single visualizer.

Codepen Demo 👉 https://codepen.io/adityakrshnn/pen/MWzayLb

🎬 Connecting Audio from Video

✨ You can just give a video URL to an audio element and it will work! Try it!

🏇 The Competition

I tried several other libraries to create visualizations but they were either not as good as my top pick or lacked library support.

1. Wavesurfer.js - It's primarily made for generating static waveforms of individual audio files. It has no live audio visualization.

2. p5.js - It provides open-ended audio processing allowing you to use the frequencies by your means. Making visualizations by yourself is a hassle.

3. ThreeAudio.js - It provides only one type of visualization, lacks modification support and is more of an experiment.

4. Peaks.js - It's similar to wavesurfer.js and is mostly made for static waveforms.

5. Audio Visualization List by willianjusten - It's a good collection of all audio experiments & libraries. However, except for AudioMotion, none of them were as good.

🌠 Conclusion

This is all that is needed if you want visualizers for your website! You can keep experimenting with presets or use one of my demo presets.

AudioMotion makes use of real-time audio to get frequencies and draw the appropriate visualizer. You cannot visualize audio that is not being played. However, if you ever wanted to preprocess your audio such that you can seek your visualizer, it's a whole other journey!

✨ In my next 'In The Depths' blog, I'll be discussing how to preprocess your audio so that you can store frequencies and make your visualizer seekable! ✨

Read it here 👉 I'll post the link here when it's out!

🤘 Credits

1. Cover Image by pch.vector on Freepik

2. AudioMotion on GitHub