cifkao/html-midi-player

🎹 Play and display MIDI files on the web

html-midi-player

<midi-player> and <midi-visualizer> HTML elements powered by @magenta/music (Magenta.js), fully stylable and scriptable.

Works in Jupyter notebooks, Colab, and Weights & Biases thanks to the midi-player Python package by @drscotthawley.

• Simple demo
• Advanced demo
• Website [source] with MIDI file upload

Notable websites that use html-midi-player include abcnotation.com, Musical Nexus and demo websites for music generation models: piano infilling, stochastic positional encoding.

If you use html-midi-player on your website, please consider linking back to the repository.

Getting started

1. Add the necessary scripts to your page:

   <script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/@magenta/[email protected]/es6/core.js,npm/focus-visible@5,npm/[email protected]"></script>

2. Add a player and a visualizer:

   <midi-player
     src="https://magenta.github.io/magenta-js/music/demos/melody.mid"
     sound-font visualizer="#myVisualizer">
   </midi-player>
   <midi-visualizer type="piano-roll" id="myVisualizer"></midi-visualizer>

That's it!

Besides jsDelivr, the bundle is also available from cdnjs.

Installing from NPM

You can also add the package to your project from NPM, e.g. npm install --save html-midi-player or yarn add html-midi-player. Then you can either:

• import 'html-midi-player' in your JavaScript code (as an ES Module), or
• add the node_modules/html-midi-player/dist/midi-player.min.js bundle directly to your page, along with the dependencies (node_modules/tone/build/Tone.js, node_modules/@magenta/music/es6/core.js; note that these need to go before html-midi-player).

In both cases, you should also add the focus-visible polyfill to enable outlines on keyboard focus.

API basics

The basic features of html-midi-player are explained below. Wherever both HTML and JavaScript examples are given, they are equivalent. In the JavaScript examples, player and visualizer refer to the corresponding custom element objects, which can be obtained using standard DOM methods like document.getElementById('#myPlayer') or document.querySelectorAll('midi-player'), for example.

See also the API reference for both elements: midi-player, midi-visualizer.

src and noteSequence

Both midi-player and midi-visualizer support two different ways of specifying the input file:

• By setting the src attribute to a MIDI file URL, e.g.:

  <midi-player src="twinkle-twinkle.mid"></midi-player>

  player.src = "twinkle-twinkle.mid";

• By assigning a Magenta NoteSequence to the noteSequence property, e.g.:

  player.noteSequence = TWINKLE_TWINKLE;

  To obtain a NoteSequence, you can use Magenta functions like urlToNoteSequence() (see FAQ).

SoundFonts

By default, the player will use a simple oscillator synth. To use a SoundFont, add the sound-font attribute:

<midi-player sound-font></midi-player>  <!-- default SoundFont (same as below) -->
<midi-player sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus"></midi-player>

player.soundFont = null;  // no SoundFont
player.soundFont = '';    // default SoundFont (same as below)
player.soundFont = 'https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus';

See the Magenta.js docs for a list of available SoundFonts.

Looping

To make the player loop, use the loop attribute:

<midi-player loop></midi-player>

player.loop = true;

Visualizer settings

The visualizer type is specified via the type attribute. Three visualizer types are supported: piano-roll, waterfall and staff.

Each visualizer type has a set of settings that can be specified using the config attribute (only from JavaScript), e.g.:

visualizer.config = {
  noteHeight: 4,
  pixelsPerTimeStep: 60,
  minPitch: 30
};

The settings are documented in the Magenta.js docs.

Binding visualizers

A player supports binding one or more visualizers to it using the visualizer attribute (a selector) or the addVisualizer method:

<midi-player visualizer="#myVisualizer, #myOtherVisualizer"></midi-player>

player.addVisualizer(document.getElementById('myVisualizer'));
player.addVisualizer(document.getElementById('myOtherVisualizer'));

The visualizer only gets updated while the player is playing, which allows a single visualizer to be bound to multiple players.

Events

The player supports listening to different kinds of events using the player.addEventListener() method. See the API reference for the available event types.

FAQ

Here are some frequently asked questions about html-midi-player. Make sure to also check discussions and issues to see if your question is answered there.

Why is my MIDI file not loading?

