WaveRoll Piano is a VS Code extension for viewing, editing, and playing MIDI files with an interactive piano roll visualization. Supports conversion between MIDI and MIDI-TSV formats.
Built on top of WaveRoll, an interactive JavaScript library for MIDI piano roll visualization.
Features
Piano Roll Visualization: View MIDI files as an interactive piano roll display powered by the wave-roll library
Audio Playback: Play MIDI files directly in VS Code using Tone.js synthesis with multiple piano sounds (Default / Salamander C5)
MIDI-TSV Conversion: View and edit MIDI as a text-based TSV representation — switch between Preview and Edit mode, modify TSV text, then save to write back to MIDI
Multi-File Comparison: Load multiple MIDI files for side-by-side visualization
Open any .mid, .midi, .mid.tsv, or .midi.tsv file in VS Code
The file automatically opens in the WaveRoll Piano viewer
Use the player controls to interact with the MIDI file
Click Add MIDI Files to layer additional MIDI files for comparison
Click Add Audio File to load a reference audio track
TSV Editing
The right panel displays a MIDI-TSV text representation of the MIDI file:
Preview mode: Click on TSV rows to seek in the playback timeline
Edit mode: Click the ✎ icon in the panel header to switch to a text editor. Modify the TSV text, then press Cmd+S / Ctrl+S to save. The TSV is converted back to MIDI and written to disk.
MIDI-TSV Commands
Right-click a MIDI file in the explorer to:
Export MIDI as TSV: Convert .mid/.midi to .mid.tsv
Export MIDI-TSV as MIDI: Convert .mid.tsv/.midi.tsv to .mid/.midi
Controls
Play/Pause: Start or pause MIDI playback
Stop: Stop playback and reset to beginning
Tempo: Click the BPM badge to adjust playback tempo
Export: Export MIDI with the current tempo setting
Piano Sound: Switch between Default and Salamander C5 piano samples
