Hacker News new | past | comments | ask | show | jobs | submit login
Typedrummer (typedrummer.com)
266 points by moritzplassnig on May 10, 2015 | hide | past | favorite | 126 comments

Firefox wanted to correct the spelling of some words. I let it do it for once.


Sounds pretty sweet!

you killed it.

Creator here— Thanks for checking it out everybody! I promise I'm collecting a list of all the great feature requests I've been seeing.

There's a ton of awesome stuff happening in WebAudio right now. If you want more, check out http://audiocrawl.co

Ability to stack beats would be sweet!

Put it on github - I'd love submitting a few pull requests.

You're about to disrupt Roland business. Brace yourself.

Well, those are major words... IMO it won't be that easy or soon. Roland, Moog, NI, Steinberg, etc, are light years ahead of web audio. The web audio API direction is good and really promising tho.

I'm really excited about a combo of Node/websockets (real-time), NW.js/Electron (GUI), Emscripten/ASM.js (reusing audio libs) and Web Audio API. Amazing things can come out of this.

Here's my best guess:

  a: click with a slight rattle, like rattan brushes
  b: closed hihat
  c: distored synth bass with rattle, like tambourine
  d: distored synth bass higher pitch and muted
  e: muted synth bass
  f: sizzle ride hit like crash
  g: maracas
  h: muted maracas
  i: afuche-cabasa
  j: synth snare
  k: deeper snare
  l: castanets
  m/n: tap on closed hihat - maybe striking the hardware?
  o: booming tonal bass
  p: half muted tonal bass
  q: muted bass
  r: very muted, blockish bass
  s: synth splash
  t: agogo bell
  u: guiro upstroke
  v: guiro downstroke
  w: tamborine
  x: snare
  y: synth snare
  z: concert bass
  non-alpha: rest
  (): beat = 1/3 - note: triplets will begin on the letter before the first open paren, it modifies the space before, not after, each note.
A beat: http://typedrummer.com/91l102

The parens don't quite line up with how triplets are usually notated. This effectively prevents you from ending the composition with a triplet that loops properly.

You can hear it weird here: http://typedrummer.com/53d811

vs. without the triplets at the end, only in the middle, so less broken sounding: http://typedrummer.com/4x2977

EDIT: Ok, workaround: just put the first character in parens - http://typedrummer.com/hoxj64

I think m/n is hitting the top of the hi-hat instead of the sides

I think you're right, with n maybe using the shaft of the stick on the bell of the closed hat.

Yeah, I think so

Let's go meta with that: http://typedrummer.com/c8094s.

Quick tip/Easter egg. Wrapping the text in parenthesis allows you to do triplets.

For those who recall that "piano thing" that was also on hn a while back and don't want to go trough the hassle of remembering the exact name or searching it: http://touchpianist.com/

Absolutely different from this, but also fun!

I call this one "The Master".


Slight variation - http://typedrummer.com/0r4ki5

I see a smiley and something else in there

Variant from later in the story: http://typedrummer.com/tubs9r

And now I am humming the rest of the melody, and loading up Netflix. You have ruined my entire day of productivity. It is 10:17 am. Godspeed, you glorious bastard.

For those downvoting me, parent is a Doctor Who reference: the Master is a character on the show obsessed with that specific beat (which any further explanation would be spoilertastic).

I guess the natural consequence is to share your code as a beat audio download and reverse engineer from there, no?

This is a lot of fun and quite creative. Turning text into a beat is awesome - I have often thought about listening to a for loop, now you can!

Grizzly engineers from the 70s told me of a way to use a radio to detect stuck code. Tune it to the computer's clock and if it started to make a constant pattern, you had a bug!

This also works with a Commodore 64 on RF if you crank the sound on the TV


by John Cage

Well played.

Yes, it was quite the moving performance.

illuminati confirmed

OK so basically we have 26 sounds (http://typedrummer.com/audio/[a-z].mp3), an accel marker '(' (only 1 scale?), and a decelerator ')' (only 1 scale?). Anything else?

And since everyone feels like sharing his own crap, I'm doing it as well http://typedrummer.com/j5c05o

Edit: it's funny how Firefox (37) gets completely insane when it hasn't the focus on the tab anymore

In Chrome too, it is due to the JS engine working slowly when the focus is not on the tab anymore. To get around that issue he needs to wrap the setInterval function in a Web Worker, so the thread runs independently of the tab.

it would be amazing if it was easy to tell which was the currently playing character.

i thought that

Small bug I found - the timing gets messed up whenever the typedrummer tab is running in the background

Not really a bug, Chrome heavily throttles timers in background tabs to save the user's juice. All you can really do is suspend the sequence until the tab returns to foreground.

What a great toy. Wish there was a way to feed it text from the Library of Babel so we'd get an idea of the sick beats the librarians dance to while trapped in their endless hexes.

I put in a few of the improbable words from the Library and this one turned out well: chaotic but mellow



This is really cool. Within about 30 seconds of playing around, I wished it had more scripting-like features (loops and blocks I can reference multiple times)

Oh my $deity! I sometimes play a bit with recording music and I always hate drum machine programming. If I could actually program it in some sort of programming language it would be so much nicer!

Seems like I've just got a new side project :)

Thanks! Although I had something much simplier in mind, Overtone will definitely come handy as well :)

