MIDI.js を使った MIDI(SMF) 再生

5621 ワード
JavaScript MIDI.js MIDI WebMIDIAPI WebAudioAPI JavaScript テキストリンク

はじめに

  • Web Audio API / Web MIDI API あたりを勉強し始めたのですが、思ったより難しくていきなり滅入ってます。
  • もう少し楽に扱えそうな MIDI.js というライブラリがあるようなので、まずはとりあえずこちらを使いたいと思います。

今回の目標

  • 手持ちの MIDI(SMF) ファイルを鳴らしたい。

環境

  • OX X Yosemite 10.10.2
  • Google Chrome 40.0.2214.111 (64-bit)

準備

MIDI.js

Making life easy to create a MIDI-app on the web. Includes a library to program synesthesia into your app for memory recognition or for creating trippy effects. Convert soundfonts for Guitar, Bass, Drums, ect. into code that can be read by the browser. Supports multiple simultaneous instruments and perfect timing.

js/, inc/, soundfont/ ディレクトリを html を置くディレクトリにコピーしました。

HTML ファイル

index.html として作成しました。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>MIDI.js test</title>

    <script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
    <script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
    <script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
    <script src="./js/MIDI/Player.js" type="text/javascript"></script>
    <script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>

    <script src="./inc/jasmid/stream.js" type="text/javascript"></script>
    <script src="./inc/jasmid/midifile.js" type="text/javascript"></script>
    <script src="./inc/jasmid/replayer.js" type="text/javascript"></script>

    <script src="./inc/Base64binary.js" type="text/javascript"></script>

    <script type="text/javascript">
window.onload = function() {
  MIDI.loadPlugin({
    callback: function() {
      MIDI.Player.loadFile("./hoge.mid", MIDI.Player.start);
    }
  });
}
    </script>
  </head>

  <body>
MIDI.js test
  </body>
</html>

実行(再生)

Google Chrome で用意した HTML にアクセスします。
タブに音量マークがついていますが、一応鳴りました。コントロールはまったくできません。

感想

  • 次はもう少しコントロールしたいですね。