HTML 5, CSS3 & jQuey

This is my demo application created at the Music Hack Day in Berlin 2011 at MTV.

It is complete running in a web browser like Safari or Firefox. You can set green squares with the mouse. They move to the left and if they hit the border, they move back and make a sound.
Each row has a different pitch.
When two squares meet in the same cell, they make a sound and both move to side.
So you can create melodies, which change a bit after a collision of two squares.

The sounds used are created entirely with Javascript.
The sound data is calculated using trigonometric functions.
Then the sound data is appended to a WAV file header and played with an HTML5 Audio element.

For each sound a new Audio element is created to be able to play multiple sounds at once. (This could be a memory leak.)

The graphics is done only by some HTML DIV elements.
They can rotate, have a glowing halo, which is done with CSS box-shadow. And they have round corners and transparency.

To try the live demo of the Audio Invader in your browser look at:


Loading more stuff…

Hmm…it looks like things are taking a while to load. Try again?

Loading videos…