Friday, July 3rd, 2009

It’s Friday. Play some drums…. HTML5 style

Category: Examples, Sound

Brian Arnold created a fun sample drum machine simulator using HTML5 <audio>.


  1. function playBeat() {
  2.     if (isPlaying) {
  3.         var nextBeat = 60000 / curTempo / 4;
  4.         // Turn off all lights on the tracker's row
  5.         $("#tracker li.pip").removeClass("active");
  6.         // Stop all audio
  7.         stopAllAudio();
  8.         // Light up the tracker on the current pip
  9.         $("#tracker li.pip.col_" + curBeat).addClass("active");
  10.         // Find each active beat, play it
  11.         $(".soundrow[id^=control]" + curBeat).each(function(i){
  12.             document.getElementById($(this).data('sound_id')).play();
  13.         });
  14.         // Move the pip forward
  15.         curBeat = (curBeat + 1) % 16;
  16.         // Schedule the next one
  17.         setTimeout(playBeat, nextBeat);
  18.     }
  19. }

That’s not all Brian is working on:

I’m also working on something like the ToneMatrix or Tenori-on (Flash and actual devices, respectively) in pure HTML/JS. It works too, but the sounds aren’t exactly designed to be great together (it’s currently working on a C scale) and so if you’re careful, you can get some decent sound but otherwise, it’ll hurt your ears.

Posted by Dion Almaer at 8:11 am

3.6 rating from 31 votes


Comments feed TrackBack URI

I did some last-minute optimization last night.

* I replaced the beats as shown in the screenshot with cleaner tones generated from GarageBand.
* Rather than stopping all audio now on each beat, it only resets the ones that are going to play again. That way, things like the crash cymbal that I added in are allowed to ring out for their full second or so if they’re not repeated. I realize it’s less of a realistic drum machine that way, but I like the effect.
* Using setTimeout was causing some laggy beat issues, depending on the browser. I’ve converted it over to using setInterval and it seems a lot smoother.

I’m having a ton of fun with this thing. Stuff I learned in the HTML 5 kit I used to start Fivorion, and then I backported some of those experiences. It’s been a nice and iterative learning experience. I’m looking forward to some video experiments soon too. =)

Comment by brianarn — July 3, 2009

This is:
1) Awesome.
2) The future.
The timing is really off for me on Firefox 3.5 (OS X), but it’s very smooth in Safari 4.

Comment by Schill — July 3, 2009

Suggestion: Test the sound of the instrument clicking on the instrument label.


Comment by Ajaxerex — July 3, 2009

Awsome. Here is my quick DJ effort!

Best enjoyed while programming!

Comment by RichardJohansson — July 6, 2009

Pretty cool, but I had to click the back button about 500 times to get back here and leave a comment!

Comment by mjuhl — July 6, 2009

Needs more cowbell ;-)

Comment by rXc3NtR1c — July 7, 2009

Hey guys, I know its been over a year since this article was written, but I wanted to share with you something I built over the past couple months: It is another HTML5 drum machine with a few extra bells and whistles, including the ability to download created loops in ogg, wav and mp3 format. It currently works best in Firefox.

Really good work on your project, Brian! It didn’t even dawn on me until a few months ago that maybe an HTML5 sequencer/drum machine would be possible.

Comment by turntayble81 — October 18, 2010

Leave a comment

You must be logged in to post a comment.