Include MIDIjs
Include MIDIjs into your web page by including the following script statement into your page's header
<script type='text/javascript' src='//www.midijs.net/lib/midi.js'></script>
After this script has been loaded the MIDIjs JavaScript object will be available in the context of your web page. All ineraction with MIDIjs will ocur through calls to member functions of the MIDIjs JavasScript object.
Find out about the audio mode
After the script has been loaded, you determine the audio method that will be used by MIDIjs. A call to MIDIjs.get_audio_status() will return a descriptive string.
MIDIjs.get_audio_status()
Possible answers are "WebAudioAPI" in case the W3C Web Audio API is supported, <bgsound> for Microsoft Internet Explorer or <object> for all other browsers that do not support the W3C Web Audio API.
<bgsound> uses the Internet Explorer's internal MIDI player.
<object> looks for a plugin that can play MIDI files. If no such plugin is installed, the user will be prompted by his browser. Note: Apple's Quick Time plugin used to be a fairly good MIDI player. However, latest versions of it dropped the MIDI playback via object tag for unkown reasons.
Get status and error messages
If you supply a callback you will get info and error messages about the player's status as soon as you start playing.
// Define a function to handle status messages
function display_message(mes) {
my_message_div.innerHTML = mes;
};
// Set the function as message callback
MIDIjs.message_callback = display_message;
Note: This callback will only fire if the W3C Web Audio API is supported.
Start playback
Calling play(url) will download the MIDI file from url, load the instruments used by this MIDI file and start playback.
MIDIjs.play(url)
Cancel playback
Calling stop() will cancel the current playback.
MIDIjs.stop()
Pause playback (Only works in browsers supporting WebAudio API. It doesn't have any effect in Microsoft's Internet Explorer.)
Calling pause() pauses playback. Playback may be resumed later on.
MIDIjs.pause()
Resume playback (Only works in browsers supporting WebAudio API. It doesn't have any effect in Microsoft's Internet Explorer.)
Calling resume() will continue with playing a formerly paused playback.
MIDIjs.resume()
Get duration of MIDI file (Does not work in Microsoft's Internet Explorer version 9 and below.)
Calling get_duration(url, callback) will report the total playing time of url via the callback. For unsupported browsers (Microsofts's Internet Explorer version 9 and below) the callback will return -1
MIDIjs.get_duration(url, callback)
Example for logging duration to browser's console:
MIDIjs.get_duration("http://www.midijs.net/hinematov.mid", function(seconds) { console.log("Duration: " + seconds);} )
Get player events
If you supply a callback you will receive permanently events during ongoing playbacks. Currently there is only the time in seconds available the current file has been playing.
// Define a function to handle player events
function display_time(ev) {
my_time_div.innerHTML = ev.time; // time in seconds, since start of playback
};
// Set the function as player callback
MIDIjs.player_callback = display_mesage;
The callback may be called every 100 ms. So be careful not to do any computationally heavy stuff in this callback. This will lead to quite some jitter.
F&Q