23

Now playing midi in html is supported with javascript and windows media player/quicktime browser plugins. I'm wondering if there are any news about html5 is going to support playing midi with audio tag in the future ?

Mikko Ohtamaa
  • 82,057
  • 50
  • 264
  • 435
Finn
  • 233
  • 1
  • 2
  • 8

2 Answers2

24

If you want to play midi files, you can see how they did it here: http://mudcu.be/midi-js/. The example page makes use of MIDI.js. Note that it even uses soundfonts, all via scripting. Pretty neat.

If you're more interested in controlling midi devices, or having midi devices control your HTML5 page: the W3C guys are working on that. See the draft api description here

DLight
  • 1,535
  • 16
  • 20
Wouter van Nifterick
  • 23,603
  • 7
  • 78
  • 122
  • MIDI.js still has a remaining bug that needs to be fixed: https://stackoverflow.com/questions/74954880/settimeout-triggers-too-late-in-midi-js – root Jul 21 '23 at 19:33
2

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>

Screenshot

Complete demo: 

<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/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/tone@14.7.58,npm/@magenta/music@1.22.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.4.0"></script>

Full disclosure: I'm the author of html-midi-player.

ondra.cifka
  • 755
  • 1
  • 9
  • 17