We’re big music fans, and one of our favorite pastimes since our school days has been experimenting with music production software. Our first taste came in ’97 when Propellerheads released the ReBirth RB-338.

Since then, we’ve followed along and have been truly inspired by the development teams at Propellerheads, Ableton, and Image-Line.

A Browser Based Approach, Without Flash

Over the past few years, we’ve seen some really cool projects built with Flash that bring the music creating experience to the browser. Two of our favorites being Aviary and Audio Tool.

But, we’re not Flash developers, and with HTML5′s emerging promise of native functionality (no longer forcing us to rely on third party plugins),  we thought, why not give this a shot?

So, we’re happy to introduce PatternSketch, our browser based Drum Machine and Sequencer.



Features: Saving, Collaborating, and Exporting

In addition to the advertised feature-set of using your keyboard to tap out rhythms, or creating loops, we tried to focus our attention on ways to make it something actually useful. Once the initial sequencing features were built, a lot of our conversation surrounded the idea of collaboration amongst friends.

Since we’re using JSON to record patterns, we decided to save this information to a database so you could call it up at a later date. Saving patterns opened the door to sharing patterns, allowing friends to modify your creation, and send back to you.

Another idea was around portability. Since your limited within this context to only producing rhythms (no chords, bass, melody, etc), it made sense to create functionality to export your loops.  This allows users to ‘sketch’ a pattern online, then continue working on the project with more sophisticated audio hardware or software offline.

Performance Issues

Despite what you can do with JavaScript, it isn’t currently possible to execute accurate timing, due in large part to JS’s single-threaded nature.  This is unfortunate, because the human ear can detect a timing miscalculation as small as a few milliseconds.

Until this issue can be resolved, we’re aware the limitations for practical use exist.

Regardless, we think PatternSketch is an exciting project and preview of audio tools we may see in the near future, and we’re delighted to share it with everyone.

Shout Outs

A special thanks to Doug Koh, who provided us with an awesome design, and the name ‘PatternSketch’.

We’d also like to thank the developers out there who’ve tried this already and gave us further inspiration, including but not limited to Bryan Arnold, Stephen Eisenhauer, and Jesse Jackson.

Finally, we’d like to thank Ghostly International for hosting the Visual Masterclass at Eyebeam, and the participants who gave feedback and encouragement during the birth of the project.

Patternsketch »