> Markdown version of [/videos/1279-beats-in-the-browser-coding-music-with-javascript](https://www.wearedevelopers.com/videos/1279-beats-in-the-browser-coding-music-with-javascript). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Beats in the Browser: Coding Music with JavaScript Can your heartbeat sync to a browser-based drum machine? Learn to recreate analog gear natively using JavaScript, Tone.js, and Web MIDI. - **Speakers:** [Rowdy Rabouw](https://www.wearedevelopers.com/@rowdy-rabouw) - **Event:** WeAreDevelopers LIVE - **Published:** December 16, 2024 - **Duration:** 32:54 - **URL:** https://www.wearedevelopers.com/videos/1279-beats-in-the-browser-coding-music-with-javascript ## Summary Tracing the legacy of foundational analog drum machines like the Roland TR-909, this presentation demonstrates how to map physical DJ hardware experiences natively into web browsers. By moving past the verbose native Web Audio API, developers can leverage abstraction libraries like Tone.js to simplify audio context management, manage sample playback, and build functional step sequencers driven entirely by frontend code. Extending beyond traditional web interfaces, the implementation explores direct hardware integration using the Web MIDI API. Applications can drive visual UI states and trigger audio natively by capturing command, note, and velocity data arrays pushed from external physical controllers. Furthermore, utilizing the Web Bluetooth API connects low-energy peripheral devices—such as capturing characteristic values from a live heart-rate monitor—to dynamically manipulate application data like sequence BPM in real-time. This workflow showcases how modern frontend development can break out of standard user interaction paradigms, enabling rich, hardware-driven creative tooling without relying on native binaries. **Keywords:** javascript digital audio, web audio api manipulation, tone.js framework, audio context management, web midi api integration, external hardware mapping, browser step sequencer, web bluetooth let connection, dynamic tempo synchronization, midi message routing, velocity control parsing, interactive audio UI, frontend media devices ## Chapters 1. **History of the Roland TR-808 and TR-909** (00:02) — How Roland's early commercial failures became foundational instruments for hip-hop and electronic sound. 1. **Creating synthetic tones with Web Audio API** (06:03) — Generating audio signals natively in the browser requires configuring contexts and specific waveform node types. 1. **Simplifying drum sample playback with Tone.js** (09:06) — Using Tone.js as an abstraction layer minimizes code complexity when loading and triggering high-quality audio files. 1. **Connecting physical controllers using Web MIDI API** (12:48) — Parsing numeric byte arrays allows direct mapping of physical hardware inputs to graphical user interfaces. 1. **Building an interactive drum sequencer with Tone.js** (18:56) — Creating a programmatic transport loop schedules repeating grid interactions to maintain consistent musical timing. 1. **Live performance of the browser drum machine** (22:54) — A real-time showcase demonstrates programming custom patterns and modulating audio parameters entirely within the browser. 1. **Modulating music tempo with Web Bluetooth API** (26:07) — Connecting a biometric sensor via Bluetooth broadcasts heart rate values to dynamically manipulate playback tempo. 1. **Synthesizer karaoke and final presentation wrap up** (30:23) — The project culminates in an interactive musical performance backed by a fully functional browser application. ## Related Moments - [Building synthesizers and music sequencers using web audio APIs](https://www.wearedevelopers.com/videos/1299-new-browser-apis-end-of-react-create-app-smuggling-data-in-emoji-and-more-with-rowdy-rabouw) (from "New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw") - [Developing custom music applications and open source browser plugins](https://www.wearedevelopers.com/videos/1299-new-browser-apis-end-of-react-create-app-smuggling-data-in-emoji-and-more-with-rowdy-rabouw) (from "New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw") - [Playing synthesized backend audio objects in browsers](https://www.wearedevelopers.com/videos/10-raise-your-voice) (from "Raise your voice!") - [Building retro console games using modern web technologies](https://www.wearedevelopers.com/videos/1729-wearedevelopers-live-real-time-phone-agents-unsafe-vpns-more) (from "WeAreDevelopers LIVE – Real-Time Phone Agents, Unsafe VPNs & More") - [Emulating vintage computer environments using WebAssembly architectures](https://www.wearedevelopers.com/videos/1764-wearedevelopers-live-web-scraping-agents-actors-and-more) (from "WeAreDevelopers LIVE – Web Scraping, Agents, Actors and more") - [Demonstrating web data collection using JavaScript browser automation libraries](https://www.wearedevelopers.com/videos/913-tech-with-tim-at-wearedevelopers-world-congress-2024) (from "Tech with Tim at WeAreDevelopers World Congress 2024") ## Related Articles - [All the videos of Halfstack London 2024!](https://www.wearedevelopers.com/magazine/521-all-the-videos-of-halfstack-london-2024) - [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents) - [Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3](https://www.wearedevelopers.com/magazine/663-devs-vs-marketers-cobol-and-copilot-make-live-coding-easy-and-more-the-best-of-live-2025-part-3) - [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries) ## Related Jobs - [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda** - [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse**