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

1:48 min

Generating algorithmic music using web components and 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

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
3 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
5 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
12 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
17 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail
1:04:42
17 days ago

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers LIVE - How DevRel Makes Tech More Human thumbnail
48:06
24 days ago

WeAreDevelopers LIVE - How DevRel Makes Tech More Human

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 16:50–17:20

Stage 4

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

September 25, 2026 · 09:40–10:10

Stage 5

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

September 25, 2026 · 15:30–16:00

Stage 6

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

September 25, 2026 · 13:30–14:00

Stage 5

I Built My Own AI Wearable (So You Don't Have To — But You'll Want To)

Mike Chambers

AWS -Specialist Developer Advocate, Machine Learning

Mike Chambers
Open session

World Congress 2026 North America

September 25, 2026 · 16:50–17:20

Stage 1

Honey, look! I vibe-coded an OS!

Ian Smith

CTO of LYOS

Ian Smith
Open session

World Congress 2026 North America

September 24, 2026 · 10:20–10:50

Stage 1

The Browser Is Becoming an AI Runtime

Ajit Varma, Will Bryk

Ajit Varma
Will Bryk

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
World Congress 2023 • about 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 • 8 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 • about 1 year 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 • 6 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.