Skip to content
jQuery Audio Equalizer Animation
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

jQuery Audio Equalizer Animation

jQuery Audio Equalizer Animation is simple jQuery based equalizer for <audio></audio> tags.


All you have to do is to add an id attribute on <audio id="song1"></audio>, add an empty div <div></div> anywhere on the HTML page. Now take the value of the audio's id attribute and add it as class with another class "equalizer" on that empty div as <div class="song1 equalizer"></div>


    <div class="song1 equalizer"></div>
    <audio controls loop id="song1">
        <source src="music/file.mp3" type='audio/mp3'>

    <div class="song2 equalizer"></div>
    <audio controls loop id="song2">
        <source src="music/file.mp3" type='audio/mp3'>


        color: "#f2b400",
        color1: '#a94442',
        color2: '#f2b400'

Simple Usage

    <div class="song equalizer"></div>
    <audio controls loop id="song">
        <source src="music/file.mp3" type='audio/mp3'>
<script src=""></script>
<script type="text/javascript" src="js/jquery.reverseorder.js"></script>
<script type="text/javascript" src="js/jquery.equalizer.js"></script>


width: 400 // in pixels - default is 600 pixels
height: 150 // in pixels - default is 150 pixels
color: "#0f1957" // in hexadecimal - default is #800080
color1: "#a94442" // in hexadecimal - default is #B837F2
color2: "#f2b400" // in hexadecimal - default is #009AD9
bars: 15 // no. of bars - default is 20
barMargin: 0.5 // margin between vertical bars - default is 1
components: 10 // no. components in one bar - default is 8
componentMargin: 0.5 // margin between horizontal components - default is 1
frequency: 10 // rate of equalizer frequency - default is 9 (from 0 to 20)
refreshTime: 100 // refresh time of animation - default is 100


Either provide "color" when you want to use single color or provide "color1" and "color2" when you want to use double colors.

Developed by Ali Nawaz - Cooperative Computing

You can’t perform that action at this time.