Nov 9, 2024

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.

#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.