Friday, July 3rd, 2009
It’s Friday. Play some drums…. HTML5 style
<p>
Brian Arnold created a fun sample drum machine simulator using HTML5 <audio>.
JAVASCRIPT:
-
-
function playBeat() {
-
if (isPlaying) {
-
var nextBeat = 60000 / curTempo / 4;
-
// Turn off all lights on the tracker's row
-
$("#tracker li.pip").removeClass("active");
-
// Stop all audio
-
stopAllAudio();
-
// Light up the tracker on the current pip
-
$("#tracker li.pip.col_" + curBeat).addClass("active");
-
// Find each active beat, play it
-
$(".soundrow[id^=control] li.pip.active.col_" + curBeat).each(function(i){
-
document.getElementById($(this).data('sound_id')).play();
-
});
-
// Move the pip forward
-
curBeat = (curBeat + 1) % 16;
-
// Schedule the next one
-
setTimeout(playBeat, nextBeat);
-
}
-
}
-
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.
Related Content:
3.9 rating from 25 votes
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. =)
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.
Suggestion: Test the sound of the instrument clicking on the instrument label.
Great!
Awsome. Here is my quick DJ effort!
http://www.randomthink.net/labs/html5drums/#00000010000000010000001000001000000000000000000000000000000000001000000010001000000010000000000000000000000000000100000001000000001000000010000000000000000000001000000000000010000001000000000001001000000000001001000000000000%7C110
Best enjoyed while programming!
Pretty cool, but I had to click the back button about 500 times to get back here and leave a comment!
Needs more cowbell ;-)
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: http://patternsketch.com 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.