JS-909: A drum machine in JavaScript

17 November 2008

45 comments

A Blue Perspective: JS-909: A drum machine in JavaScript

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.

I mainly post this because a few people have asked about it; I pretty much only wrote it for performance on stage. I don't guarantee it'll work in X browser on X platform. If it does work, I don't guarantee that it will work particularly well.

I do guarantee that if I'm running it on my computer, on a stage, through a loud speaker system with plenty of bass, in front of a couple hundred people, it kinda makes me feel like a rockstar.

Controlling sound in the browser from JavaScript probably relies on the Quicktime plugin (I don't know, I couldn't test on anything that didn't have Quicktime). But in my tests it does work in IE6, Firefox 3 and Safari 3.

Note added 2008-11-18: There is no standard browser protocol for accessing sound controls (i.e. stopping, rewinding, playing) on an embedded player. So, to make it easy I used Quicktime's JavaScript interface to control its playing of the sounds in the drum machine.

It might be possible to control sound through other players using different ActiveX controls (or other plugin architectures), but it wasn't really my intent to have a cross-browser solution and Quicktime's controls are the only documented ones I could find.

Categories

, , , , , ,

Comments

  1. 1/45

    andrew g commented on 17 November 2008 @ 03:23

    extra happy because i'm rocking this in detroit

  2. 2/45

    Scott Schiller commented on 17 November 2008 @ 03:29

    Well done, sir! The UI is great as usual. I'm amused to see you actually embedded the sound as data: URIs. Nice work.

    More amusing is that data: works in IE 6 (at least, in the sense of providing it as a src: for a QuickTime plugin.) That's an interesting, potentially-handy trick to know.

  3. 3/45

    philip commented on 17 November 2008 @ 03:38

    that is 100% awesome.

  4. 4/45

    The Man in Blue commented on 17 November 2008 @ 09:33

    Ah Scott, if only data URIs *did* work in IE 6.

    I originally used data URIs because I was only playing it in Firefox, but I decided to use a dirty dirty hack for IE and get it to download wav files instead.

  5. 5/45

    Scott Nelle commented on 17 November 2008 @ 11:52

    This is beyond cool. It sounds like firefox on my sluggish laptop could benefit from some quality time with a metronome, though. ;-)

  6. 6/45

    Joel commented on 17 November 2008 @ 13:39

    Damn, and here I was hoping to beat Scott to the punch...

  7. 7/45

    Gary Barber commented on 17 November 2008 @ 18:34

    Cam, you know I missed this being presented twice.... I know I know....

    But it's good to see it released into the wild like this. As now expected, it's one step beyond cool.

  8. 8/45

    Maxine Sherrin commented on 17 November 2008 @ 21:13

    Cameron Adams is completely insane. I know this now.

  9. 9/45

    Nate Klaiber commented on 17 November 2008 @ 23:32

    This is absolutely incredible.

  10. 10/45

    Ben commented on 18 November 2008 @ 01:48

    Awesome.

    It even sounds better when I turn my speakers up to 11.

  11. 11/45

    Scott Schiller commented on 18 November 2008 @ 02:23

    Ah, so data: doesn't work in IE even when being provided as a src: to a plugin, then. I read your post and as you mentioned it worked in IE 6, assumed perhaps there was some trickery going on there in that the plugin itself is capable of handling data: etc. Oh well, we can dream I suppose. IE 8 will be bringing back data: in at least some form (part of the ACID test), which will be nice.

  12. 12/45

    Anton commented on 18 November 2008 @ 03:59

    Oh.
    My.
    Gawd.

    I love experimental stuff like this!

  13. 13/45

    Tom Watson commented on 18 November 2008 @ 04:31

    Well done Cameron, wow.

  14. 14/45

    Kevin Crawford commented on 18 November 2008 @ 04:53

    Hahaha, love the daft punk sample!

  15. 15/45

    Ethan commented on 18 November 2008 @ 05:03

    You, sir, are a wondrously mad genius.

    Also, I would like my morning back. Thanks.

  16. 16/45

    Jim Cassidy commented on 18 November 2008 @ 06:41

    I am teaching my youngest daughter about rhythm - she seems to get the beat when she listens to music. She is going to love this.

    My other daughter is learning to play the piano - she gets notes, but she does not count well. This will help her visualize a 4/4 time signature, and understand rhythm.

    Thanks!

  17. 17/45

    Kumar McMillan commented on 18 November 2008 @ 08:05

    wow, this is super neat. But there needs to be a "save settings" button that reloads the page into a URL with the pattern serialized!

  18. 18/45

    Paul commented on 18 November 2008 @ 08:44

    @Phillip - you lie. This is 200% awesome

  19. 19/45

    Jacob Seidelin commented on 18 November 2008 @ 09:10

    Ha, this is super cool. Nicely done.

  20. 20/45

    Reuben Whitehouse commented on 18 November 2008 @ 12:27

    Wow this ultra super awesome! <- I mean it!

  21. 21/45

    Alek commented on 18 November 2008 @ 17:48

    Lovely, just lovely!

    Feature request: provide permalinks for each pattern, like so

    http://www.themaninblue.com/experiment/JS-909/#101101101010100100101.....

  22. 22/45

    Leon commented on 18 November 2008 @ 19:25

    Pretty damn nifty.

    Would be nice if you could change the tempo.

  23. 23/45

    Jussi commented on 18 November 2008 @ 20:08

    I second Alek's request of permalinking.

    Absolutely great stuff.

  24. 24/45

    KullDox commented on 18 November 2008 @ 23:12

    :( not working in Linux

  25. 25/45

    The Man in Blue commented on 18 November 2008 @ 23:47

    Note about Linux and Quicktime added to the end of the post.

  26. 26/45

    Peter commented on 19 November 2008 @ 04:19

    Awesome :-) unfortunately bad speaker ...

  27. 27/45

    Andreas Stephan commented on 19 November 2008 @ 04:25

    This is wicked cool! Hats off!

    I have a question regarding the implementation:
    You say that you use .wav to make it run in Internet Explorer, so if I wanted to drop support for IE6 could I use mp3s instead of .wav?

  28. 28/45

    Richard Paul commented on 19 November 2008 @ 05:16

    Kinda working here on linux (Ubuntu 8.04) but the samples only get played once. I guess my quicktime plugin must be missing the rewind feature.

  29. 29/45

    The Man in Blue commented on 19 November 2008 @ 09:58

    @ Andreas: The file format doesn't really matter, you could use MP3s in IE. The only thing IE can't do is load all the files through JavaScript; they have to be actual files somewhere on your server. Requires more downloads.

  30. 30/45

    Jason Beaird commented on 19 November 2008 @ 12:44

    I second Maxine's notion that you are completely insane...but in a good way. This is awesome.

  31. 31/45

    Ro commented on 19 November 2008 @ 13:33

    @ Leon: you can change the tempo via url bar hackery. javascript:BPM=75;void(0);

  32. 32/45

    fancyydk commented on 20 November 2008 @ 11:26

    This is truly awesome, beyond words. Can't believe you did this with simply javascript.

    you are a true javascript guru.

  33. 33/45

    Michael Kumm commented on 21 November 2008 @ 14:57

    I have so far to go with js skills - fantastic job - really did not want to stop playing.

  34. 34/45

    Firefox Linux commented on 21 November 2008 @ 18:21

    Hello, sound isn't working for me, the app is totally silent but the interface loads and the disco blip goes bright when there is a beat. any clues why there is no sound?

  35. 35/45

    John Faulds commented on 22 November 2008 @ 14:01

    Can't say anything that hasn't been said already - completely awesome and love the name too. Next I want to see a JS-303! ;)

  36. 36/45

    Chris commented on 24 November 2008 @ 16:05

    Very cool,

    So... as a "non-library hacker" do you think there is ever any place for libraries, or are they always going to be to large / to much unnecessities?

  37. 37/45

    The Man in Blue commented on 24 November 2008 @ 16:46

    I only said I *represented* the non-library hacker, not that I *was* one. :P

    It's way too easy nowadays to include a fairly small library file that does all you need, and more. I personally use jQuery, and while I could probably code up everything I need from scratch, the robustness and ease of use of popping a library in can't be beaten. Plus you have a bunch of people coming up with cool new ways to slice and dice your DOM faster, easier, and with less memory leaks. So it's nigh on impossible to compete.

    That said, for some of the more interesting stuff -- like JS-909 -- it's invaluable to be able to do it yourself. So, best of both worlds.

  38. 38/45

    Very nice commented on 25 November 2008 @ 11:22

    I loved it. My son got to learn a bit about music -- very nice.

    http://www.clousfamily.com -free music.

  39. 39/45

    Di commented on 26 November 2008 @ 11:21

    As a former drummer, I could not have dreamed up a better thing for you to do with your JavaScript skills Cam. Awesome.

  40. 40/45

    The Man in Blue commented on 26 November 2008 @ 12:12

    *Former* drummer?

    Keep the dream alive Di!

  41. 41/45

    Jesse Edmond commented on 27 November 2008 @ 20:30

    one big WOW!
    i can even see this progress into a PRO level LIVE app.
    what do you mean useless toys?!???

  42. 42/45

    manu commented on 29 November 2008 @ 06:04

    cute : )

  43. 43/45

    Janie commented on 29 November 2008 @ 16:54

    That is one awesome trick man!

  44. 44/45

    ViniMan commented on 29 November 2008 @ 17:39

    Brilliant, a BPM changer right away would be even more awesome. And implanting your own wavs.

  45. 45/45

    P Kayne commented on 30 November 2008 @ 02:30

    Just had some fun with it and it's really good.

    It would be great to find a way to record the musical experiments.

  46. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed