WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Dec 16, 2024

Beats in the Browser: Coding Music with JavaScript

Rowdy Rabouw

Can your heartbeat sync to a browser-based drum machine? Learn to recreate analog gear natively using JavaScript, Tone.js, and Web MIDI.

Pause
Mute Enter Fullscreen
#1 about 7 min

History of the Roland TR-808 and TR-909

How Roland's early commercial failures became foundational instruments for hip-hop and electronic sound.

#2 about 4 min

Creating synthetic tones with Web Audio API

Generating audio signals natively in the browser requires configuring contexts and specific waveform node types.

#3 about 4 min

Simplifying drum sample playback with Tone.js

Using Tone.js as an abstraction layer minimizes code complexity when loading and triggering high-quality audio files.

#4 about 7 min

Connecting physical controllers using Web MIDI API

Parsing numeric byte arrays allows direct mapping of physical hardware inputs to graphical user interfaces.

#5 about 4 min

Building an interactive drum sequencer with Tone.js

Creating a programmatic transport loop schedules repeating grid interactions to maintain consistent musical timing.

#6 about 4 min

Live performance of the browser drum machine

A real-time showcase demonstrates programming custom patterns and modulating audio parameters entirely within the browser.

#7 about 5 min

Modulating music tempo with Web Bluetooth API

Connecting a biometric sensor via Bluetooth broadcasts heart rate values to dynamically manipulate playback tempo.

#8 about 3 min

Synthesizer karaoke and final presentation wrap up

The project culminates in an interactive musical performance backed by a fully functional browser application.

Matching moments

4:24 min

Building synthesizers and music sequencers using web audio APIs

Chris Heilmann +2 · LIVE

2:53 min

Developing custom music applications and open source browser plugins

Chris Heilmann +2 · LIVE

1:44 min

Playing synthesized backend audio objects in browsers

Lee Boonstra · LIVE

1:20 min

Building retro console games using modern web technologies

Chris Heilmann +2 · LIVE

3:29 min

Emulating vintage computer environments using WebAssembly architectures

Chris Heilmann +4 · LIVE

1:57 min

Demonstrating web data collection using JavaScript browser automation libraries

Tim Ruscica · Coffee With Developers

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

From Software Agents to Physical Devices: Inside the Agentic Hardware Stack

Michael Yuan, Vivian Hu

Michael Yuan
Vivian Hu
Open session

World Congress 2026 North America

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

Honey, look! I vibe-coded an OS!

Ian Smith

CTO, LYOS

Ian Smith
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood

Related videos

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw thumbnail
1:13:35
LIVE • over 1 year ago

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw

Chris Heilmann, Daniel Cranney, Rowdy Rabouw

Prototyping with Hardware and the Web thumbnail
30:58
WWC 2023 • almost 3 years ago

Prototyping with Hardware and the Web

George Cave

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More thumbnail
1:06:44
LIVE • 7 months ago

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Chris Heilmann, Daniel Cranney, Theodore Lefevre

WeAreDevelopers LIVE - Demo Time, Live Coding, End-to-End Testing and more thumbnail
1:02:27
LIVE • 11 months ago

WeAreDevelopers LIVE - Demo Time, Live Coding, End-to-End Testing and more

Chris Heilmann, Daniel Cranney, Elio Struyf

Using all the HTML, Running State of the Browser and "Modern" is Rubbish thumbnail
1:15:44
LIVE • over 1 year ago

Using all the HTML, Running State of the Browser and "Modern" is Rubbish

Chris Heilmann, Daniel Cranney, David Letorey

WeAreDevelopers LIVE - CSS is DOOMed thumbnail
59:11
LIVE • 5 months ago

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Justin Halsall, Christian Schaefer

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.