なんちゃってMIDIツールの開発を勧めていると、段々と完成系の仕様が明確に見えてきました。
自分の場合は、いつもこんな感じなんですよね。
最初に設計を完璧に作るなんてムリ。
ちょっと作って触ってみて、「使いやすい」とか「使いにくい」とか、どうやったらいいかをCSSなどをいじくりながら模索していく開発がどうやら自分の肌に合っているようです。
お仕事で、ちゃんと設計をやってから開発となると、裏ではこうやって既に作り上げている状態の場合もたま〜にあります。
そして、今回は、再生モードを追加してみました。
画面表示サンプル
静止画だと分かりにくいですが、右上の再生ボタンをクリックすると、カーソルの赤い縦棒が、時間に沿って移動します。
簡単解説
プログラムコードは、下記に改定あるgithubを見てもらいたいのですが、タイムラインエディター系の処理を作る時に、いつも悩ましいのが、
座標と時間軸との兼ね合いです。
今回は、ジングルなどを作りたいMIDIシステムなので、ミリ秒単位での再生を行う必要があり、厳密な時系列での再生モードが求められます。
でも、今回のような表示部分は、動機が取れていれば厳密にミリ秒での描画をしなくてもいいです。
そもそも、処理落ちをしてしまうと表示が追いつけなくなってしまいますからね。
Javascriptで、こうした処理を使う場合は、SetTimeout()または、SetInterval()を使いますが、今回はrequestAnimationFrame()で処理をしています。
SetTimeout()、SetInterval()は、時間を指定して処理を実行させますが、この場合時間指定を処理時間が超えてしまうと、CPUがオーバーフローになってしまいます。
（Javascriptでは、極端にスピードが遅くなってしまいます）
requestAnimationFrame()は、時間指定はできないけど、使っている端末の処理速度に合わせたタイミングで次の処理を実行してくれます。
ということは、前回からの処理時間を、カーソルの移動距離にしてしまえば、それっぽく動いているように見えるというわけです。
Github
https://github.com/yugeta/mynt_midi
デモ画面
https://yugeta.github.io/mynt_midi/src/
Playボタンを押してみてください。
あとがき
今回Playをしても音がまだ再生されません。
※デモ画面では、最新の環境になっているので、音がなっている状態になっていると思いますが、今回の開発段階では、再生カーソルが時間に沿って移動するというだけの処理でした。
というわけで、次回は、置かれた音符に沿って、音を鳴らしてみたいと思うんですが、今回の開発でのお悩みポイントが一つ合って、
音符の時間軸に並べたものをそのまま音を出して再生するのと、最終的に書き出すMIDI文字列データに変換して、単にそれを再生するという処理にするかを悩み中です。
前者は、エディタとしては、真っ当な仕様なんですが、今回の目的はMIDI文字列を吐き出すのとその再生プレイヤーを作ることなので、そのMIDI文字列をエディタ用にコンバートする必要があり、
その文字列との同期性などをどうしようかな〜というのと平行悩み中です。
次回までに、お悩み解消しておきたいと思います。
お楽しみに！
