How to play a midi file in html

how can I play a midi file in m开发者_StackOverflow社区y 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...

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.

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/tone@14.7.58,npm/@magenta/music@1.22.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.4.0"></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.

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.

Java can play MIDI files, and the necessary plugin is installed (in the factory) on most PCs

Incomplete examples here and here