React beyond markup

on YouTube ↗35m

" summary

A small JSX-based sequencer composes timed musical events by mapping and cloning child components to assign start times, using the browser Web Audio API to build and connect AudioContext nodes like oscillator node and buffer source. It loads WAVs via fetch + decodeAudioData, passes one shared audio context through React context to avoid recreating it, and computes offsets from tempo and notes-per-quarter to schedule kicks, snares, synths and a Moog-style bass. Live demo plays the assembled tracks successfully.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 1:57Music Theory
3. 4:09Oscillator Node
4. 5:15Audio Routing
5. 8:46Create an Oscillator
6. 10:40Note Parser
7. 12:31Fetch Api
8. 22:35Notes per Quarter
9. 27:14Snare Drum
10. 29:33Bars and Sections
11. 30:48Synth Line

" related talks

• 22mMusic of ReactVladimir Barsukov · CSS-Minsk-JS 2018
• 32mSequencing Audio Using React and the Web Audio APIBruce Lane, Vincent Riemer · React Amsterdam 2017
• 08mReactronica: Music as a Function of StateKaho Cheung · ReactConf AU 2020
• 19mBeats in the browserKaho Cheung · Next.js Conf 2022
• 12mMusic of ReactWowa Barsukov · React Amsterdam 2018
• 26mReact & Web Audio Api: Building a MIDI InteracePeter Piekarczyk · React Rally 2015
• 21mr-audio: Declarative, reactive and flexible Web Audio graphs in ReactJakub Fiala · Web Audio Conference 2018
• 27mMixed Mode ReactKen Wheeler · React Amsterdam 2018