WaveRoll: JavaScript Library for Comparative MIDI Piano-Roll Visualization


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

1 Motivation & Related Works↩︎

In Music Information Retrieval (MIR), Automatic Music Transcription (AMT) involves converting music audio into symbolic music data, such as MIDI. While quantitative metrics, such as precision, recall, and F1-score, are used to assess the performance of deep learning-based AMT models [1], they do not fully reveal the nature of errors, including which specific notes are incorrect or whether errors occur consistently in certain sections. Therefore, to thoroughly understand a model’s behavior, it is essential to visually and aurally examine the resulting MIDI data.

Current research on AMT primarily presents qualitative results through static or non-interactive media. For instance, some studies display input audio and resulting MIDI as a single video [2], while others provide the model’s output for a Ground Truth as a piano roll image with an individual MIDI player [3], or allow playback of a MIDI output for a Ground Truth audio [4]. However, these approaches have limitations. They make it difficult for users to compare outputs from multiple models for the same input simultaneously or to perform interactive analysis by seeking specific positions within the audio.

WaveRoll is an interactive JavaScript library that reconfigures the piano-roll style of music data visualization for multi-MIDI comparison on the web. It is proposed as a solution based on existing concepts: web-based MIDI piano-roll players (from html-midi-player [5]) and multi-track control (from trackswitch.js [6]). This feature allows users to toggle, play, stop, and seek multiple MIDI files simultaneously on a single screen, adopting a style commonly found in Digital Audio Workstations (DAWs).

Users can concurrently load MIDI results generated by different models for the same audio input, providing an immediate means to identify discrepancies in pitch, timing, onset, and sustain. WaveRoll is delivered as a <wave-roll> custom web component, facilitating easy analysis of model performance in local development environments using Node Package Manager(npm)1 or via the library’s demo page2. Furthermore, researchers can utilize WaveRoll to create web-based interactive demonstrations with minimal code, enabling readers to grasp their findings intuitively.

2 WaveRoll↩︎

a

Figure 1: The WaveRoll interface, featuring a layered piano roll and a side panel for audio controls..

None

Figure 2: Example of WaveRoll implementation in HTML..

WaveRoll introduces the Layered Piano Roll uniquely displays multiple MIDI files as distinct visual layers on a single, unified grid as illustrated in Figure 1.

2.1 Key Insight Features↩︎

WaveRoll is designed to help users gain comprehensive insights by integrating visual, auditory, and note-level analysis.

2.1.1 Interactive Visual Analysis↩︎

The library provides an interactive environment for visual analysis. Users can view multiple MIDI tracks on a layered canvas, controlling the visibility of each track’s piano roll and sustain data while using zoom and pan for detailed examination. To aid comparison, each track can be assigned a custom color. Furthermore, various highlighting modes can visually emphasize matching or differing notes between tracks, allowing for a more focused analysis of similarities and discrepancies in model outputs.

2.1.2 Detailed Auditory Comparison↩︎

The library integrates not only the visualization but also the playback of original audio waveforms alongside MIDI data. For in-depth auditory analysis, it offers Mute and Panning controls for individual tracks. Crucially, the A-B Looping feature enables users to repeat specific sections, allowing for a focused comparison of subtle rhythmic or harmonic variations that may be challenging to identify through visual inspection alone.

2.1.3 Visual Note Matching↩︎

WaveRoll facilitates qualitative judgment through note-level comparison. Based on the note evaluation method from mir_eval[7], the library offers a visual highlighting feature for matching notes between two tracks, configurable by a user-defined tolerance. This visualization is beneficial for analyzing model accuracy and identifying error patterns in Automatic Music Transcription.

2.2 Implementation↩︎

Using WaveRoll on a webpage is straightforward. It is available as an npm package, installed with the command npm install wave-roll. As illustrated in Figure 2, developers can integrate the component into their HTML and provide the MIDI files for comparison as a JSON array to the files attribute. It can also be embedded in Jupyter notebooks using IFrame.

3 Conclusion↩︎

WaveRoll is designed to enhance the qualitative evaluation of AMT research. It addresses current limitations by visualizing multiple MIDI files on a layered piano roll with synchronized playback. This functionality allows researchers to intuitively analyze model error patterns and helps readers more easily understand the results.

Future developments for WaveRoll include improved user experience and custom SoundFonts. While its primary focus is currently AMT evaluation, WaveRoll’s application can be extended to other research areas that require the comparison of multiple outputs, such as Symbolic Music Generation. As an open-source project, community contributions are highly encouraged.

4 Acknowledgement↩︎

This work was supported by the Ministry of Education of the Republic of Korea and the National Research Foundation of Korea (NRF-2024S1A5C3A03046168).

References↩︎

[1]
F. Jamshidi, G. Pike, A. Das, and R. Chapman, “Machine learning techniques in automatic music transcription: A systematic survey,” 2024. [Online]. Available: https://arxiv.org/abs/2406.15249.
[2]
Y. Yan and Z. Duan, “Scoring time intervals using non-hierarchical transformer for automatic piano transcription,” in Proc. International Society for Music Information Retrieval Conference (ISMIR), 2024.
[3]
K. W. Cheuk, D. Herremans, and L. Su, ReconVAT: A semi-supervised automatic music transcription framework for low-resource real-world data,” in Proceedings of the 29th ACM international conference on multimedia, 2021, pp. 3918–3926.
[4]
C. Hawthorne, E. Elsen, J. Song, A. Roberts, I. Simon, C. Raffel, J. H. Engel, S. Oore, and D. Eck, “Onsets and frames: Dual-objective piano transcription.” in Proceedings of 19th International Society for Music Information Retrieval Conference (ISMIR), 2018.
[5]
O. Cífka, html-midi-player: Play and display MIDI files on the web,” gitHub repository, accessed 2025-07-22. [Online]. Available: https://github.com/cifkao/html-midi-player.
[6]
N. Werner, S. Balke, F.-R. Stöter, M. Müller, and B. Edler, “trackswitch.js: A versatile web-based audio player for presenting scientifc results,” in 3rd web audio conference, London, UK.Citeseer, 2017.
[7]
C. Raffel, B. McFee, E. J. Humphrey, J. Salamon, O. Nieto, D. Liang, and D. P. W. Ellis, mir_eval: A transparent implementation of common MIR metrics,” in Proceedings of the 15th International Conference on Music Information Retrieval (ISMIR), 2014.

  1. https://www.npmjs.com/package/wave-roll↩︎

  2. https://crescent-stdio.github.io/wave-roll↩︎