I built a free browser-based drum machine using the WebAudio API to celebrate 9/09 day 2022!
Some press coverage:
- “There’s Now a Playable Online Drum Machine Based on the Roland TR-909 (mixmag)
- “Make your own techno and acid beats with this fun and free online clone of the legendary TR-909 drum machine (BoingBoing)
- “Try this Free Online Drum Machine Based on the Roland TR-909 (DJ Magazine)
- “Get a free 909-style drum machine in your browser” (MusicRadar)
- “Celebrate 909 day with a virtual ER-99 Rhythm Machine in your browser”(Gearnews.com)
- “Free drum synth for 909 day” (Sonic State)
- “ER-99 Online Web-Based Roland TR-909 Emulator by Extralife Instruments” (matrixsynth)
- “Play the 909 in your browser with the ER-99 emulation” (MusicTech)
All of the drums are synthesized using virtual analog oscillators, noise, and filters. The hi-hats, crash, and ride cymbals are produced from sampled audio. I took up this project as a way to learn TypeScript and made extensive use of its Interface system to define instrument classes and reusable audio components.
The percussive elements mostly consist of triangle wave oscillators with simple pitch envelopes blended with heavily filtered white noise. The original circuit’s noise generation used many different filters on the same noise source to produce lots of clicky impact sounds. The use of RC filters also introduces frequency-dependent phase shifts into each channel’s noise signal, which allows multiple drums to be played simultaneously from the same noise source without just doubling the volume.
Bringing the instrument into the web domain allowed me to expand its feature set, adding preset/patch storage, tunable sample playback, and extensive instrument parameter control.
Designing the visual look of the instrument was a new challenge for me, and I decided to incorporate some tactile and skeumorphic elements like subtle plastic textures and moving keyswitches to replicate the feel of the original hardware . The immediate visual feedback from switches and bright red pseudo seven-segment display add much-needed confirmation of user actions that may not have immediate audible results. The responsive design also allows the machine to be used on tablets and mobile devices for an even more tactile experience. The UI makes extensive use of Google’s Space Mono, a retro fixed-width font that adds a playful element to the highly rectilinear interface.
The complete source code is available on Github. Most of the technical details were sourced from Network-909’s in-depth analysis of the original analog circuitry, along with some dissection of Ableton/Cycling74’s native Drum synth instruments, which are based on the same circuits.