WaveRoll: JavaScript Library for Comparative MIDI Piano-Roll Visualization

TL;DR

The paper tackles the challenge of understanding AMT model behavior beyond metric scores by enabling side-by-side comparisons of multiple MIDI outputs for the same input. It introduces WaveRoll, a web-based layered piano-roll visualization implemented as a <wave-roll> component that supports synchronized playback and interactive analysis. The approach combines visual, auditory, and note-level comparison (mir_eval-based) to reveal pitch, timing, onset, and sustain differences across model outputs. The work enables qualitative error analysis and intuitive demonstrations for AMT research, with open-source availability via npm and a demo page.

Abstract

WaveRoll is an interactive JavaScript library that enables comparative visualization and synchronized playback of multiple MIDI piano rolls on a browser. It addresses a specific evaluation need in Automatic Music Transcription (AMT), contrasting multiple MIDI outputs produced from the same input. The library displays multiple MIDI tracks on a single, time-aligned grid with synchronized audio, allowing users to compare pitch and timing, identify missed or extra notes, and observe onset and offset differences, as well as section-level patterns. We expect that such comparisons would assist in model evaluation and error analysis, and help readers to understand the model behavior better. The open-source library is available at https://github.com/crescent-stdio/wave-roll

Figures (3)

• Figure 1: The WaveRoll interface, featuring a layered piano roll and a side panel for audio controls.
• Figure 2: Example of WaveRoll implementation in HTML.
• Figure :