Debussy's first Arabesque.

Played and recorded by yours truly,

so please forgive my many imperfections.

Please enjoy.

In case you're getting bored,

I've added captions to keep accompany.

If you can see and listen...

then I'm glad this is working.

If you move your mouse around,

notice that the views changes slightly?

just btw... I wondered what Arabesque means,

so on wikipedia...

tells me, Arabesque refers to...

a voluted formalistic acanthus composition,

a curvilinear & geometric form of Islamic art,

a Turkish music genre,

piano melodies of Arabic architecture's atmosphere,

and in this case,

a impressionist piece by Claude Debussy.

Oh I like this section of the music..

More about this demo...

I always wondered and admired...

how visualizations in music players worked...

only recently I got some ideas on how it could be done,

and in the web browser.

All these created with many "HTML5" Goodies,

to name some...

WebGL,

WebKit's Web Audio API,

Mozilla's Audio Data API,

and many new CSS3 properties,

all so you can run this in your browser.

I've also used the 3D library three.js

Great stuff for doing 3D in javascript.

All these work would only be possible,

with the the inspiration and sharing

done by the open and web community.

Not forgetting mrdoob and alteredq,

for their comments & beta testings.

And for my family and friends,

who doesn't discourage me from exploring these stuff.

Noticed the text animations here?

These are done using CSS3 transition animations.

Text shadows for blurs too,

and plenty of alpha transparency.

Noticed how the movement of particles,

when the music dynamics change?

RealtimeAnalyserNode in WebKit Web Audio API
and DSP.js for Data Audio API in Firefox browsers...

are encapsulated in my simple library
AudioKeys.js to monitor audio levels.

For the particles..
particle systems library sparks.js was used.

And finally...

Hope you enjoyed this,
and hope to hear from you!

The End. Please feedback or share if you've liked this. ^.^