How to play a midi file in html

Question

how can I play a midi file in my html/php page

Right now I surf the net and got lots of simple embed code like the one I given below

<EMBED SRC="C:\Windows\Media\Onestop.mid" hidden=true autostart=true loop=1>

But my firefox says to install plugin - Quicktime player

I dont think this is the way or how to bypass this above said issue, may be if you can suggest another method to do this if any,

thanks...

Answer 1

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.