[Html5] 在網頁播放midi音樂檔

因為工作需求需要在網頁上播放midi，

查了一下使用html5 audio的播放器是無法播放的，

使用舊式的object tag chrome會跳出禁用的警告，

最後使用https://github.com/chenx/MidiPlayer 這個方法是最簡單處理的，

只需要下載一個js檔就可以簡單使用了!!

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.

範例

//初始化
 // * @param midi    MIDI file path.
                    // * @param target  Target html element that this MIDI player is attached to.
                    // * @param loop    Optinoal. Whether loop the play. Value is true/false, default is false.
                    // * @param maxLoop Optional. max number of loops to play when loop is true.
                    // *                Negative or 0 means infinite. Default is 1.
                    // * @param end_callback Optional. Callback function when MIDI ends.
                    midiPlayer = new MidiPlayer(url, MIDI_ELEM_ID, true, 1, function() {
                        console.log('midi done');
                    });

//播放
 midiPlayer.play();
//停止
 midiPlayer.stop();

參考連結

https://github.com/mudcube/MIDI.js => 功能最強大的midi庫
https://developer.mozilla.org/zh-TW/docs/Web_Audio_API
http://stackoverflow.com/questions/5789734/does-the-html5-audio-tag-encompass-mid-midi-unofficially
http://homeofcox-cs.blogspot.tw/2015/04/play-midi-in-browser-by-javascript-only.html
https://github.com/chenx/MidiPlayer