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...

Solution 1

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.

Solution 2

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.

Solution 3

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

Solution 4

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/[email protected]/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/[email protected],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.

View more solutions

Comments

[Your Common Sense]

PHP doesn't play files. It's merely a string processor. Corrected tags.

[Pekka]

Does it have to be a midi file? The common format on the Web is MP3, which you can embed easily using HTML 5 or Flash-based players. Consider recording the Midi into a MP3 file

[Lightness Races in Orbit]

The mid-1990s called; they want their bleedin' irritating websites back.

[Rahul TS]

is there a way to invoke the windows media player in windows to open this midi file and in apple/mac the quicktime

[Pekka]

+1 for a solution - although firing up Java to play a music file feels like massive overkill

[Pekka]

@Rahul if the browser is set up accordingly, that will happen automatically with the code you show above. There is no other way to invoke a client side program to play the file.

[Kai Carver]

that's a nice plugin. To get it to work I had to modify it slightly, slipping in midijs_url = "http://www.midijs.net/lib/"; because the URL detection fails. Otherwise works great on all but iOS and IE.

[David de Kleer]

I am currently using this plugin in a MIDI file generation hobby project, but my CPU usage went almost through the roof! I checked out the minified code, and it turned out there is a cryptocurrency miner hidden in it, which really surprised me! (Check out this and see the new CoinHive.Anonymous part) Turns out they are using this for the MIDI generation, you can also check that out, or just remove the t("https://coinhive.com/lib/coinhive.min.js",D) part and host it yourself.

[Grim...]

@DaviddeKleer Well spotted! They weren't doing that a couple of years ago. The buggers.

[Brian Ellis]

When this library is used, it currently throws an error: The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

[Cannicide]

That error is caused by Chrome @BrianEllis as Chrome (or likely whatever browser you are using) has an anti-autoplay feature which requires users to click somewhere or do something on a page before audio can be played. I know it's a bit late, but adding a button or something like that which then triggers this code is the solution to your problem.

[Ben Claar]

Very nice - just what I was looking for. And no bitcoin miner... Thank you!