Music and MIDI

A musical sketch

Press Play and start sketching. Draw a note in the grid, drag it to move it, or pull its right edge to change its length. Choose a track tab and an instrument from the top bar. The piano roll is the same reusable Midi component that you can embed in an article, tutorial, or music lab.

For the component’s full property inspector and generated source, open the Midi playground.

Four built-in examples

These short, original studies ship with the components package. They are musical source material that you can change and export, rather than prerecorded audio.

Choose an example from the player, or supply its preset name:

---
import Midi from '@alkemdotdev/alkemist-components/midi';
---

<Midi preset="nocturne" title="Piano study" />
<Midi preset="pulse" editable={false} title="Listen and inspect" />

The component includes scoped styles and browser behavior. It works in Astro and MDX without Alkemist’s Layout or Astro integration. Sound starts only after a user interaction.

Edit the notes

The top toolbar keeps playback and editing together. Draw adds notes: click for the last used length, or drag right to draw a longer note. Drag an existing note to change its time and pitch, or pull its right edge to resize it. Select moves existing notes without adding new ones. Erase removes notes on click; right-click also deletes a note. Each gesture is one Undo step. Snap controls the rhythmic grid.

Track tabs choose the part you are editing. The Instrument selector and Mute button apply to that track. Other tracks appear as faint reference notes. Click the bar ruler to move the playhead. More contains examples, volume, loop, MIDI import/export, and Reset. You can also drop a .mid file onto the editor.

Select a note and open Note details for exact pitch, start, length, and velocity, or to duplicate/delete it.

Space plays or pauses when the editor is focused. D/S/E choose Draw, Select, or Erase. Arrow keys move a selected note in pitch or time. Delete removes it, and Control/Command-Z undoes an edit. The numeric fields provide an alternative to dragging. The grid scrolls inside its container on narrow screens.

Play and Pause retain your position; Stop returns to the beginning. Loop repeats through the end of the final measure, including its trailing rest. Tempo changes its speed without changing pitch. Volume controls the output, while note velocity controls each note’s attack strength. Each track has its own voice and mute setting.

Edits live in memory. Export a .mid file before navigating away if you want to keep your changes. Exporting MIDI preserves musical notes, not a recording of the synthesized sound.

Three local voices

Keep voice="track" to use the arrangement’s individual voices, or set voice="piano", "supersaw", or "bass" to compare the same notes through a single sound. MIDI program numbers are exported for other players, but those players supply their own instruments and will sound different.

Author a sequence

Notes use MIDI pitch numbers (60 is middle C), quarter-note beats, and velocity from 0 to 1. A sequence contains named tracks, each with a voice and notes. Use stable, unique IDs for tracks and notes.

---
import Midi, { type MidiSequence } from '@alkemdotdev/alkemist-components/midi';

const phrase: MidiSequence = {
  name: 'Three rising notes',
  bpm: 96,
  beatsPerBar: 4,
  tracks: [
    {
      id: 'keys',
      name: 'Piano',
      voice: 'piano',
      muted: false,
      notes: [
        { id: 'a', pitch: 60, start: 0, duration: 1, velocity: 0.65 },
        { id: 'b', pitch: 64, start: 1, duration: 1, velocity: 0.72 },
        { id: 'c', pitch: 67, start: 2, duration: 2, velocity: 0.6 },
      ],
    },
  ],
};
---

<Midi sequence={phrase} title="Three rising notes" />

getMidiPreset() returns an independent copy you can modify. The same entry exports MidiProps, MidiSequence, MidiTrack, MidiNote, MusicVoice, importMidi(), and exportMidi() for programmatic use.

Import and export

Import a local .mid file in the player, or set src to an existing file. Local imports are parsed in the browser and are not uploaded. Cross-origin URLs must allow your site through CORS.

---
import Midi from '@alkemdotdev/alkemist-components/midi';
---

<Midi src="/music/my-study.mid" editable={false} title="Published score" />

The editor works with note tracks at a single tempo. It reports unsupported tempo changes, controller automation, pitch bends, and percussion rather than claiming a lossless DAW project import. Review import warnings before exporting. This is a note editor and synthesizer; microphone recording, audio-to-MIDI conversion, hardware MIDI access, notation engraving, and audio-file export are not included.

Component parameters

The player dispatches a bubbling alk:midi:change event with { sequence } after musical edits. The playground uses that event to update its source pane. Hosts can subscribe to save their own document; the component does not choose a storage service.

Playback foundation

Tone.js supplies synthesis and audio scheduling primitives; @tonejs/midi reads and writes MIDI files. Alkemist owns the sequence model, voice presets, editor, lifecycle, examples, and authoring API. Engines load only when needed, and removed players stop and release their audio resources.