Beats in the Browser

on YouTube ↗32m

" summary

Builds a working browser beatmaker that actually plays back full loops using Tone.js and the Web Audio API, with a React UI and a canvas editor for performance. Sequencer is a 32-step matrix: drum tracks map five samples per step, melodic tracks map up to 24 notes per step; playback uses Tone.Sequence, Tone.Sampler and tone.transport with tone.draw.schedule to move a playhead. The app runs in-browser and produces real beats but hits CPU and background-tab limits; sandbox and live app are provided.

AI-written summary · about

" chapters (11)

1. 0:00Introduction and setup
2. 1:03Prior art in web music
3. 3:35Introducing Tone.js
4. 5:20Building Beatmaker
5. 9:41Canvas-based editor
6. 14:25Tone.js sequencing demo
7. 18:15Playback controls and features
8. 21:21Q&A and kimono story
9. 24:09Music background and inspiration
10. 27:57Future of Beatmaker
11. 31:05Closing and thanks

" related talks

• 40mBeats in the Browser: Coding Music withJavaScriptRowdy Rabouw · Øredev 2023
• 26mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · JSDayIE 2023
• 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
• 22mMusic of ReactVladimir Barsukov · CSS-Minsk-JS 2018
• 40mLiveJS: Making Music with JavaScriptRuth John, Martin Schuhfuss, Matt Mckegg · ColdFront 2017
• 39mBecome a Developer of Electronic MusicNir Kaufman · NationJS Frontrunners React 2019