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

回答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:

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

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

回答3:

Use the HTML5 Audio tag. But like The guy before me said.... please reconsider music on your page.

<audio src="example.midi" preload="auto" autoplay="autoplay"></audio>

回答4:

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.

回答5:

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:

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

And then add a link to start playing:

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

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

回答6:

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)

回答7:

Well, here it is Aug 13, 2017 and don't you know embedding a bg midi on a web page is still a mystery.

In fact I'm pretty certain it can't even be done anymore (except IE's bgsound src, which still works fine for me).

But as for Firefox and Chrome, the solution provided by jofeu is a great work-around.

I only wish there was a way to embed so the midi just starts playing on page load, without having to click anything. I guess those days are gone.

来源：https://stackoverflow.com/questions/7677366/about-embed-midi-files-on-a-webpage

标签

html

ios

midi