Play a midi file (.mid) on your browser (HTML).

vegaseat 0 5K Views

Lots of good instrumental music out on the web in the form of midi files. You can incorporate background music as part of your web page. Here is the short code.

<HTML>

<!-- Experiments with midi sound    vegaseat  -->
<!-- embed src, hidden, autostart, loop -->

<HEAD>

  <TITLE>Embedded MIDI</TITLE>

</HEAD>

<body bgcolor="#FFFF00" text="#FF66CC">

<center>
<h2>This starts the midi file automatically!</h2>
</center>

<!-- the given midi file comes with Win XP, you may need to change this -->
<!-- to something you have!!!!!!!!!! -->
<!-- hide play buttons, autostart and loop once -->
<EMBED SRC="C:\Windows\Media\Onestop.mid" hidden=true autostart=true loop=1>

</body>
</HTML>

Dani AI

Generated

The old approach that relied on plugins (QuickTime, RealPlayer) and <embed> stopped working because modern browsers removed NPAPI-style plugins and do not natively decode .mid files. The HTML <audio> element is widely supported, but MIDI is not among the typical browser-supported formats (MP3, Ogg, WAV). See MDN on the <audio> element for details.

Today you have two practical paths:

  • Easiest for the web: render the MIDI to an audio file (MP3/Ogg/WAV) using a synthesizer (e.g., TiMidity++ or FluidSynth) and serve it via <audio> with controls. This is the most compatible and requires no client plugins or special libraries.

    <audio controls preload="none">
  <source src="/media/song.mp3" type="audio/mpeg">
  <source src="/media/song.ogg" type="audio/ogg">
  Your browser does not support HTML audio.
</audio>

  • If you must keep MIDI as MIDI: use a JavaScript/Web Audio synthesizer with a soundfont (e.g., MIDI.js as mentioned, or modern Web Audio libraries such as Tone.js or WebAudioFont). These synthesize the notes in the browser without plugins. For external hardware synths, the Web MIDI API can send MIDI messages, but it has limited browser support and requires HTTPS and user permission; see MDN’s Web MIDI API and Web Audio API.

Note: most browsers block autoplay of audio; require a user gesture to start playback. See MDN’s Autoplay guide.

Member Avatar for EdgarSwank
EdgarSwank 0 Newbie Poster

Does not work for me.

Member Avatar for Matthew N.
Matthew N. 0 Junior Poster in Training

Does not work for me.

Do you have windows (any version) as this will not work unless you change the path if you are not using windows

\/
<EMBED SRC="C:\Windows\Media\Onestop.mid" hidden=true autostart=true loop=1>

Change to a absolute url to the file or to the folder it is in.

Edited by Matthew N. because: n/a
Member Avatar for EdgarSwank
EdgarSwank 0 Newbie Poster

I already changed that to the absolute URL I wanted.

When I use your suggestion, Firefox says to click to download plugin, but when I do it says not available. When I click manual install, it just re-installs Quicktime I already have installed, but Embed still doesn't work.

I also tried IE, but it wants to install a RealPlayer plugin, which it can't find either.

I've searched for a solution, but all discussion appears to be years old. Years ago, Embeds of MID files worked OK for me, but then they stopped working. If you have something that works today with either FireFox or Seamonkey, I would be eternally grateful.

Member Avatar for Arkinder
Arkinder 93 Posting Pro in Training

Your code is deprecated, and your method is outdated. NO ONE should use this.

Regards, Arkinder

Member Avatar for EdgarSwank
EdgarSwank 0 Newbie Poster

If this method of playing MIDI files is outdated, then what is the current method? Is it possible to play MIDI files via HTML at all?

Member Avatar for Johannes_2
Johannes_2 0 Newbie Poster

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>

Add a link to start playing:

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

Take a look at for details.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview