How m-yazidxx/ambient-piano-studio works
Ambient Piano Studio is a browser-based piano pad for entering chord sections, validating them, and playing them with configurable sound and timing; users can also enable automatic playback and record the audio. The sampled code places the app in a single React component, so the graph keeps these capabilities together rather than inventing separate internal services. Audio setup and recording use browser APIs. The README is an uncustomized Vite template, and unsampled code limits certainty about playback details and the imported soundfont library.
Main entry points: App.jsx Piano studio · main.jsx React entry
Components 6
Studio interface
- React entry
src/main.jsx - Piano studio
src/App.jsx
Audio runtime
- Web Audio
Recording
- MediaRecorder
- Recorded audio
Other components
- Listener
Connections 5
- React entry → Piano studio: renders
- Listener → Piano studio: configures and plays
- Piano studio → Web Audio: creates and controls
- Piano studio → MediaRecorder: records stream
- MediaRecorder → Recorded audio: produces