はじめに
前回の記事（１）では、Web Audio / Web MIDIにまつわる3つの時刻についてお話しました。復習すると
- Date.now()
- 現在時刻
- DOMHighResTimeStamp
- ページを開いてからの時間
- AudioContext.currentTime
- 該当AudioContextを作ってからの時間
があり、後者2つが我々にとって大切な時間となる、というお話でした。さて、これだけで十分でしょうか？実は今回はさらに新しい時間の概念をご紹介します。……第4の時間です。
(； ･`д･´) ﾅ､ﾅﾝﾀﾞｯﾃｰ !! (`･д´･ (`･д´･ ;)
今回の記事でコードを書く際の問題を解説し、最終的にPolymerで作ったtp-midi-clockの紹介をするところまで持っていく……つもりだったのですが、当日になって体調を崩してしまったため、書きかけだった部分（第4の時間）までで一旦まとめて公開し、3部構成にしたいと思います。
MBT
Measure:Beat:Tick
MBTはそれぞれMeasure（小節）、Beat（拍）、Tickの略です。いわば「演奏開始からの時間」を表す新しい時間です。小節と拍についてわからない人は音楽の解説をしているサイトをあたってみて下さい。Tickはさらに拍を細かく切ったもので、1拍を分解能と呼ばれる数字（例えば480）で割った単位になります。それぞれ「:」で区切り、0または1から数えます。ここでは計算し易い0からの数とします。これによれば、演奏開始時の時刻は「0:0:0」、そこから8分音符経過した時刻は「0:0:240」、更に付点4分音符で「0:2:0」まで進みます。
他の時間との相互変換
MBTの興味深いところは、その情報のみでは他の時間との変換が出来ないところです。これは楽譜を渡しても演奏者によって演奏時間が変わるのと似ています。つまり演奏するテンポを厳密に規定しないと、他の時間との相互変換はできません。逆に言えば、これが演奏データをMBTで扱うメリットになります。演奏データを記録した後、記録データの形を変えずに任意にテンポを変更しながら再生することができるわけです。
必要な時間についてもう一度まとめてみる
さて、Web AudioとWeb MIDIにとって大切な時間の概念だけをまとめてみます。デートについては忘れて下さい。
- DOMHighResTimeStamp
- ページを開いてからの時間（ミリ秒）
- AudioContext.currentTime
- 該当AudioContextを作ってからの時間（秒）
- MBT
- 演奏開始からの時間（拍）
ここまで来ると、DOMHighResTimeStampとAudioContext.currentTimeの差異は大きな問題ではない事がわかります。つまり、以下の方法により簡単に相互変換が可能です。
var context = new AudioContext();
// ここでは簡単に紹介するためにcontextに直接必要な値と関数を登録します
// currentTimeが開始した時刻をDOMHighResTimeStampで覚えておきます
var context.creationTimeStamp = performance.now() - context.currentTime * 1000;
// currentTimeからDOMHighResTimeStampに変換します
var context.toPerformanceTime = function (time) { return this.creationTimeStamp + time * 1000; }
// DOMHighResTimeStampをcurrentTimeでの時刻に変換します
var context.toCurrentTime = function (timeStamp) { return (timeStamp - this.creationTimeStamp) / 1000; }
今回のまとめ
以上から、Web Audio / Web MIDIで扱う時間の概念は、大まかに考えて以下の2つに分類できます。
- 絶対時間
- ここではDOMHighResTimeStampを代表して使いましょう。ページ間で同期しようとすると難しい問題があるにはありますが、最初にDateと組み合わせてキャリブレーションを取るなどの方法があるにはあります。
- 演奏時間
- MBTを使いましょう。絶対時間との変換のためにテンポを別途管理する必要があります。
次回はこの2つの時間を実際にJavaScriptで扱う際の課題と対策、そしてWeb Audioを使ってクリックを再生しながら、MBT時間でMIDIの演奏データを取得するためのPolymerコンポーネント、tp-midi-clockについて紹介します。