vaclis.

midi-realplayer

Designed for music researchers building demo pages and listening tests. Present single-track or multi-track MIDI, or play audio and MIDI together in sync. Let listeners explore individual parts and listen to MIDI alongside recordings, right in the browser.

GitHub npm Documentation 

<script type="module" src="https://cdn.jsdelivr.net/npm/midi-realplayer@0.1.2"></script>
<midi-realplayer src="song.mid"></midi-realplayer>

One track

Press Play to hear the piano part. Switch to Roll to see the notes on a piano keyboard. The player adjusts its height to fit this single part.

<midi-realplayer src="piano.mid"></midi-realplayer>

Many tracks

Listen to all five parts together, or press S on a track to hear it on its own. M mutes a track, and the menu below its name changes the instrument sound. Switch between Tracks and Roll at the top right.

<midi-realplayer src="muscriptor.mid"></midi-realplayer>

MIDI + audio

Each instrument’s recording (stem) sits directly above its MIDI track. Press S on both “Bass stem” and “Bass” to compare them together, then mute either one to listen to the other. They stay synchronized as you play, pause or seek.

<midi-realplayer src="muscriptor.mid">
  <midi-realplayer-audio src="audio/vocals.mp3" label="Vocals stem" before-midi-track="1"></midi-realplayer-audio>
  <midi-realplayer-audio src="audio/piano.mp3" label="Piano stem" before-midi-track="2"></midi-realplayer-audio>
  <midi-realplayer-audio src="audio/guitar.mp3" label="Guitar stem" before-midi-track="3"></midi-realplayer-audio>
  <midi-realplayer-audio src="audio/bass.mp3" label="Bass stem" before-midi-track="4"></midi-realplayer-audio>
  <midi-realplayer-audio src="audio/drums.mp3" label="Drums stem" before-midi-track="5"></midi-realplayer-audio>
</midi-realplayer>

A few useful controls

Click anywhere in the notes or waveforms to jump to that point. Use + and − to zoom, and Fit to see the whole clip. The vertical slider changes row height; rows fit automatically until you adjust it yourself.

When the player has keyboard focus, Space plays or pauses. You can also zoom with Ctrl/⌘ + the mouse wheel. Export WAV saves the mix with your current mute, solo and volume settings.