How to make a custom music Equalizer with jQuery

July 1st, 2011 - Frontend, Javascript, jQuery

Music on websites is kind of a deprecated concept nowadays, but for those clients who absolutely must have it or or that funky web radio station that needs a custom player, there is no reason not to follow the latest standards using HTML5 and JavaScript. In this micro tutorial we ‘ll see how we can implement a simple pseudo-equalizer in our player of choice using just CSS and jQuery.

The HTML

The markup is straightforward, just a simple container with a new element for each of our bars.

<div class="eq">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>

Styling our bars

We can now use whatever styling we need to make the equalizer up to par with our player and website. I chose to use a simple green color for demonstration purposes:

.bar {
    background-color: green;
    width:7px;
    height:15px;
    display: inline-block;
    vertical-align: bottom;
}

The important thing here to notice is the vertical-align: bottom; rule. Without it, the equalizer animation behaves a bit peculiar. This forces each bar to animate starting from the top, instead of the bottom.

The jQuery

function fluctuate(bar) {
    var hgt = Math.random() * 10;
    hgt += 1;
    var t = hgt * 30;

    bar.animate({
        height: hgt
    }, t, function() {
        fluctuate($(this));
    });
}

$(".bar").each(function(i) {
    fluctuate($(this));
});

What this does, is to create a random number which will be used to randomly determine the height of each equalizer bar each time we loop through the function.

We then use the .animate() method of jQuery to begin animating the height of each element randomly. Pretty easy, right?

Let’s delve into this code a bit more:

var hgt = Math.random() * 10; hgt += 1;
Creates a random number of 0 to 10. This will be used as the new height of each element, each time the function loops through itself. If we need a taller, or shorter bar, we can change the maximum height by simply adjusting the “10″ value after Math.random().

var t = hgt * 30;
Gets the current height value and multiplies it by a number. This is a little trick to keep the speed with which each bar fluctuates random. If you want something faster or slower, simply adjust that number.

bar.animate({
height: hgt
}, t, function() {
fluctuate($(this));
});

Here we animate the height of our bar, in the random time of t, and then we call the same function again so it loops through itself over and over again.

$(".bar").each(function(i) {
fluctuate($(this));
});

Finally, we iterate this function over every single .bar element.

And there we have it, our own custom jQuery and CSS equalizer! Feel free to use it on your own website if you need to.

Comments

  1. ken

    December 13, 2011

    Good to know ,please continue to add other jquery tutorials .

  2. ermir

    March 1, 2012

    Hi,

    i copied your code into my website but i see no animation. just the green bars. what a, i doing wrong?

  3. Gian Faye

    August 30, 2012

    When I set the height/hgt to a higher number the equalizer acts funny, it looks like it’s pushing itself down from top. I tried mingling with the css a bit but to no avail. Can you check?

  4. Ravi Bhadauria

    October 29, 2013

    @ermir
    i think u didn’t add jQuery seed file.
    Plz make sure by putting this line in ur website’s head section.

  5. Ravi Bhadauria

    October 29, 2013

    sorry @ermir
    this website doesn’t allow to write js in commet here.

  6. Ravi Bhadauria

    October 29, 2013

    oh! i found the reason..
    the above code needs to be wrapped in document.ready handler.

    Note to the admin: plz allow javascript code to write here.
    other wise people will leave this portal soon.

    thanks

Leave a Reply