webtoolkit4.me » Javascript

How to make a custom music Equalizer with jQuery

vmasto — Fri, 01 Jul 2011 01:40:22 +0000

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.

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.

MicroJS

vmasto — Tue, 28 Jun 2011 14:14:51 +0000

What is Microjs.com? Imagine you need a certain JavaScript functionality on your website or app, chances are that someone has already implemented it in an easy to work with framework.

Microjs.com is a nice website that helps you find the suitable JavaScript micro-framework for your needs. Quite useful!

Microjs.com helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.

pdf.js: Rendering PDF with HTML5 and JavaScript

Gerasimos — Fri, 17 Jun 2011 07:15:01 +0000

pdf.js is a technology demonstrator prototype to explore whether the HTML5 platform is complete enough to faithfully and efficiently render the ISO 32000-1:2008 Portable Document Format (PDF) without native code assistance.

Modernizr 2.0

Gerasimos — Wed, 08 Jun 2011 09:46:55 +0000

Modernizr, probably the best feature detection tool out there, released version 2.0. Some of the new features include:

Media query testing
Conditional resource loading (via yepnope.js)
Better documentation

JS Libs Deconstructed

Gerasimos — Tue, 15 Feb 2011 11:30:41 +0000

The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools. It breaks the physical JavaScript into visual blocks that you can easiliy navigate. Each block opens to reveal its internal code. Clickable hyperlinks allow you to follow program flow.

PaintbrushJS by Dave Shea

klou — Sat, 21 Aug 2010 17:40:14 +0000

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page. So, who’s into photoshop filters with just a little Javascript, CSS and HTML elements? Your “thank you” goes to Author of Mezzoblue, David Shea! Related posts:Smoke Effects: 42 High Resolution Photoshop Brushes Moogenda: a calendar [...] Related posts:

Class JS – Basic class structure in under a kilobyte of code

Gerasimos — Mon, 10 May 2010 06:00:37 +0000

Javascript freak? Do you need setters, getters, constructors and class extending capabilities? Class JS provides a basic class structure in under a kilobyte of code.

Riding carousels with jQuery, Mootools, YUI and Prototype

Gerasimos — Fri, 14 Aug 2009 07:56:33 +0000

Carousels are everywhere. We can see them in many blogs and portals. It’s actually a good way to group content like images, new articles etc and get more attention for these items. With the explosion of javascript frameworks, it’s impossible not to find a carousel script for the framework of your choice. Here’s a list of 4 carousel scripts for jQuery, MooTools, YUI and Prototype:

DD_belatedPNG: better PNG background-image support for IE6

Gerasimos — Mon, 08 Dec 2008 19:50:35 +0000

DD_belatedPNG is another PNG fix for IE6. There are so many out there but most them FAIL one or the other way. After playing for a while with it, it seems that it covers some cases where most of the other scripts just fail like background-position and background-repeat cases. DD_belated comes in 2 versions, uncompressed (6.5kb) and compressed (3.65kb) and it can be downloaded for free from its official website.