Custom HTML elements for playing and visualizing MIDI files in web browsers using Magenta.js.
html-midi-player is a JavaScript library that provides custom HTML elements for playing and visualizing MIDI files directly in web browsers. It solves the problem of embedding interactive music playback without requiring complex audio APIs or external plugins, using Google's Magenta.js for reliable MIDI processing and synthesis.
Web developers, music educators, and creators building interactive music websites, educational tools, or demos for music generation models who need embeddable MIDI playback.
Developers choose html-midi-player for its simplicity—using declarative HTML elements—and flexibility, with full JavaScript API control, multiple visualization options, and seamless integration with Magenta.js for advanced music manipulation.
🎹 Play and display MIDI files on the web
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Allows embedding players and visualizers as simple HTML tags like <midi-player>, making integration as straightforward as adding standard elements, shown in the getting started example with minimal code.
Supports piano roll, waterfall, and staff notation visualizers with customizable settings via the config attribute, leveraging Magenta.js for detailed control as documented in the API.
Integrates with Magenta's SoundFonts for realistic instrument samples, with built-in support for default and custom URLs, enhancing audio quality over basic oscillators.
Provides a full event API for playback events like start and stop, enabling custom synchronization and responses, as detailed in the event reference section.
Only one player can be active at a time; starting another stops any currently playing one, which restricts multi-track or concurrent playback scenarios, as admitted in the limitations.
Playback position refreshes only on note onsets, causing the UI to appear stuck during sustained notes or rests, a noted limitation that affects user experience.
Using custom sound samples requires conversion to Magenta's specific SoundFont format, involving additional tools and effort, as discussed in the FAQ with no built-in solution.