It’s Friday. Play some drums…. HTML5 style
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.
