How to play a midi file in html

Use Web Audio API for modern browsers. See complete example of player. It works on desktop and mobile.

With html-midi-player, it is possible to embed a MIDI file in a website simply by inserting a midi-player element (a custom HTML element which works a lot like the audio element, but for MIDI files):

<midi-player src="jazz.mid" sound-font></midi-player>

Complete demo:

<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid" sound-font>
</midi-player>

<!-- The following needs to be inserted somewhere on the page for the player(s) to work. -->
<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>

Full disclosure: I'm the author of html-midi-player.

The playback functionality is provided by Google's Magenta.js library. It's also possible to use Magenta.js directly to play MIDI files, but this requires a non-trivial amount of JavaScript coding, which is why I created html-midi-player.

I know it's been a while, but this is top of Google for "website midi player", so I thought I'd drop in a solution.

I made a website and wanted to play a midi file, and there's a Javascript plugin you can use: http://www.midijs.net/

Just include the library: <script src='http://www.midijs.net/lib/midi.js'></script>

And then the file you want to play: <script>MIDIjs.play('path/to.your/file.mid');</script>

Important edit It seems that the remote file is doing Crypto mining, which is less than ideal. You should either store the file locally and remove t("https://coinhive.com/lib/coinhive.min.js",D), or use the original code from GitHub: https://github.com/babelsberg/babelsberg-js/tree/master/midijs

Thanks to @David de Kleer for pointing that out.

As far as I know, there is no cross-browser way to do this: Flash, the most common option when embedding audio on a web page, doesn't play Midi files.

The only way is indeed the embed method, and whether that works will depend on how the user's browser is set up. A plug-in (like Quicktime) will have to be installed that can handle the file. If the "install plugin" dialog appears on a computer, it won't work there.

I think the only sane way is to convert those Midis to MP3 files.