Friday, April 3, 2015

Play midi in browser by Javascript only

Midi files usually have very small size, but rich sound effects. HTML5 Audio tag supports wav, mp3 and ogg formats so far.  Here are methods to play midi music in web browser using Javascript only, with no plugin such as QuickTime.

I wrote the one at [7].

Features

  • Can specify these in constructor parameter list: midi, target, loop, maxLoop, end_callback.
    - midi: MIDI file path.
    - target: Target html element that this MIDI player is attached to.
    - loop: Optinoal. Whether loop the play. Value is true/false, default is false.
    - maxLoop: Optional. max number of loops to play when loop is true. Negative or 0 means infinite. Default is 1.
    - end_callback: Optional. Callback function when MIDI ends.
      e.g., use this to reset target button value from "stop" back to "play".
  • Can specify a debug div, to display debug message: setDebugDiv(debug_div_id).
  • Start/stop MIDI by: start(), stop().
  • If a MIDI started play, call start() again will stop and then restart from beginning.
This depends on other 5 javascript files (audio.js, midifile.js, replayer.js, stream.js, synth.js) from [2][3], which is a demo of [1]. This is related to [4], which is a powerful tool to play MIDI in browser.

The disadvantage of [2][3] is that it does not have control over how a MIDI file is played: when clicking on the link the file will be started multiple times and sounds chaotic; and there is no loop feature. Both are well handled by MidiPlayer.js here.

Another midi player javascript is in [5], but it cannot play multiple MIDI files at the same time, cannot play a MIDI file automatically after loading the page, and has no loop feature. All are handled by MidiPlayer.js here.

It can be a good idea to add MIDI support to HTML5 Audio tag, because MIDI files have much smaller size than wav/mp3, and the sound effects are very rich.

[1] http://matt.west.co.tt/music/jasmid-midi-synthesis-with-javascript-and-html5-audio/
[2] http://jsspeccy.zxdemo.org/jasmid/
[3] https://github.com/gasman/jasmid
[4] MIDI.js - Sequencing in Javascript.
[5] MIDI.js - The 100% JavaScript MIDI Player using W3C Web Audio
[6] Dynamically generating MIDI in JavaScript
[7]  The MidiPlayer javascript class

2 comments:

Anonymous said...

I strongly agree that browsers should add MIDI support to the <audio> tag. Our site has over 10,000 MIDI files that no longer play in the browser since vendors de-supported plugins like Apple QuickTime.

The first browser to support MIDI playback via the <audio> tag is going to have a competitive advantage!

Tom said...

Why did vendors de-support plugins for MIDI? How's the current status of MIDI on Internet?

I'm curious. I remember the good old days when MIDI was popular.

Blog Archive

Followers