this is a page where more information can be found about a bug I recently filed with Mozilla here, which was later found to be a duplicate of this bug.
about
how to use
tech notes/bugs
music
about
The demo that probably brought you to this page was a small experiment with combining the html5 canvas tag, and the Processing.js library with the abilities of flash to dynamically analyze sound spectrum data. As sometimes happens, the small experiment turned into a larger one. As I kept being satisfied by the results I was finding, I kept finding reasons to continue it. The page you probably came here from is the result of those investigations; it also doubles as a bug report to mozilla.
The bug ( more accurately, the missing feature ) is that the Firefox browser does not offer the ability to analyze the spectrum data contained in an audio tag.
It is odd that until I was told by a certain humpd [1] that this thing I wanted for the browser- the ability to dynamically analyze sound - was a bug, a missing feature-- I had assumed that the browser would never change. I assumed our web browsers to be unmovable forces to be catered and styled to.
It was after noticing this, I mentioned "This browser. its malleable?" to which humpd answered, "It's your browser". And that's true. I use Firefox almost exclusively, and it is almost always the best way to navigate the web. But further, it is mine in the fact that, as a user of Firefox, I have a voice to change it. I can look at the source; if I have the skills necessary and the desire, I have the opportunity and ability to do it myself. It is democracy in software opposed against oligarchy, opaqueness, and missing features, and, being as such, it is a challenge that we must take seriously.
...
This demo gives a glimpse into what can be done with javascript, I hope, if it were provided with spectrum data for sound. Why I think music visualization is important is another topic [2] altogether, but I would regardless affirm that music is important to us, and that tools that help us understand and express the feelings and ideas contained in music are interesting to us.
Adobe's Flash technology has long been my medium of expression, because of the many features that it provides us. I appreciate the many tools that Adobe has made available, and would find myself lost without them. Adobe and Flash have made many things possible online [3] [4] that would have otherwise not have existed, and I am sure that they will continue with this mission. But I am hesitant, in my process of creation, to rely upon a 3rd party such as Adobe, in order to do my work; I would much rather write code within an environment I share ownership with.
I will never be done with actionscript (or, more accurately, actionscript will never be done with me) but I now have as a goal to work
with
javascript
and html whenever possible. The things I love about flash are quickly becoming available in the browser, and, as they do, I want to be there to help push them along.
This is only my second attempt at doing so[5], and if I have mis-spoken or erred, or if you have any ideas for me please write to tasaunders [ at symbol here ] gmail dot com.
how to use
There are currently three select forms which a user may edit in order to change their experience. The first, or furthest left one, controls the drawing algorithm that is applied to the music. The second controls how many frames pass before the background is cleared. The third menu changes the song which is playing. There may be features added later that are not listed here.
technical notes
This demo will not work if you have any open windows in your browsers that are playing sound. This includes:
-a youtube/vimeo video (stopped or playing)
-last.fm, or any music site
-any thing which uses flash to play back sound.
Because of security restrictions around the analysis of sound data, analysis fails if there is more than one sound playing at a time.
Currently, changing songs only works in firefox when firebug is enabled. I'm not sure why. Otherwise you'll get a good dose of my 'early monday evening' mix.
-Tested and developed in Mozilla Firefox, OS_X 10.5, Macbook Pro 2 GB RAM, runs between 20/30 fps.
-Tested in Safari, runs somewhere between 40 and 60 fps but quickly makes the fan go crazy
the sound experiment that led you here uses a small (1px, 2.3kb) flash document to load songs and dynamically analyze their sound data. That flash document (source) then tells javascript the values, between -1 and 1, of 16 channels on both the left and right spectrums. I use the html5 canvas element, along with processing.js to then draw the sound data to the canvas.
I have also used, in some cases, a javascript PerlinNoise utility, which you can view here. I hope this code may some day make it into the Processing.js library, but I have a lot more testing to do before it can be useful to others.
If you are reading the code which I have written (namely jsmusic.js) I am sorry for how messy it may appear.
this section is as of yet unfinished.
music
Some of the music used in this demo infringes copyright. If this bothers you I would be glad to take it down. Other of the music I have permission to use from its author. If you have any music that is CC licensed that you wouldn't mind me using, I would be glad to use that music instead of possibly copyright infringing content.
this section is as of yet unfinished.
reference
1: David Humphrey
2:
The idea that music is the frontline in technology is very articulately elaborated about by a certain Jaron Lanier [6] here [7]. I would further assert that making a tool to visualize music is, in a sense, making a new instrument in itself. Making and learning to play these instruments is of great interest to me.
3:
My whole previous and current professional career has relied on Flash, and I am continuously amazed at the talent and hard work of the Flash community in advancing new and important ideas. Adobe has provided the platform to do so.
4:
Flash helped me make my favorite music visualizer[8], and, in doing so, inspired this current project.
5:
My first interaction with javascript, processing.js, and the canvas here.
6:
Jaron Lanier on Wikipedia
7:
Jaron Lanier on Conversations with History
8:
a flash based music tool