ポケミク・シーケンサーを作る(8) 縦ピアノロールエディタの実装

公開:2014-06-09 08:33
更新:2020-02-15 04:37
カテゴリ:html5,jquery,webmidi,javascript,ポケミク,bootstrap,audio,boost,ハードウェア,ポケミク・シーケンサー

じわじわ機能を実装中

縦ピアノロールエディタをじわじわ実装中である。今のところマウスでのノート挿入・移動が可能である。Undo/Redoもできる。挿入したノートを再生ボタンで鳴るようにした。というかこれはBugで鳴らなかっただけなのだが。

縦ピアノロール画面ではマウスホイールで縦方向のスクロール、Shiftキーを押しながらだと横にスクロールする。左端は空いているがここはノートイベントを表示する予定である。さらに右側の空きエリアにはコントロールチェンジの値グラフを表示するエリアとなる予定である。

実装中のものは「http://sfpgmr.github.io/0002/」で試すことができる。ソースコードは「https://github.com/sfpgmr/sfpgmr.github.io/tree/master/0002」にある。

ライブラリをできる限り使って実装をはしょるポリシーで作っているものの、コードはかなり書かなくてはならない。私にしては相当な量のコードを書いているがまだ機能としては1%程度しか実装できていないだろう。

これから作ろうと頭にあるものをリストに書き出しておく。

縦ピアノロールエディタ
  1. ノートのゲートタイムを調整する機能
  2. ノート選択機能(複数選択可)
  3. すべて選択機能
  4. ノート移動機能の改良(複数ノート同時移動)
  5. ノート削除(複数ノート同時削除可)
  6. ノートカット・コピー・ペースト(複数ノート可)
  7. 選択ノートのトランスポーズ(オクターブアップ・オクターブダウンを含む)
  8. ベロシティ変更機能
  9. キーボードからのショートカット
  10. MIDIキーボードからの入力・ショートカット入力
  11. ショートカットキーカスタマイズ
ボカロトラックエディタ

ボカロトラックは専用のエディタを作ろうと思っている。やっぱりボーカロイドのエディタを縦にしたようなものになるのだろうね。

エフェクトグラフエディタ
コントロールチェンジやピッチベンドはグラフエディタのみでよいかなと思っている。
ノートエディタ
ノートをステップ入力するためのエディタである。
ファイル保存・読み込み機能
File APIを使って作成したファイルを保存できるようにする機能を実装する。
WAVファイルへのエキスポート
ポケミクのWave InputをWAVファイル化して保存する機能。Web RTCやWeb Audio APIを使えばなんとかできそうな気もするがどうだろうね。

そういうわけでやることはたくさんあって、げんなりするが気長に実装していくことにしよう。