Beats in the Browser: Coding Music with JavaScript

Can your own heartbeat set the tempo for your music? See how JavaScript and the Web Bluetooth API can power a drum machine in the browser.

Beats in the Browser: Coding Music with JavaScript
#1about 7 minutes

The history and influence of Roland drum machines

Roland's TR-808 and TR-909 drum machines were commercial failures that later became iconic in hip hop and house music.

#2about 3 minutes

Creating basic sounds with the Web Audio API

The Web Audio API allows sound generation in the browser using an AudioContext and an oscillator node to create specific frequencies and waveforms.

#3about 3 minutes

Simplifying audio playback with Tone.js and WAV files

Instead of complex Web Audio API code, the Tone.js library provides a simple abstraction for loading and playing audio files like WAVs.

#4about 6 minutes

Triggering browser audio with the Web MIDI API

The Web MIDI API enables connecting hardware controllers to a web application by requesting access and listening for MIDI messages to trigger events.

#5about 7 minutes

Building a step sequencer using Tone.js for looping beats

Create a looping drum pattern by building a step sequencer that uses the Tone.js transport scheduler to repeatedly trigger sounds based on user input.

#6about 4 minutes

Using the Web Bluetooth API to control music tempo

The Web Bluetooth API can connect to low-energy devices like a heart rate monitor to dynamically control application parameters, such as music tempo.

#7about 2 minutes

Combining a drum machine with karaoke for a live performance

A live demonstration showcases the creative possibilities of browser-based music tools by combining the custom drum machine with a karaoke performance.

Related jobs
Jobs that call for the skills explored in this talk.

Software Engineer

tree-IT GmbH

tree-IT GmbH
Bad Neustadt an der Saale, Germany

€54-80K
Intermediate
Senior
Java
TypeScript
+1

Matching moments

Building music sequencers with the Web Audio API
16:40 MIN

Building music sequencers with the Web Audio API

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

How to build a step sequencer in JavaScript
07:12 MIN

How to build a step sequencer in JavaScript

Beats in the Browser: Coding Music with JavaScript

A live karaoke demo and concluding thoughts
02:31 MIN

A live karaoke demo and concluding thoughts

Beats in the Browser: Coding Music with JavaScript

Connecting physical MIDI controllers using the Web MIDI API
06:05 MIN

Connecting physical MIDI controllers using the Web MIDI API

Beats in the Browser: Coding Music with JavaScript

Generating basic sounds in the browser with Web Audio API
03:08 MIN

Generating basic sounds in the browser with Web Audio API

Beats in the Browser: Coding Music with JavaScript

Simplifying audio playback in the browser with Tone.js
03:03 MIN

Simplifying audio playback in the browser with Tone.js

Beats in the Browser: Coding Music with JavaScript

The history and cultural impact of Roland drum machines
06:33 MIN

The history and cultural impact of Roland drum machines

Beats in the Browser: Coding Music with JavaScript

Controlling music tempo with the Web Bluetooth API
04:10 MIN

Controlling music tempo with the Web Bluetooth API

Beats in the Browser: Coding Music with JavaScript

Featured Partners

Related Videos

See all videos
Beats in the Browser: Coding Music with JavaScript32:54

Beats in the Browser: Coding Music with JavaScript

Rowdy Rabouw

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw1:13:35

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

Chris Heilmann & Daniel Cranney & Rowdy Rabouw

Building a Browser-Based Karaoke Game with Web Speech API28:09

Building a Browser-Based Karaoke Game with Web Speech API

Ana Rodrigues

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more1:06:20

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

Building a Browser-Based Karaoke Game with Web Speech API28:09

Building a Browser-Based Karaoke Game with Web Speech API

Using all the HTML, Running State of the Browser and "Modern" is Rubbish1:15:44

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

Chris Heilmann & Daniel Cranney and David Letorey

Prototyping with Hardware and the Web30:58

Prototyping with Hardware and the Web

George Cave

Related Articles

View all articles
DC
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...
Dev Digest 198: 30 years of JS, In-Browser AI, How Attackers Abuse GenAI
DC
Daniel Cranney
Dev Digest 184: Happy Agents, Vibe Hacking & You Don't Need JavaScript!
Inside last week’s Dev Digest 184 . 😀 “Agents for the sake of Happiness” Keynote video of the WeAreDevelopers World Congress 😅 Is AI sycophancy a “dark pattern”? 🤖 Claude Code AI best practices 🦠 AgentHopper - the first AI Virus ⚡ Hidden prompt gave...
Dev Digest 184: Happy Agents, Vibe Hacking & You Don't Need JavaScript!
DC
Daniel Cranney
Security Basics for Vibe Coders
Vibe 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...
Security Basics for Vibe Coders

From learning to earning

Jobs that call for the skills explored in this talk.