WaveRoll Studio - MIDI Player & Viewer

WaveRoll Studio is a VS Code extension (also available on Open VSX) for viewing and playing MIDI files with an interactive piano roll visualization. Supports multiple MIDI files for comparative analysis.

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
• Multi-File Comparison: Load multiple MIDI files (click Add MIDI Files) for side-by-side visualization
• Audio Reference Import: Add a single audio file (.wav, .mp3, .m4a, .ogg) as a reference track (click Add Audio File)
• File-Based Highlighting: Default highlight mode uses per-file colors to keep comparisons readable
• Tempo Control: Adjust playback tempo with an interactive tempo control
• MIDI Export: Export MIDI files with modified tempo settings
• Format Support: Supports .mid and .midi file extensions

Installation

1. Open VS Code or supported IDEs that support VS Code extensions (e.g. Cursor, etc.)
2. Go to Extensions
3. Search for "WaveRoll Studio"
4. Click Install

Or install directly from the VS Code Marketplace. or Open VSX

Usage

1. Open any .mid or .midi file in VS Code
2. The file will automatically open in the WaveRoll Studio viewer
3. Use the player controls to interact with the MIDI file
4. Click Add MIDI Files to layer additional MIDI files for comparison (drag-and-drop is disabled inside the webview)
5. Click Add Audio File to load a reference audio track (.wav, .mp3, .m4a, .ogg)

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

Related Projects

• WaveRoll Library: GitHub | NPM
• Web Demo: https://crescent-stdio.github.io/wave-roll/
• Standalone Demo: https://crescent-stdio.github.io/wave-roll/standalone.html

Tech Stack

• wave-roll: Interactive piano roll rendering engine for comparative MIDI visualization
• Tone.js: Web Audio synthesis framework
• @tonejs/midi: MIDI file parsing
• esbuild: Fast JavaScript bundler

License

MIT