html-midi-player
Web components (<midi-player>, <midi-visualizer>) for playing and visualizing MIDI files on a page.
| Language | HTML/JavaScript |
|---|---|
| Category | MIDI tools |
| License | BSD-2-Clause |
| Platforms | Web |
| Install | CDN <script> tag, or npm install html-midi-player |
| First released | 2020 |
| Maintained | Yes |
| Links | Website · Source |
Strengths
- Drop-in custom HTML elements, no framework required
- Piano-roll, waterfall and staff visualizers with SoundFont support
- Fully stylable and scriptable via events
Limitations
- Depends on the large Magenta.js and Tone.js libraries
- Magenta.js itself is aging
Best for
Embedding a styled, interactive MIDI player and visualizer directly in HTML.
Minimal example
<midi-player src="song.mid" sound-font></midi-player>