Day Disco

on YouTube ↗24m

" summary

Demo builds a small drum kit using the Web Audio API: oscillators with waveform types (sine, triangle), a frequency linear ramp from ~130Hz down to 1Hz over 300ms and gain nodes for envelopes, plus a sampled clap decoded into an AudioBuffer and played via a BufferSource. A quick step sequencer (3 sounds × 8 steps) uses setInterval for scheduling and requestAnimationFrame for playback timing. Hardware MIDI mapping logs controller values, playback exposes metadata via the MediaSession API, visuals use OffscreenCanvas and Path2D with an AnalyzerNode driving lights; demos mostly work with occasional MIDI/network hiccups.

AI-written summary · about

" chapters (11)

1. 0:00Welcome
2. 1:30Music with Web Audio API
3. 5:24Synthesizing drum sounds
4. 8:37Building step sequencer
5. 12:27MIDI controller control
6. 14:34Adding bass and chords
7. 15:44Media Session API control
8. 18:36Disco lights with Canvas
9. 22:12Audio analysis for lights
10. 23:02Final demo
11. 23:51Future APIs and closing

" related talks

• 44mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · NDC Sydney 2024
• 33mWe ❤ Music & the WebMartin Schuhfuss, Tim Pietrusky · JSConf Budapest 2016
• 40mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · Copenhagen Developers Festival 2023
• 42mElements of Dance MusicPaul Adenot · JSConf.Asia 2015
• 31mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · DevReach 2023
• 30mJavaScript Patterns For Contemporary Dance MusicJan Krutisch · JSConf EU 2013
• 40mLiveJS: Making Music with JavaScriptRuth John, Martin Schuhfuss, Matt Mckegg · ColdFront 2017
• 34mTools for the 21st century musicianSoledad Penadés · ffconf 2014