Turn your typing into cool rhythms with Typedrummer

You don't have to be a poet for your words to make beats -- the Typedrummer site will translate. CNET'S Michael Franco talks to the man behind the code.

Michael Franco
Freelancer Michael Franco writes about the serious and silly sides of science and technology for CNET and other pixel and paper pubs. He's kept his fingers on the keyboard while owning a B&B in Amish country, managing an eco-resort in the Caribbean, sweating in Singapore, and rehydrating (with beer, of course) in Prague. E-mail Michael.
Michael Franco
4 min read

Typedrummer makes any word just a little more funky. Screenshot by Michael Franco/CNET

As a writer and sometime drummer (African, not kit), I couldn't resist racing over to a website called Typedrummer as soon as I heard about it. It's a simple Web page that turns whatever you type into a rhythmic beat.

I started with my name, the first three letters of which produced a sound akin to the start of "Ice Ice Baby." Every letter you add increases the complexity of the rhythm, so I have to say I couldn't really groove to the full "Michael Franco" once it was all typed out. It just didn't sit easy on the ears. Neither did "sex," for example, but that one did sound strangely appropriate.

Typedrummer lets you choose between hearing words as straight-up percussion sounds (cymbals, bass, snare) or as samples from a song called "Fool" by Moon Bounce.

While my name didn't work out so well, typing "supercalifragilisticexpialidocious" in the "Fool" setting produced a groovy lounge track to which even Dick Van Dyke could no doubt groove.

So what exactly is going on with Typedrummer and why does it exist in the first place? I asked the creator of the site, Kyle Stetz, exactly that (and a couple of other questions). When he's not making fun websites just for the joy of it, Stetz works as a programmer for design firm P'unk Avenue in Philadelphia. You can check out his website -- which is just as minimalist as Typedrummer -- here.

So how are words being translated into drumbeats?
The premise is simple: characters from a text box are interpreted as drum sounds one at a time at 120 bpm [beats per minute]. I loaded 26 drum sounds, mapped from A to Z (capital letters play the same samples as their lowercase counterparts). The code starts with the first letter and plays the corresponding sample...When we run out of letters to read, we loop back to the beginning.

It was written in such a way that it doesn't start over every time you edit it. This makes it feel really natural to change the text while the beat is playing, which turns it into something of a performance.

On a technical level, I'm using the Web Audio API, which is a new set of tools baked into modern browsers that give developers the ability to program very complex music into a website. Typedrummer doesn't even scratch the surface of what is possible -- a great resource for seeing the kind of astounding work happening in Web Audio is audiocrawl.co. The community of people messing around with Web Audio is still very small (and surprisingly tight-knit!) so I am hoping that in its small way Typedrummer can bring a little more exposure to this new field.

What gave you the idea to do this? Ever do anything like it before?
I've been working on a project for a year and a half called Lissajous. It's an instrument for programmers that allows you to perform music in real time with code. It is also built on the Web Audio API and makes better use of its capabilities. Lissajous follows a tradition of "live coding," where programmers generate art on the fly using nothing but code. I'm hugely inspired by the work of Alex McLean, whose name and software is synonymous with live coding.

Getting to the point, Typedrummer popped into my head without much fanfare, but I think I owe it to the amount of time I've spent thinking about the ways we encode music through text. One might call Typedrummer the simplest form of live coding. I initially thought of a ton of features to include in the site -- multiple tracks, tempo control, multiple sound packages, etc., but I wanted to connect with people who don't see themselves as musicians. I didn't want them to get hung up on all the bells and whistles, so I tried to distill it to the fewest elements possible: a text box and a share link.

I see that you have a sample from "Fool" as an alternate to the beats. Why that song? Will you be incorporating other songs?
Yes, I added samples from Moon Bounce's Fool yesterday! Moon Bounce (Corey Regensburg) is a close friend of mine. He started a record label called Grind Select with his best friend Jeremy Garber, and I got involved as the "Web guy" to help them build a brand on the Internet and add some whimsical interactivity to record release websites. Corey's music means a lot to me so I take any opportunity I can to help him out. The attention Typedrummer has received seemed as good an opportunity as any to show off his music and provide everyone with some more wacky sounds to play with at the same time.

I have plans for Typedrummer which may or may not include more sounds and songs. For now I just hope that everyone enjoys the simplicity of it all!