Create Audio Equalizer Animations Using jQuery - Equalizer

Equalizer is a jQuery plugin used for creating customizable equalizer animations (analyser bars animations) to visualize your audio equalizer with a wave effect.

How to use it:

1. Embed an HTML5 audio player into your html page.

<audio controls loop id="demo">
  <source src="song.mp3" type="audio/ogg">
</audio>

2. Create a container for the Audio Equalizer.

<div class="demo equalizer"></div>

3. Load the jQuery Equalizer plugin and other required resources at the bottom of the page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.reverseorder.js"></script>
<script src="/path/to/jquery.equalizer.js"></script>

4. Apply the following CSS styles to the Audio Equalizer.

.equalizer {
  position: relative;
  margin: 0 auto;
  margin-top: 40px;
  float: left;
}

.equalizer_bar { float: left; }

.equalizer_bar_component {
  float: left;
  width: 100%;
}

5. Call the plugin on the audio element and done.

$('#demo').equalizer();

6. Specify an array of colors for the Audio Equalizer.

$('#demo').equalizer({
  color: "#f2b400",
  color1: '#a94442',
  color2: '#f2b400'
});

7. More configuration options.

$('#demo').equalizer({

  // height / width
  width: 400, 
  height: 150,

  // colors
  color: "#0f1957", 
  color1: "#a94442",
  color2: "#f2b400",

  // the number of bars
  bars: 15,

  // margin between bars
  barMargin: 0.5, 

  // the number of components in one bar
  components: 10,

  // margin between components
  componentMargin: 0.5, 

  // rate of equalizer frequency
  frequency: 10,

  // refresh time of animation
  refreshTime: 100
   
});

---

This awesome jQuery plugin is developed by anawaz-cc. For more Advanced Usages, please check the demo page or visit the official website.