Tuesday, November 18th, 2008

JS-909: Drum Machine, No Flash

Category: Showcase, Sound

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”;
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.

Posted by Michael Mahemoff at 4:09 am

3.9 rating from 26 votes


Comments feed TrackBack URI

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)

Comment by ccan — November 18, 2008

Neat but the QuickTime dependency makes this approach a No-no for me. :\

Comment by p01 — November 18, 2008

Great success! XD

Comment by vsync — November 18, 2008

Give me Flash dependency any day over Quicktime!

Comment by RoryH — November 18, 2008

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:
The drum machine with 606 sounds:

Comment by Kashati — November 18, 2008

Looks absolutely fantastic!! Except I won’t be using/trying it due to quicktime dependency. Shame.

Comment by Gavin — November 18, 2008

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.

Comment by Fyzbo — November 18, 2008

I will never install Quicktime on my computer. I like the idea, but Flash is the way to go here.

Comment by tj111 — November 18, 2008

I don’t run either Flash or Quicktime so I am SOL!

Comment by jefposkanzer — November 18, 2008

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.

Comment by eyelidlessness — November 18, 2008

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!

Comment by zachleat — November 24, 2008

Leave a comment

You must be logged in to post a comment.