March 24, 2015

Bring the Beat With a Web Browser and HTML5 Thanks to Synthtopia

Over the last couple of years, HTML5 has made a lot of strides in the field. It's brought users HTML5 gaming options, video choices, and even some new options on the musical field. Synthtopia is bringing out another new option using HTML5 to drive development of a browser-based drum machine dubbed, fittingly enough, the HTML5 Drum Machine.

The HTML5 Drum Machine offers an array of drums and percussion instruments sufficient to cover some entire symphonies, including kick drums, snares, and at least a couple different cymbals, some of which I recognize from my time in a high school marching band. From there, users will have the ability to select the exact tempo, the particular drums desired, the genre of drums available—drums for hip-hop, as it turns out, sound quite a bit different from drums for electro—the pattern desired and the pacing with a series of fairly simple to use sliders and dials, all easily reached with the mouse.


There are a host of 16-step drum patterns to select from, as well as emulation from actual hardware-based machines like the TR-808 and the Linndrum. There's even a direct, free WAV (NewsAlert) download option, allowing users to readily replicate performances into other media. Since it's an HTML5 app, the system will work on any browser that runs HTML5, including Mozilla Firefox, as I found out to my delight working the app myself.

HTML5 Drum Machine's developer Jamie Thomson (News Alert) offered up some comment on why he put together such an app, saying “I created this app with the intention that producers could compose and download drum patterns in a highly intuitive and accessible way.” His intention appears to have been realized here, as the app has already been described as one of “…the most advanced in-browser drum machines available.”

The app is surprisingly intuitive; with absolutely nothing in the way of instructions, I managed to set up a reasonably interesting beat in a matter of a couple minutes. That's likely to mean a great experience for a lot of users, even those not specifically interested in setting up professional-quality drumming from an app. The app all but encourages experimentation; a tweak in the levels here, a boost or a drop in speed there, and the entire experience comes out just a little different than some might expect. It's the kind of thing that small studios and amateur operations looking for a bit of edge likely have been craving; it puts an incredible amount of percussion capability right into the user's hands, and allows drum tracks to be easily set up with minimal expense and not much electronic know-how.

This is the kind of thing that HTML5 has been doing for some time now; it makes a variety of media easier to work with and it does so without any particular respect to platforms. From mobile to desktop, most apps can get in on this action, and that makes it a noteworthy concept. While some may not be interested in or appreciate the opportunity here, the key point is that HTML5 is making access to tools like these much more readily available than in the past.

Edited by Dominick Sorrentino


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More