Beats in the browser

on YouTube ↗19m

" summary

Reactronica is a React library built as a wrapper around Tone.js that treats music as a function of state and demos live coding with song/track/instrument/effect components plus Fast Refresh; a Next.js + Tailwind + Recoil + Framer Motion interface mimics Ableton with real‑time edits over GraphQL subscriptions and WebSockets (Apollo, Hasura) and a collaborator joins live; an MPC-style pad accepts a USB drum controller via Webmidi.js MIDI input and all samples come from Splice, and the demos run and play.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 0:18ABOUT
3. 0:48BEATS IN THE BROWSER
4. 1:27LIVE CODE DEMO
5. 7:14PERFORMANCE DEMO
6. 14:55DRUM PADS DEMO

" related talks

• 08mReactronica: Music as a Function of StateKaho Cheung · ReactConf AU 2020
• 22mMusic of ReactVladimir Barsukov · CSS-Minsk-JS 2018
• 35mReact beyond markupPeter Onneby · XebiCon'17
• 12mMusic of ReactWowa Barsukov · React Amsterdam 2018
• 26mReact & Web Audio Api: Building a MIDI InteracePeter Piekarczyk · React Rally 2015
• 32mSequencing Audio Using React and the Web Audio APIBruce Lane, Vincent Riemer · React Amsterdam 2017
• 27mMixed Mode ReactKen Wheeler · React Amsterdam 2018
• 29mEvolving the Visual Programming Environment with ReactJonas Gebhardt · ReactEurope 2016