Beats in the Browser - Coding Music with JavaScript

on YouTube ↗44m

" summary

Live demo of Web Audio API code and samples shows oscillators, fetch + decodeAudioData for WAVs, and an AudioContext driving speakers; a four‑pad sampler and a 16‑step sequencer run on Tone.js with Tone.Transport.scheduleRepeat and a Recorder that exports audio. Web MIDI maps MIDI messages (note numbers like 40/42 and velocity 0–127) to pads using LPD8/AKAI controllers. Web Bluetooth reads a Polar heart‑rate monitor to set BPM (demo failed on stage but is implemented). Visuals use an AnalyserNode.

AI-written summary · about

" chapters (9)

1. 0:00Welcome
2. 6:20Web Audio API basics
3. 13:34Drum pad interface
4. 15:41MIDI devices in browser
5. 23:17TR-909 sequencer
6. 28:53Recording and replaying
7. 33:22Web Bluetooth API
8. 40:19Visualizing audio
9. 43:22Closing

" related talks

• 40mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · Copenhagen Developers Festival 2023
• 26mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · JSDayIE 2023
• 40mBeats in the Browser: Coding Music withJavaScriptRowdy Rabouw · Øredev 2023
• 31mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · DevReach 2023
• 32mBeats in the BrowserKen Wheeler · HalfStack Online May 2020
• 40mLiveJS: Making Music with JavaScriptRuth John, Martin Schuhfuss, Matt Mckegg · ColdFront 2017
• 46mMaking the Web Rock: The Web Audio APIChris Wilson · HTML5DevConf 2013
• 33mWe ❤ Music & the WebMartin Schuhfuss, Tim Pietrusky · JSConf Budapest 2016