Rowdy Rabouw

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.

Beats in the Browser: Coding Music with JavaScript
#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.

Matching moments

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Recreating React components using AI and dev tools
04:56 MIN

Recreating React components using AI and dev tools

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

The challenge of keeping up with modern CSS
07:46 MIN

The challenge of keeping up with modern CSS

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Using AI to overcome challenges in systems programming
02:49 MIN

Using AI to overcome challenges in systems programming

AI in the Open and in Browsers - Tarek Ziadé

Building a JavaScript generator for Cistercian numerals
05:54 MIN

Building a JavaScript generator for Cistercian numerals

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Using AI prompts to rebuild a classic 8-bit game
05:26 MIN

Using AI prompts to rebuild a classic 8-bit game

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Exploring bizarre headlines about IoT and robotics
00:38 MIN

Exploring bizarre headlines about IoT and robotics

Fake or News: Coding on a Phone, Emotional Support Toasters, ChatGPT Weddings and more - Anselm Hannemann

Featured Partners

Related Videos

Beats in the Browser: Coding Music with JavaScript32:54

Beats in the Browser: Coding Music with JavaScript

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

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

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

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

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

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

Building a Browser-Based Karaoke Game with Web Speech API

Ana Rodrigues

The Eventloop in JavaScript - How does it work?30:36

The Eventloop in JavaScript - How does it work?

Christian Woerz

Unleash your web skills on native!52:01

Unleash your web skills on native!

Rowdy Rabouw

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
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every 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...
Building a "shoutout" component in plain HTML/CSS/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
DC
Daniel Cranney
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
Inside last week’s Dev Digest 195 . 👎 No more external likes 🤗 Needy programs 📉 The worst selling Microsoft product 🟨 JavaScript engines zoo 🍞 No more toasts! 🤖 Messing with bots 👔 Beware of fake job interviews 🗞️ Join over 150,000 developers alread...
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!

From learning to earning

Jobs that call for the skills explored in this talk.