Please make sure that you provide a valid HTTP(S) URL, either absolute (beginning with https:// or http://) or relative with respect to your HTML file (if hosted on the same server).

Local files most likely will not work, as most browsers block requests to local files. To test the MIDI player locally, you will need to start an HTTP server to host your MIDI file; see for example this tutorial for easy ways to do that.

To diagnose why the MIDI file is not loading, hover over the error icon to see the error; if the message is "Bad MIDI file. Expected 'MHdr'", it means either your file is not a valid MIDI file, or the server cannot find your file and is serving an error page instead. To see the file actually being served, open your browser's Developer Tools, go to the Network tab, reload the page, then find the name of your file in the list.

How can I use custom samples?

The player supports "SoundFonts" in a special format designed by Magenta. If you want to use a .sf2 file, it will not work out of the box, but it is possible to convert it with some effort. See this discussion thread and especially this answer, which proposes a conversion script.

How do I create and manipulate NoteSequences?

The Magenta.js core and core/sequences modules define functions for loading and manipulating NoteSequences. To load a MIDI file as a NoteSequence, use the urlToNoteSequence() function. Other useful functions are clone(), trim() and concatenate().

If you are using the provided bundle as suggested above, then the core module will be available simply as core, so you will be able to call e.g. core.urlToNoteSequence() or core.sequences.clone() from your code.

Can you implement feature X or fix issue Y?

This library is a relatively thin wrapper around Magenta.js, which provides all of the MIDI loading, synthesis and visualization functionality. This means it inherits most of its limitations. If you found an issue, try to check if Magenta.js is also affected, e.g. using this or this demo (click Load MIDI File to upload your own file). If the issue is still there, then this is most likely a Magenta.js issue and cannot be fixed here (although a workaround may be possible). Otherwise, feel free to open an issue (or even better, a pull request) here, but please check for existing issues and discussions first.

Limitations

• Only one player can play at a time. Starting a player will stop any other player which is currently playing. (#1) This can actually be a benefit in many cases.
• Playback position only gets updated on note onsets. This may cause the player to appear stuck.

html-midi-player's Issues

BREAKING CHANGE: The request '@magenta/music/es6/core' failed to resolve only because it was resolved as fully specified

I got the following error when trying to package the module using webpack into a React app. I'm relatively inexperienced with JS. Does this need us to just change the import to include .js ? Happy to make a PR if that's the case but wanted to surface it here before making the change.

ERROR in ./node_modules/html-midi-player/dist/esm/index.js 8:0-153
Module not found: Error: Can't resolve '@magenta/music/es6/core' in '/Users/mayank/Developer/midi_practice/node_modules/html-midi-player/dist/esm'
Did you mean 'core.js'?
BREAKING CHANGE: The request '@magenta/music/es6/core' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./frontend/components/Player.js 24:0-26
 @ ./frontend/components/Navbar.js 24:0-30 106:54-60
 @ ./frontend/components/MusicLog.js 27:0-30 83:102-108
 @ ./frontend/index.js 3:0-45 8:20-28

webpack 5.11.1 compiled with 1 error in 382 ms

Uncaught (in promise) TypeError: h.ToneAudioBuffers is not a constructor

Thanks for the amazing project! I'm trying to use it for playing MIDI Files but getting the following issue:

Would be great if you had any insight, else thanks for building cool shit anyway!

Happy holidays!

Could I use a base64 content of the .mid file in src?

Could I use a base64 content of the .mid file in src?

I'm trying to load a .mid in Streamlit with this component but I can't include the path to the file, could I embed it in base64 somehow to make it work?

Do you have any ideas?

Thanks a lot!

Some notes being visualized but not played

Some notes are being visualized but not played. For example the lowest note of the highest voice (purple) of passport.mid (mirrors here).

No sound when played on phones.

When the play button is pressed, the progress bar is moving and notes are highlighted, but no sound is played from the phone. (The same page works well on laptops.)

Device: iPhone XR
Browser: Safari and Chrome

Download button

It would be nice to have a download button to allow saving the currently loaded file, similarly to what the <audio> element has. This should be optional – possibly turned on with an attribute, maybe controls="download" (which might just reveal the button with CSS).

Players cannot play simultaneously

We might want to allow the user to start more than one player at a time, like with <audio>.

This depends on magenta/magenta-js#502 being resolved.

RM not recognized on Windows

running 'npm start' through most windows terminals doesn't work because 'rm' is replaced with 'del'
That said you can get around this by using git bash, but I think it's definitely something to make note of.

Loading Bar

Is it possible to add a loading bar that shows up when the audio and piano animation is being downloaded and generated?

any way to tap into other magenta settings ie, quantize?

I'm loving what you've done with this! Thanks so much for putting this out there.

I created a simple melody in MuseScore (All notes were entered using the mouse so weren't played in) and exported it as a midi file. In MuseScore it principally contains quarter and eighth notes with only one sixteenth note. When I load that midi file and use the visualizer "staff" type, I see this...

I zoomed the page to show that each quarter note is converted into a dotted eighth and a 64th note rest. Here's what I see in MuseScore for the first two bars...

I noticed that your Visualizer and Player element classes extend the HTMLElement and I see that the noteSequence is a Magenta note sequence. Magenta is a bit of a beast but I wondered if there might be away to tap into more of the Magenta sequence class settings?

I wondered if use a quantize setting might resolve that issue.

Thanks again for the library!

Notes out of range cause other notes on the same tick to skip playing.

I am not sure if this should be reported here, or at Magenta. But when you have a song playing that has notes out of range, any other notes on the same tick / vertical slice are also skipped even though they are valid and have valid sound files.

This was reported to me by a user that noticed the issue. We then tested by removing the out of pitch notes and now the other notes on the same tick / vertical slice play correctly.

The Inspector Console does make note that it detects notes out of range:
SoundFont Pitch 26 is outside the valid range for Lute (28-100)

But when it actually gets to the note it produces this error and causes all notes on the same tick to skip, even the valid ones:

Defaults.ts:122 Uncaught Error: buffer is either not set or not loaded
    at Xn (Defaults.ts:122)
    at Go.start (index.ts:116)
    at N.playNote (jsdelivr-separator.js:1)
    at T.playNote (jsdelivr-separator.js:1)
    at q.playNote (jsdelivr-separator.js:1)
    at ia.callback (jsdelivr-separator.js:1)
    at ia._tick (index.ts:116)
    at sa._tick (index.ts:116)
    at zo.invoke (index.ts:116)
    at index.ts:116

It produces an error print for each note out of range, Which I think is part of the issue on why it is skipping valid notes to instead of only ignoring the out of pitch notes.

I kind of wish we had an attribute that would just let us completely skip reading out of pitch notes so they don't show on the visualizer either. But the real need here is to not skip valid notes if they are on the same tick as an out of range note pitch.

Are the Magenta lib and Sound Banks loaded for each instance of the player?

Hey there! First of all I want to say this is an awesome project. Thank you so much for building it and making it available for everyone.

Regarding my question: I've placed about 20 <midi-player sound-font>'s in my page, and the Memory footprint (as show by Google Chrome's Task Manager) grew to over 2.5gb! Event over 4.8gb at times (seems pretty random). And the page usually hangs indefinitely, too. I need to kill the tab from the Task Manager.

If I use no sound-font, it's only ~67mb. Without loading this script at all, it's ~46mb.

The RAM footprint seems to be related to the amount of instances. Some numbers

• 7 instances: 974mb.
• 5 instances: 568mb.
• 3: 384mb.
• 1: 230mb.

I could dynamically add and remove instances of the elements to limit the memory footprint, but UI and UX would suffer. Is there a way to globally load this library's dependencies, once for all instances?

IPhone no sound with midi player WP site

I have used your plugin but the sound not coming on the player.
player play but without sound on Ipad and iPhone X.

We have a check on the device iPhone 8 Plus, iPhone SE 2, iOS version: 14.6 and 14.7 both.
Also, We have checked Ipad with IOS version 12 so it's working on it but still an issue on Iphone X.

Custom Soundfont libraries

Hi!
I was wondering if there was any more documentation or info on creating Soundfont folders that work with this library. I have a snes.sf2 file that I've been using locally using fluidsynth to run midi output from a model trained on SNES music. I'd love to be able to play them in the browser using this library, since it's so easy to use. I tried running the generator from https://github.com/gleitz/MIDI.js which does create a sort of similar structure, although it's too different from what Magenta uses. Any tips or help would be more than welcome! I realize this might not be the best place to ask for help though, so please feel free to direct me elsewhere!

Get current position / Event listener for note on / off events

As the title says, is this possible. I want to trigger css changes with note on events.

I'm fairly new to JS, so sorry if the answer is obvious.

Thanks

Piano Roll does not snap back to the beginning after playing has ended and the user clicks Play again.

Once the piano roll has reached the very end of the scroll bar after a user has listened to the entire midi it does not snap back to the beginning of the piano roll if the user clicks play again to listen to it again, they have to scroll the bar back to the beginning manually.

Is there autoplay?

README not clear enough for absolute newbies.

I am an absolute newbie, I just knew about this project from Google a couple of hours ago.

The README contains this:

API basics

See also the API reference for both elements:
midi-player,
midi-visualizer.

src and noteSequence

Both midi-player and midi-visualizer support two different ways of specifying the input file:

• By setting the src attribute to a MIDI file URL, e.g.:

  <midi-player src="twinkle-twinkle.mid"></midi-player>

  player.src = "twinkle-twinkle.mid";

• By assigning a Magenta NoteSequence to the noteSequence property, e.g.:

  player.noteSequence = TWINKLE_TWINKLE;

The text don't make it clear enough about how to get an instance of player from Magenta nor how to load TWINKLE_TWINKLE out from a MID file. The linked page of Magenta's documentation loads TWINKLE_TWINKLE out of some hardcoded notes encoded in JavaScript, being silent about the simple and obvious case of how to read them from some MID file, they only provide a link to the documentation of some module describing its methods, but not how to get an instance of that stuff.

Reading Magenta's documentation, to make an instance of player, you should call player = new mm.Player(); after adding Magenta's script into the page, but this still don't solve how to get TWINKLE_TWINKLE from a MID file. Digging down on source code of both Magenta and html-midi-player, it seems that mm.urlToNoteSequence(someUrl) makes some NodeSequence. But the best that I could get so far was a Uncaught ReferenceError: mm is not defined error.

Could you please detail how to get an instance of player and how to load a Magenta's NodeSequence out of a MID file without requiring people to dig it deep from the guts of Magenta's documentation or source code, since this is part of the very basic usage of the html-midi-player? Remember, I am an absolute newbie, but I am surely not the only one, and the README explaining how to start with the basic usage should be written in a way that is clear enough even for absolute newbies. I already spent several hours digging down the documentation and the source code of both projects for something that should be obvious for anyone who is not an absolute newbie like me.

Further, the page also features this:

• Website [source] with MIDI file upload

The source link goes to an old branch of the project that is very outdated. Also, the source is not the direct plain HTML output of the page, being generated below some layers of preprocessing which makes it harder to understand what is going on. Further, the JS in the produced output is minified, also making it hard to tell what is going on. Since this resource is intended to be an example, preprocessing and minifying just makes it harder to be understood.

path from directory

sir how I gave midi file path from my local directory

Midi player not working

I am using the midi player in a personal project, it was working fine until yesterday, but today the play button is disabled:

When I see the console it shows me the following error: Uncaught (in promise) TypeError: h.ToneAudioBuffers is not a constructor:

My project is at https://www.komposair.com/ I am not sure if it is an error on my end or if this is the place to report it... but since it was working fine I thought it is something else. Any help would be appreciated...

Custom soundfonts?

I'd like to use Microsoft GS Wavetable Synth soundfont for the audio, but I can't find out how the soundfont files are structured for me to do that.

Visualizer Settings Attributes?

Hi,

I am having trouble understanding how to actually use the Visualize Settings Attributes. eg:

  visualizer.config = {
  noteHeight: 4,
  pixelsPerTimeStep: 60,
  minPitch: 30
};

Can this be used as an attribute within the embed code? eg:

<midi-player
<sound-font="https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus"
  src="my.mid"
  sound-font visualizer="#myPianoRollVisualizer">
</midi-player>

<midi-visualizer type="piano-roll" config="configname: option" id="myPianoRollVisualizer" 
  src="my.mid">
</midi-visualizer>

Or if it is not used as an attribute option within the embed code, then how do I apply the config to it?

I am trying to make the note sizes bigger.

Pitch bend not working

This doesn't seem to support pitch bend messages. Is there some way to get these to work?

Getting an error in SvelteKit with imports and ESM...

Trying to use this in sveltekit and getting the following error:

SyntaxError: Named export 'PianoRollSVGVisualizer' not found. The requested module '@magenta/music/esm/core.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@magenta/music/esm/core.js';
const { urlToNoteSequence, PianoRollSVGVisualizer, WaterfallSVGVisualizer, StaffSVGVisualizer, Player, SoundFontPlayer } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:121:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:171:5)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async nodeImport (/Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:59463:21)
    at async eval (/src/routes/midi-player.svelte:7:31)
    at async instantiateModule (/Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:59393:9)
Named export 'PianoRollSVGVisualizer' not found. The requested module '@magenta/music/esm/core.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@magenta/music/esm/core.js';
const { urlToNoteSequence, PianoRollSVGVisualizer, WaterfallSVGVisualizer, StaffSVGVisualizer, Player, SoundFontPlayer } = pkg;

file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/html-midi-player/dist/esm/index.js:8
import { urlToNoteSequence, PianoRollSVGVisualizer, WaterfallSVGVisualizer, StaffSVGVisualizer, Player, SoundFontPlayer } from '@magenta/music/esm/core.js';
                            ^^^^^^^^^^^^^^^^^^^^^^

...I'm a bit unsure as to what to do to make it work, or what to change where...any thoughts would be appreciated...

SvelteKit uses Vite which uses ES Build under the hood and is essentially ESM only, if that helps...

Add horizontal scroll for piano-roll visualizer

Do you mind add a horizontal scroll for piano-roll visualizer? Thanks!

Staff Visualiser Loading Issue

when the file length is big and lots of instrument play then staff visualiser loading time so high that page crash . what is the solution to reduce the loading time??

Are there any plan to replace ScriptProcessorNode with AudioWorkletNode?

Support the Sustain pedal

Currently the MIDI Player ignores all signals for the sustain pedal (Midi control signal 64). It'd be great if the player could respect the sustain pedal as piano music without the sustain pedal sounds way poorer.

Can we follow HTMLMediaElement interface for `midi-player` HTMLElement?

Currently, it declare start() for playing the midi file.

In HTMLMediaElement, its interface for playing audio is play().

It would be great to follow same interface as HTMLMediaElement Instance Methods.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

Instance property

• autoplay
• buffered
• controls: boolean
• currentTime
• currentSrc
• defaultMuted: boolean
• duration
• ended
• error
• loop
• muted
• paused
• playbackRate
• preservesPitch
• readyState
• seekable
• seekId

Instance Property (special for midi-player)

• seeking
• playing

Instance Methods

• play() - rename start() to play()
• stop()
• pause()
• canPlayType()
• load()
• fastSeek()

Events

• canplay
• play - rename start to play
• playing
• pause
• timeupdate
• error
• ended
• abort
• durationchange
• loadstart
• loadeddata
• volumechange
• suspend
• seeking
• seeked

Special Events for midi-player

• note

Tempo control

Add a way to control the tempo. This should be optional – possibly turned on with an attribute, maybe controls="tempo" (which might just reveal the control with CSS).

It's not clear what kind of control to use, an easy one would be <input type="number">.

The functionality itself is present in Magenta.js, we just need to call BasePlayer.setTempo(qpm) at the beginning of playback. However, this feature has some bugs apparently related to the fact that the Magenta.js player doesn't account for tempo when it sets durations:

• Note durations stay the same regardless of tempo, i.e. when the tempo is slow, all notes will sound too short, and vice versa (see magenta/magenta-js#415)
• If the tempo is lower than the original tempo, playback will end too early, and vice versa

How to Customized midi-visualizer

@cifkao
Hey, what a great tool .. Really appreciate it ..
I wonder how can I develop my own ?

I am trying to develop an app for dyslexic people and Would like to add colors and a clean box plot

Could you please help me?

Add a looping option

It would be nice to specify in the midi-player tags that, once Play is pressed, the song should continue on repeat. (If the option is already there, pardon me. I am at the ignorant user level; if it isn't in the examples linked in README, I will never find it.)

Can't do custom soundfont

I tried the directions on the readme for the custom sound font, but it just gives me a syntax error
<midi-player src="insert_midi_here.mid" sound-font="insert_soundfont_hosted_on_the_same_site_here.sf2"></midi-player>
even this doesn't work
<midi-player src="insert_midi_here.mid" sound-font="https://sitegoeshere.domain/insert_soundfont_hosted_on_the_site_here.sf2"></midi-player>
Am I doing something wrong, or am I limited to the ones the script comes with?

This works fine at least
<midi-player src="insert_midi_here.mid" sound-font></midi-player>

Update NPM packages to fix Prototype Pollution vulnerability

# npm audit report

minimist  <=0.2.3
Severity: critical
Prototype Pollution in minimist - https://github.com/advisories/GHSA-vh95-rmgr-6w4m
Prototype Pollution in minimist - https://github.com/advisories/GHSA-xvch-5gv4-984h
fix available via `npm audit fix`
node_modules/minimist
  quote-stream  <=1.0.0
  Depends on vulnerable versions of minimist
  node_modules/quote-stream

static-eval  <=2.0.1
Severity: high
Sandbox Breakout / Arbitrary Code Execution in static-eval - https://github.com/advisories/GHSA-x9hc-rw35-f44h
Sandbox Breakout / Arbitrary Code Execution in static-eval - https://github.com/advisories/GHSA-5mjw-6jrh-hvfq
fix available via `npm audit fix --force`
Will install @magenta/[email protected], which is a breaking change
node_modules/static-eval
  static-module  <=1.5.0
  Depends on vulnerable versions of quote-stream
  Depends on vulnerable versions of static-eval
  node_modules/static-module
    cwise  >=1.0.0
    Depends on vulnerable versions of static-module
    node_modules/cwise
      ndarray-fft  >=1.0.0
      Depends on vulnerable versions of cwise
      node_modules/ndarray-fft
      ndarray-resample  *
      Depends on vulnerable versions of cwise
      Depends on vulnerable versions of ndarray-fft
      node_modules/ndarray-resample
        @magenta/music  >=1.1.14
        Depends on vulnerable versions of ndarray-resample
        node_modules/@magenta/music

8 vulnerabilities (6 moderate, 1 high, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Inclusion in Jupyter notebooks

So far I have not succeeded in including the player in Jupyter notebooks. I tried including the library using a RequireJS call like here, but I get an error about a "mismatched anonymous define()" like here. Maybe the bundle is in a format that RequireJS cannot work with?

Is there any way to make it make sound on phones even when the 'silence' switch is enabled?

At first I thought it wasn't working on phones, but then I saw #28 and #32 and realized that I just needed to move the 'silence' switch on my phone. But this is contrary to how most (or all?) music (and video) players I've used online work. A couple big examples are Youtube and Bandcamp, neither of which require you to un-silence your phone to make sound, and there are many more examples out there. I'd be willing to bet that the reasoning behind this is that since you have to actively press a play button, that means you want it to actually play. I think that reasoning fits well with this library too, especially since there is no autoplay.

So, is there a way to do this currently? (I couldn't find anything in the docs about it, but maybe I missed something.) And if not, can that be added?

Changing programmatically src does not load the midi file

Very nice player! However when I do:
midiPlayer.src = "https://magenta.github.io/magenta-js/music/demos/melody.mid";
it does not change the file of the player :(.
Should I run a function to load the file?

Make Preload an option

Sometimes, when there are lots of MIDI Files displayed on a page, preloading them all might be undesirable. Could it be possible to make an option preload=False in the <midi-player> ?

Pausing and seeking

A player can only be stopped, not paused. Resuming playback after stopping resets the current time to 0.

To match the <audio> element behavior, we would like to be able to pause and resume playback, and also seek while the player is paused. Then we can replace the stop icon with a pause icon.

This probably depends on magenta/magenta-js#502 being resolved.

Hi, is there any plan to wrap it as a react component and support typescript?

Really love the project, but could not figure out how to use it in React. How can I initialize a html midi player and load midi with Javascript?

Thanks