Like a tracker?

When you unfocus the tab drum beats produces different sound. Is it a feature or bug?

I think it is more how any JS script works, Chrome and Firefox (at least) slow down the process (for CPU consumption, to save battery... etc). Since that script is working using a setInterval to look ahead, he needs to wrap the setInterval in a Web Worker, so that thread is never runned slowly.

It's how WebAudio works. If the tab loses focus, the callbacks to the Audio Thread are throttled so the sequencing might be a bit messed up.

Pull the tab into a new window and you can then layer sounds.

An awesome meta thing to do would be to make it play it's own source code as a beat.

Miles Davis.

Somebody had to do this. Sorry in advance.

Sounds better than the original though. http://typedrummer.com/rik4mt

Sites like this are a good reason to not require https everywhere. If this guy had to take the extra time to learn how to do https, it would slow down his creative innovation.

I'm impressed how you imposed your political agenda on this innocent post.

By the way, it usually takes me less than 15 minutes to set up SSL and that includes obtaining the certificate. "Let's encrypt" will make this even more of a non-issue in the future.

Until "Let's Encrypt" becomes a thing certificates are still "expensive". It's a shame that you will have to pay for a certificate on top of a domain name for hobby projects like this.

I usually use completely free certificates. There is at least one vendor for those.

I call this one Java Utopia


Someone needs to combine this with a melody sequencer that maps ascii <-> pentatonic scale notes or something.

Would be interesting to see a vim plugin that played these sounds for each key you pressed in Normal mode.

The results are so good, I'm thinking this could be used to generate background for some videos.

Crashes Firefox after trying about 20 different examples from this page, i.e. opening a tab, listening a bit, closing again, opening a new one.

Firefox 37.0.2 on Ubuntu 14.02 LTS 64 bit. Reproducible, crashed already 3 times.

Didn't want to work on Firefox on Linux (37.0.2) but was fine on chrome.

Try: Zyzzybalooba

I don't know if they did it on purpose, but `qwerty` sounds pretty nice

OMG! Of course I entered "type something" (no quotes) and five minutes later dragged myself out of the trance it put me in. :-)

This could actually be very useful for meditation.

Heh. For the helluvit I entered the Transcendental Meditation mantra given me 45 years ago and got something much, much more compelling than the mantra itself. I might just revisit that old fad.

Quite a fun webapp. I've also made my thing http://typedrummer.com/7bss99

Not as good as some others.. but worth sharing? http://typedrummer.com/uj8es0

I'm a drummer and this is a real beat: http://typedrummer.com/eht669

Beat from Deftones RX Queen http://typedrummer.com/j9t913

So how does it work?

Basically creates a pattern from your letters and sequences it using WebAudio. If you look at the Network tab, you'll see the individual mp3 files for each letter being downloaded.

Surround your stuff with parens

The Amen Break. Kind of.


For those who don't know what the Amen Break is, here is the most important documentary ever done: https://www.youtube.com/watch?v=5SaFTm2bcac

The Hacker Dudes Song



Let's do break beats. :)

Didn't work in Firefox 37.0.2 for me, but did in Chrome latest.

Nice though, thanks!

EDIT: Forgot to mention; on Linux (Ubuntu 14.04)

It works in Firefox 37.0.2 on Windows for me.

Firefox 37.0.2 worked for me on Arch Linux.

An unknown error occured while processing decodeAudioData. decodeAudioData error" undefined"

Which browser is this?

Hmm, why not write a fruityloop style of interface. That would make it more predictable.

Needs more sounds that come from the left speaker. All I here are right speaker sounds.

you can use the "|" to put a pause...

Comma also works.

The coder's late night sessions: http://typedrummer.com/uunq13

Feature request - I need more more cowbell

Hm, can anyone make me a djent starter?


Not as ominous as I hoped.

Cool! my name has a beat.

raul chacaltana

shout out to p'unk avenue! philly represent!

So fun!


Applications are open for YC Summer 2023

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact