htmliosmidi

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:

  1. It doesen't work on IOS (I tried with my ipad)
  2. On Firefox, sometimes the tune is not played, I don't know why.

Does the midi player depends on the browser or a plugin? Can I find a univeral alternative to play my tune?

I am using the <embed> tag this way:

<embed src="tune.mid" hidden="true" autostart="true" autoplay="true">

Solution

  • 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:

    <script type='text/javascript' src='https://kitchwww.github.io/midi/midi.js'></script>
    <a href="#" 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.