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 Chris Heilmann +2 · LIVE

1:48 min

Generating algorithmic music using web components and audio APIs

Chris Heilmann Chris Heilmann +2 · LIVE

2:53 min

Developing custom music applications and open source browser plugins

Chris Heilmann 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 Chris Heilmann +2 · LIVE

3:29 min

Emulating vintage computer environments using WebAssembly architectures

Chris Heilmann Chris Heilmann +4 · LIVE

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
10 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
17 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
18 days ago

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

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
24 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
25 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
about 1 month ago

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

Chris Heilmann, Daniel Cranney, Marc Plogas

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.