Beats in the Browser - Coding Music with JavaScript

on YouTube ↗26m

" summary

The browser generates playable music using the Web Audio API and loaded WAV samples, with a live 16-step drum sequencer that uses Tone.js for precise scheduling (Tone.Transport.scheduleRepeat) and per-track mute, pan and pitch. MIDI input maps note numbers (e.g. 54–117) to pads so a cheap controller can trigger samples; Web MIDI lacks Safari support. A Polar Bluetooth heart-rate monitor sets BPM in real time (Web Bluetooth), turning heartbeat into tempo — the TR-909 comparison notes originals now fetch roughly €8,000.

AI-written summary · about

" chapters (13)

1. 0:00Introduction and history
2. 3:34Web Audio API basics
3. 6:32Playing drum samples
4. 9:00Using Tone.js library
5. 10:27MIDI device integration
6. 13:58Live MIDI demo
7. 14:18Building a drum sequencer
8. 17:34Live sequencer demo
9. 21:15Recording and playback
10. 21:37Web Bluetooth API
11. 23:25Heart rate BPM control
12. 24:08Faithless song demo
13. 25:57Conclusion and resources

" related talks

• 31mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · DevReach 2023
• 44mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · NDC Sydney 2024
• 40mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · Copenhagen Developers Festival 2023
• 32mBeats in the BrowserKen Wheeler · HalfStack Online May 2020
• 40mLiveJS: Making Music with JavaScriptRuth John, Martin Schuhfuss, Matt Mckegg · ColdFront 2017
• 46mLive Coding Music: Can You Code? Become a Composer with WebAudio and WebMIDI!Sylvain Wallez · DevFest Toulouse 2019
• 46mMaking the Web Rock: The Web Audio APIChris Wilson · HTML5DevConf 2013
• 14mMusical Creativity in the BrowserScott Ammon · CascadiaJS 2020