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

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

はじめに

  • MIDI.js を使った MIDI(SMF) 再生の続きです。
  • 新たに MIDI.js の start/stop/pause/resume メソッドを使って再生の制御と、currentTime と endTime を使って時間表示を行い、音楽プレイヤーっぽくしています。
  • UI には Bootstrap を使っています。

環境

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

準備

HTML ファイル

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

    <link href="./css/bootstrap.min.css" rel="stylesheet" />

    <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 src="./js/jquery-2.1.3.min.js" type="text/javascript"></script>
    <script src="./js/bootstrap.min.js" type="text/javascript"></script>

    <script type="text/javascript">
$(function() {
  var midiFileName = "michael_jackson-beat_it.mid";

  function timeFormatting(n) {
    var minutes = n / 60 >> 0;
    var seconds = String(n - (minutes * 60) >> 0);

    if (String(minutes).length == 1)
      minutes = "0" + minutes;
    if (seconds.length == 1)
      seconds = "0" + seconds;

    return minutes + ":" + seconds;
  };

MIDI.loadPlugin({
    callback: function() {
      MIDI.Player.loadFile(midiFileName, function() {
        $(".btn-controls").removeAttr("disabled");

        $("#midi_file_name").text(midiFileName);
      });
    }
  });

  MIDI.Player.setAnimation(function(data) {
    var now = data.now >> 0;
    var end = data.end >> 0;

    $("#current_time").text(timeFormatting(now));
    $("#end_time").text(timeFormatting(end));
  });

  $("#midi_start").click(function() {
    MIDI.Player.start();

    $(".midi-controls").hide();
    $("#midi_pause").show();
  });

  $("#midi_resume").click(function() {
    MIDI.Player.resume();

    $(".midi-controls").hide();
    $("#midi_pause").show();
  });

  $("#midi_pause").click(function() {
    MIDI.Player.pause();

    $(".midi-controls").hide();
    $("#midi_resume").show();
 });

  $("#midi_stop").click(function() {
    MIDI.Player.stop();

    $(".midi-controls").hide();
    $("#midi_start").show();
  });
});
    </script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
<h3>MIDI.js test 2</h3>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title"><span id="midi_file_name"></span></h3>
            </div>

            <div class="panel-body">
              <span id="current_time">00:00</span> / <span id="end_time">00:00</span>

              <div class="btn-group btn-group-sm" role="group" aria-label="...">
                <button type="button" class="btn btn-default btn-controls" disabled="disabled">
                  <span id="midi_stop" class="glyphicon glyphicon-stop" aria-hidden="true"></span>
                </button>

                <button type="button" class="btn btn-default btn-controls" disabled="disabled">
                  <span id="midi_start" class="glyphicon glyphicon-play midi-controls" aria-hidden="true"></span>
                  <span id="midi_resume" class="glyphicon glyphicon-play midi-controls" aria-hidden="true"
                        style="display:none;"></span>
                  <span id="midi_pause" class="glyphicon glyphicon-pause midi-controls" aria-hidden="true"
                        style="display:none;"></span>
                </button>
              </div>
            </div>
          </div>
        </dvi>
      </div>
    </div>
  </body>
</html>

実行

Google Chrome で用意した HTML にアクセスします。

感想

  • MIDI.js にはまだいくつかメソッドあるみたいですが、いったんこの辺で止めて直の Web Audio API / Web MIDI API を見てみようかと思っています。