Add Beat Studio: a browser-based music workstation - #1
Merged
Conversation
Builds the Beat Studio design prototype into a real application in beat-studio/. The prototype ran on a template language interpreted at runtime by a proprietary runtime; this is a rewrite in TypeScript with Vite, and has no runtime dependency on the design tool. What it does: - Drum kit with 13 synthesised pads, an 88 key piano and a steel guitar - Step sequencer with 8 lanes, 16 or 32 steps and 4 pattern banks - Transport with tempo, metronome, count-in and take length - Recording to takes, with waveform overview and layering - Export to WAV, MP3 and MIDI How it is put together: - audio/ holds the graph, synthesis, step clock and recorder, and never touches the page - ui/ holds one file per part of the interface and never talks to the audio engine directly - session.ts is the only place where state, sound and timing meet - Notes are scheduled ahead of the audio clock so timing does not drift Three fixes to problems in the prototype: - Count-in was a switch that nothing read. It now plays a bar of clicks before a recording starts. - A black piano key sat inside its white neighbour and both handlers fired, so one click sounded two notes. - The recording readout covered the header text on the piano and guitar screens, and the piano keybed pushed the shell wider and shrank the inspector panel. The sampled instruments are optional and load from a third party server. Add ?samples=off to stay on the built-in voices and contact nothing. The original design files are kept in beat-studio/design/ for reference. The Flutter app at the top level of the repository is untouched. Co-Authored-By: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PZUNgxTt93bKkqEiQ5P5ae
Runs the type check and the build on every push and pull request that changes beat-studio/. The Flutter app at the top level has no CI and the workflow ignores it. The matrix covers Node 20 and Node 22. Both were verified by installing each version and running the exact steps the workflow runs. On Node 20, npm correctly skips @napi-rs/lzma-linux-x64-gnu, an optional dependency of rollup that requires Node 22.20 or newer, and the build still passes. Also records the supported Node versions in package.json, and corrects the README, which said version 20 or newer when Vite needs 20.19. Co-Authored-By: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PZUNgxTt93bKkqEiQ5P5ae
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds Beat Studio, a complete web-based music production application built with TypeScript and the Web Audio API. It's a fully-featured instrument with synthesized sounds, a step sequencer, and recording/export capabilities.
Overview
Beat Studio is a self-contained music workstation that runs entirely in the browser with no external audio files or server dependencies. It features three playable instruments (drums, piano, and guitar), a 16/32-step sequencer, recording with waveform visualization, and export to WAV, MP3, or MIDI formats.
Key Features
Implementation Details
File Structure
src/audio/: Engine, voices, transport, and recordersrc/ui/: View components (drums, keys, guitar, sequencer, mixer, inspector)src/export/: WAV, MP3, and MIDI encoderssrc/styles/: Design tokens, layout, controls, and instrument-specific stylesdesign/: Original design files and Toolcraft sync notesThe app can be built with
npm run buildto generate static files suitable for any web host.Corrections to the description above
Four figures in the original description did not match the code, and have been corrected:
src/ui/drums.ts, thePADStablesrc/constants.ts,LANES(4 is the bank count)src/constants.ts,BPM_MINandBPM_MAXsrc/types.ts,SliderNameandKnobNameThere is no per-instrument gain control. All instruments share one bus, and the user-facing controls are master volume, three EQ bands, a reverb send and a tilt knob.
Verification
The built app was driven end to end in Chromium. All checks pass with no console errors:
RIFF/WAVEheaderMThdheaderCI runs the type check and the build on Node 20 and Node 22. Both were verified locally by installing each version and running the workflow's exact steps.
Fixes to problems in the original design prototype
https://claude.ai/code/session_01PZUNgxTt93bKkqEiQ5P5ae