Tuesday, November 18th, 2008
JS-909: Drum Machine, No Flash
Cameron Adams has another fun Javascript experiment in JS-909, a drum machine he built from scratch. It plays sound without Flash, along with a check that your browser is capable of playing sound this way, and also includes a little canvas-powered psychedelic graphics engine.
At the recent Web Directions JavaScript libraries panel, I was in charge of representing the hard-working non-library hacker. (Of which there exist approximately two in the wild.) And when it came to the final exercise – the one with the aim of blowing people’s minds – there was but one thing I could do: make a drum machine. Without libraries. Without Flash.
I’m fully aware that there’s much better ways of working with sound on the Web, but I’m also fully aware that I like making useless toys. The result of these two realisations? JS-909.
Sound comes via the <embed> tag, relying on native browser functions:
for (var sound in sounds)
{
var embedContainer = document.createElement(”div”);
embedContainer.className = “embedContainer”;
document.body.appendChild(embedContainer);
embedContainer.innerHTML = soundElementString(sound, sounds[sound]);
}
I recently found it’s possible to combine this no-flash sound technique with data: URLs, so you can build audio web apps without Flash and offline, running from a single file. It’s all very experimental at this stage though.
Nice work!
The only drawback is, it’s dependent on Quicktime to play sounds.
Or at least, in my machine (Firefox 3.0.4, Vista in Mint condition)
Neat but the QuickTime dependency makes this approach a No-no for me. :\
Great success! XD
Give me Flash dependency any day over Quicktime!
Nice work, but doesn’t run under firefox linux.
I can hear only the first soundstep when triggering a new step in a part.
I did something very similar last year, with quicktime as the sound output device, but it was only a quick hack in my lunch break.
It’s all HTML, CSS and some sound files. No flashy graphics :-)
Blogpost about it:
http://matrixsynth.blogspot.com/2007/10/lauflichtdrums.html
The drum machine with 606 sounds:
http://www.frischglanz.com/lauflichtdrums/
Looks absolutely fantastic!! Except I won’t be using/trying it due to quicktime dependency. Shame.
Who cares if it doesn’t use flash if it requires quicktime. Flash has a larger user base and is much less intrusive then quicktime. There really seems to be no point to this.
I will never install Quicktime on my computer. I like the idea, but Flash is the way to go here.
I don’t run either Flash or Quicktime so I am SOL!
This is a neat proof of concept.
The visualizations seriously alter the timing, however, and really demonstrate the limitations of a browser-only solution (to anything) in an application where timing is important.
I thought was a standardized tag that relied on your browser (and local machine) configuration to play the audio (or whatever) clip. Is this not an important facet of the open web, to allow clients to handle the content how they see fit? Maybe if he had used OGG instead of WAV, that would have made you naysayers happy.
I had fun with this, nice work!