Beats in the Browser: Coding Music with JavaScript
Can your browser talk to MIDI controllers and heart rate monitors? Learn how to build a JavaScript drum machine that bridges the physical and digital worlds.
#1about 7 minutes
The history and cultural impact of Roland drum machines
Roland's TR-808 and TR-909 drum machines were commercial failures that later became iconic in hip-hop and dance music.
#2about 3 minutes
Generating basic sounds in the browser with Web Audio API
The Web Audio API allows for sound generation in the browser using an AudioContext and an oscillator node to create simple waveforms.
#3about 3 minutes
Simplifying audio playback in the browser with Tone.js
Instead of complex synthesis, use WAV files and the Tone.js library to easily load and play audio samples with minimal code.
#4about 6 minutes
Connecting physical MIDI controllers using the Web MIDI API
The Web MIDI API enables browsers to receive messages from physical hardware like keyboards and drum pads to trigger in-browser events.
#5about 7 minutes
How to build a step sequencer in JavaScript
A step sequencer can be built using HTML checkboxes for the interface and the Tone.js scheduling feature to loop through and play selected notes.
#6about 4 minutes
Controlling music tempo with the Web Bluetooth API
The Web Bluetooth API can connect to low-energy devices like a heart rate monitor to dynamically control application parameters like music tempo.
#7about 3 minutes
A live karaoke demo and concluding thoughts
A fun demonstration combines the browser-based drum machine with karaoke, followed by a look back at early DJing experiences.
Related jobs
Jobs that call for the skills explored in this talk.
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTMLInside last week’s Dev Digest 215 .
🗿 Make AI talk like a caveman
🧠 A guide to context engineering for LLMs
🤖 Simon Willison on agentic engineering
🔐 Axios supply chain attack post mortem
🛡️ Designing AI agents to resist prompt injection
🎨 HTML in c...
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScriptEvery Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Daniel Cranney
Dev Digest 198: 30 years of JS, In-Browser AI, How Attackers Abuse GenAI Inside last week’s Dev Digest 198 .
🎂 30 years of JavaScript
⏰ How long is a JavaScript second
💻 Clean code in Angular
🤦♂️ AI makes different mistakes than humans
👨💻 In-browser and offline AI
🟠 Undocumented Hacker News features
🐋 DeepSeek censored...
Christina Schaireiter
Security Basics for Vibe CodersVibe coding has become a popular trend in the tech world. With so many tools now available for both developers and non-developers, it’s easier than ever to build projects using natural language, in some cases without touching a line of code along the...
From learning to earning
Jobs that call for the skills explored in this talk.