Ember Drum Sequencer

This is a demo application I originally put together for the "SproutCore 2 Demo App Hackathon" hosted by Strobe. Strobe was later aquired by Facebook so none of the web pages for the contest seem to exist anymore, but you can find my original source here: https://github.com/adamjmurray/SC2-Drum-Sequencer

This demo has since been ported to the newest incarnation of the framework: Ember.js. That's what you're looking at here.

Usage

0. Open the app here. You may need to give it a moment to initialize. If Chrome crashes, try refreshing (HTML5 audio support is still buggy)

1. Click some buttons in the grid

2. Press the "play" button (the triangle-shaped button under the "Playback Controls" section)

Features

• 4-track drum sequencer, backed by 4 audio samples in .mp3 and .ogg format (a kick drum, a snare, a high hat, and a clap sound).

• Create 4-beat patterns with 16th note resolution (each beat is divided into 4 steps, for a total of 16 steps per track).

• Pattern state is recorded in the URL hash, so you can save and reload your favorite patterns by bookmarking the URL.

• Playback Speed (BPM, aka beats per minute)

• Volume controls are provided.

Goals

• Build a pure HTML/CSS/JS drum sequencer (no Flash!) with Ember

• Use good MVC patterns

• Use minimal, semantic markup

• Experiment with the latest HTML 5 features and don't worry too much about cross-browser compatibility.

• Keep it simple. There's a ton more features I'd like to add (see below), but it's just a demo...

Browser Compatibility

• The demo runs best in WebKit-based browsers (Chrome and Safari).

• Chrome sometimes randomly crashes when attempting to load too much HTML5 audio at once, especially when developing locally. Refresh a couple times and it should work? The intialization of the app could probably be optimized to work around this, but I believe its a bug in Chrome and they should deal with it.

• It works in Firefox, but I made use of the range input, which is not yet supported in Firefox. So these degrade to a text input. It's not as nice, but it works.

• It doesn't work in IE last time I checked. Very likely has to do with the HTML5 audio. Maybe a recent version of IE10 or even 9 would work.

• It doesn't work in iOS. Probably another issue with HTML5 audio that could be sorted out. Again, the Ember-based features like the UI all seem to work fine...

Caveats

JavaScript wasn't designed for realtime music applications. You will not get perfect timing. I wouldn't actually write music with an app like this. But it's fun and shows where web technology may take us in a few years. The "web audio API" looks like a promosing direction for serious audio work in the browser. You can learn more about HTML5's web audio API here.

Ideas for Features & Improvements

Want to build on this demo and make it better? Here's some ideas:

• The app needs to load the audio samples before it becomes responsive. It would have been nice to have an initialization view that shows loading progress and hides the main UI until it is ready.

• Fix the cross-browser compatibility problems.

• Remember BPM in the URL.

• The app loads an audio sample for every step in the grid. This increases start-up time, and won't scale up. It would be better to have a set number of samples (aka "voices") per track. Then we could use a round-robin strategy to select a sample during playback. I'd default to 4, or maybe 8, samples per track. Bonus points for making the number of samples per track configurable.

• Provide per-track volume controls, perhaps via a slider on the side of each track.

• Provide per-step volume controls. I was thinking if you click near the top of a button in the grid, the step would be louder than if you click near the bottom. You could use a color coding strategy as a volume indicator, like red is loud, blue is quiet.

License

See license.txt

If you do something cool with this app, let me know!

---

Adam Murray, 2011-2013