Create Audio Equalizer Animations Using jQuery - Equalizer
File Size: | 4.19 MB |
---|---|
Views Total: | 8306 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.