Music session
Build with VlakRoom for a loop.
Four on the floor
Launch a scene → edit a pattern → mix and export audio
View sourceInside the interface
A music workspace with four synthesized instruments, four scenes, and editable sixteen-step clips. Launch a scene, shape the selected pattern, and mix each channel while it plays. The browser schedules and synthesizes the audio; the session can be exported as a stereo wave file.
Press Play to hear the session. Four instruments are synthesized locally with Web Audio, without downloads or a music service. Clip edits, tempo, mute, solo, gain, pan, and tone affect the sound. Export renders four bars of the active clips as a stereo wave file; Save session downloads the editable project as JSON.
Use this as a starting point
Build with Vlak
Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.
npm install @noorddev/vlak-reactimport "@noorddev/vlak-react/css";Start with your coding agent
A ready-to-use brief with this study, Vlak’s components, and the design guide.
Component modifications
- Buttons compose transport and clip launching. Number field sets tempo, Input names the session, and Select chooses a clip's root note.
- Channel strip controls the actual gain, pan, mute, and solo mix. Parameter knob shapes the selected instrument's tone; Audio meter reads real channel signals from Web Audio analysers.
- A custom accessible sixteen-step grid gives the editor its musical structure. Audio is scheduled ahead on the audio clock; the visual playhead follows that clock independently.
- On mobile, Session, Clip, and Mixer are focused screens behind persistent navigation. The clip matrix and step grid keep their readable target sizes in bounded horizontal viewports. Transport stays above the scrolling workspace, and switching screens preserves playback and the selected clip.