About Embed Midi Files On A Webpage

I am working on a project related to vintage web designs. I would like to embed and autoplay a midi file but: It doesen't work on IOS (I tried with my ipad) On Firefox, sometimes

Solution 1:

I've referenced this question before and fell upon the answer of using the library midijs. However, since that lib now has a bitcoin miner included, I've made a variant without the mining code:

https://kitchwww.github.io/midi/midi.js

It can be included and used in exactly the same way:

<scripttype='text/javascript'src='https://kitchwww.github.io/midi/midi.js'></script><ahref="#"onClick="function(){
MIDIjs.initAll();
MIDIjs.play('path/to/yoursong.midi');}">Play My Song</a>

EDIT: updated to include an init function to be called on a User Gesture, as all audio must now be initiated from one.

Solution 2:

Yes, the embed tag is reserved for plugins, which Mobile Safari doesn't support.

Take a look at HTML5 audio tag, which is supported by most browsers.

But please don't play music on a webpage... it's annoying - most either listens to music, have the speakers turned off, or are at the office.

Solution 3:

Your HTML is OK. The problem is that some lower class browsers have lost the ability to play midi files. They have to install an add on. Real Player used to be a good solution, but now they are pushing a cloud subscription. There are plenty of other midi players around, but the users have to install one.

Solution 4:

Browsers dropped support for playing MIDI files natively over time. You might want to try MIDI.js, a JavaScript based cross browser library.

Add the MIDI.js script to your webpage:

<scripttype='text/javascript'src='http://www.midijs.net/lib/midi.js'></script>

And then add a link to start playing:

<ahref="#"onClick="MIDIjs.play('path/to/yoursong.midi');">Play My Song</a>

Take a look at http://www.midijs.net for details.

Solution 5:

For mid, and kar files, I suggest using vanBasco midi player as your default player. See the source on http://midkar.com/blues/blues_01.html

To Embed; embed src="musicfile.mid" width=144 height=60 autostart=true repeat=false loop=false (replace the "musicfile.mid" with the name of your midi file)