はじめに
- 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 を見てみようかと思っています。