Free HTML 5 Drum Machine For Your Web Browser

html-drum-machine

Developer Jamie Thomson let us know about the HTML 5 Drum Machine Emulator – a new browser-based drum machine, described as a ‘the most advanced in-browser drum machine available’.

“I created this app with the intention that producers could compose and download drum patterns in a highly intuitive and accessible way,” says Thomson. 

Features:

  • create multiple 16-step patterns
  • emulate 5 different drum kits: tr-808; tr-909; linndrum; machinedrum; acoustic drum kit
  • manipulate the pitch and volume of each individual drum sample
  • save patterns which will be remembered for the next time you visit the web page
  • record and download patterns as wav files so that they can be used in ableton/logic/etc

The HTML 5 Drum Machine Emulator is free and should work in any browser that supports HTML 5. Give it a try and let us know what you think!

34 thoughts on “Free HTML 5 Drum Machine For Your Web Browser”

    1. Are you sure? I’m using Chrome on the latest OSX 10.9 and the drum machine page cuts the app above tempo and drum kit select. It basically leaves me with only adjusting the tempo, kits, and program the kick drum pattern.

    1. To think Steve Jobs made this huge thing against Flash and still to this day IOS strugle with any mildly advanced HTML5. Please Apple let us install Firefox or the real Chrome (not the re-skinned Safari) on our tablets.

  6. It’s cool to see this moving forward. Back in 2011 when everyone was saying HTML5 could do what Flash could do, I was pretty vocal about how that’s just not true, and decided to put my money where my mouth was, and write a Boss DR-110 emulator @ http://bitrotten.com/dr110/ (Note: I haven’t touched that code in four years, judge accordingly) – I came out of it finding that at the time, getting it to look right on Chrome, Firefox, IE and Safari, let alone Safari Mobile, was a giant asspain. But the real killer was timing and latency. No one else at the time had done javascript knobs either, that I could find, and I was relatively proud of the mostly-working knob functionality I concocted.

    I’ve entertained the idea of rewriting my DR-110 to use Canvas instead of HTML & CSS, as well as finishing the pattern export functionality, but haven’t really had the time, so I’m definitely looking forward to exploring the code underlying http://html5drummachine.com/

  8. It’s definitely a novel idea.

    Big problems: There seems to be no cut group for open/closed hat. Also, TBH, I expected the export function to simply, literally, export the selected pattern, not do some weird realtime recording thing. Both of these problems were very off-putting. Also, sometimes buttons would sort of “hang up” and not activate/deactivate until I’d pressed play, but that wasn’t really a big thing.

    Style note: the LinnDrum program should use 8-bit samples and nearest-neighbor interpolation to achieve that gritty pitched-down Prince style percussion. It just sounds so … not like a LinnDrum.

  9. This is pretty cool. But I wish it exported as MIDI and not WAV. I would just convert to midi from audio, but really I’d just rather cut that step out and export a MIDI file.

    And yes, a choke group between the open and closed hi hat is a must, especially if only a audio export option

  10. Great stuff, well done.

    Future features I’d enjoy … sound audition by clicking an instrument select button, Accent toggle on each step, per instrument. That would be awesome 🙂

    Other than that, I guess you could take this as far as you like and make it have pattern chaining, song memories, recall of songs by current user (logged-in), basically, make it into an on-line Rebirth TR emulator. That should keep you busy 😉

    Cheers

    2. “Guys, it’s free so…”

      So no one should offer any commentary whatsoever except either silence or desperate adulation.

      Yes, I am familiar with the theory you are espousing, Chris.

      Unfortunately there is the real world. In this world the old masters and intermediates offer advice to the newcomers so they do not follow distracting paths but rather stay focused on mastery.

      In this world, newcomers may see comments offering cautionary advice regarding the value of certain free things, where there are issues involved. These comments are helpful to the amateurs who can not instantly see the problems with every new claim, offering, and distraction from creative flow.

      Generally one should resist the siren’s call.

      When it is right to submit to this call, there is advice from elderly masters that it may be safe for some to proceed.

      1. You really need to learn how to talk to people and realize that the high horse that you seem to have been born on is invisible. If you have “made these” yourself then they must have not been very good since you don’t feel like mentioning the names. Software always has bugs at the beginning and HELPFUL advice is welcome to assist in the development but an obnoxious attitude is not. Your tone wreaks of amateur-wanna-be. The moment you used the word “masters”, you lost all credibility. If you really were as professional as you claim, you wouldn’t be babbling in order to give your ego a steroid shot. Give it a rest.

        1. “they must have not been very good since you don’t feel like mentioning the names”

          Friend, that is what I already said, and quite clearly. When experiments result in artisanal artifacts of poor quality, I don’t release it to the public, same as any competent professional. With skill comes taste. Many people do not possess the necessary discrimination and restraint to recognize and withhold low quality experiments from public release.

    3. I mean, that really is a terrible attitude. I don’t think anyone above you was insulting nor unfairly criticizing the work. But I guess you’re right since 8 synthtopia readers agree with you and no one disagrees.

  13. Lots of fun! It could use a SWING function. Also, leave a pattern running and open another tab in your browser, leaving the pattern running in the background. On my MacBook Pro using Chrome, the pattern plays back really slowly 🙂

  14. Nice!

    This has nothing to do with this development per se. I’m really not picking on the developer here, but I do wonder where all these web based apps are taking us… how far are we away from the browser being the ‘operating system’ there’s already fully fledged apps in the graphics domain, pixlr, for example!

    I’m not sure I want to use web browser based apps for this kind of thing, how long before I need an internet connection to fire up my DAW? We’re already seeing more and more companies offering subscriptions to their apps, some ill-conceived copy protection attempts, automatic updates, etc…

    Forgive me for being old fashioned, but I like to pay for an app and know it to be mine, so I can continue to run it, even if that means running an old OS, for as long as I like and only update if I choose to do so.

  15. My MBP is at my side at all times. If I want to knock out some drums I fire up Live, instantiate Battery, tweak some kicks and snares and start sequencing properly. Then I fill up the beat by slicing up and processing the shit out of sounds from every possible source and sequencing them in with all manner of glitches and filtering. Making several loops and then splicing pieces of them together to form new patterns yields the most interesting results. I made a killer sounding kick and snare out of a recording of a blazing fire. 808 sounds are cool here and there, but get pretty boring pretty quickly. You can make a drum/percussion sound out of anything! Stocco’s (at least that’s where I learned it) convolution technique comes in quite handy as well. Life is too short for boring, overused drums.

  16. Sure these things are neat and I’ve made a few of them myself. Thus I feel qualified to comment.

    First we have that it doesn’t work on something called “modern browsers”. It suggests I upgrade to Chrome and Firefox. No problem, I have the absolute latest to-the-day version of both. So let’s try that out.

    First we try the latest version of Chrome, which Chrome tells me is “up to date”. Well it doesn’t work and it gives me an error message to update to the latest version of Chrome. So that’s a wash out. Let’s try Firefox next.

    Again I have the cutting edge version. And it works. But the timing is, to put it in a gentle manner…. how do you say… the timing, it is shit. Yes, the timing is totally unacceptable, even for quick sketches.

    Not surprising since I’ve written the same drum machine application, and many others, myself, and I know the issues.

    So this is fine for what it is.

    To think it is a substitute for hardware or native compiled drum machines, well no, it’s not.

    Thanks to the creators for being bold and brave enough to dump this on the public. It’s not musically useful, but it’s cute, as is the identical issues I’ve written myself, which are of similar value.

  23. Compatible only with latest versions of Firefox and Chrome sorry… (It does not work with IE11. Pale Moon???) Obviously beta.

  24. It’s amazing, the rate of degradation of technology *use*

    Every time a system raises to the level of being able to play video, a new level of complexity is added (appropriately called “simplicity”) on top of the old systems, which uses 10-100 times the memory and CPU of the underlying layers, and everything is rewritten for this new layer.

    No mistake, the HTML drum machine looks and works OK, but it doesn’t do anything that ReBirth didn’t do in 1998. In fact it does a lot less…
    And that lovely tool did a lot less than a musician would like to do with rhythms.
    Change beat in a song, polyrhythms, different expression per hit in a pattern… etc.
    (Which eg the Roland R-8 could do, and that came out 10 years before Rebirth…)

Leave a Reply

Your email address will not be published. Required fields are marked *