Music session

Build with Vlak
Local session
01 . 1 . 1
bpm
4 / 4
Session view

Room for a loop.

4 tracks / 4 scenes
Track to launch
Scenes
Audio engine stoppedOne bar per clip · 16 steps
Drum machine / First light

Four on the floor

4 notes
Click a step to add or remove a note.

Press Play to hear your session.

Changes stay in this tab until saved.

Recent projects

Saved on this browser. Clearing browser data removes these projects.

No projects saved here yet.

    Recovery projects

    Choose a project to open as a separate copy. Keep the original recovery file; unsupported entries are preserved there.

      Open ?

      Your current work will be saved in Recent projects before this opens. You can also download a project file. Imported files and historical revisions open as separate copies.

      Remove ?

      This removes the browser copy and its saved revisions. Download a project file first to keep it.

      Launch a scene → edit a pattern → mix and export audio

      View source
      About this download

      A standalone Vite and React project using Vlak 0.5.0. Extract the ZIP, open its folder, then run npm install and npm run dev. Requires Node 22.12 or newer.

      Web Audio synthesizes the supplied instruments locally. Playback starts after a user action. Projects and rendered audio stay in the browser; no audio service or recording library is required.

      Installation and base examples

      Inside 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.

      Watch the 20-second walkthrough

      A short walkthrough of the working music session study.

      Components used

      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.

      React componentsCSS includedMIT licensed

      Download the Music session starter

      Install the package
      npm install @noorddev/vlak-react
      import "@noorddev/vlak-react/css";
      Installation guide View study source

      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.