ピアノロール型 MIDIシーケンサー

ピアノロール型MIDIシーケンサー

MIDI Sequencer Software — HTML Implementation

ピアノロールを中心とした直感的な操作でMIDI楽曲を作成・編集できる シーケンサーソフトウェア。3ペイン構成の画面設計と豊富な編集機能で、 プロフェッショナルなMIDI制作環境をブラウザ上で実現します。

ピアノロール SMFエクスポート HTML + CSS + JavaScript Web Audio API ブラウザ動作
01画面構成 — 3ペインレイアウト

直感的な
3ペイン設計

LEFT PANE
イベントリスト
全ノートを数値で一覧表示。位置・音程・ベロシティ・長さを直接確認・クリック選択できます。
001:01:000C480240
001:01:240E490240
001:01:480G475240
001:02:000C595480
001:02:480B470240
001:03:000A485240
TOP RIGHT
ピアノロール
メイン編集エリア。時間軸×音程のグリッドにノートを配置します。
BOTTOM RIGHT
イベントグラフ
ベロシティ・ピッチベンド・CCをグラフで視覚化。ドラッグで直接編集。

左ペインのイベントリストと右下のイベントグラフはツールバーのボタンで個別にON/OFF可能です。 非表示にするとピアノロールの表示領域を最大化でき、作業スタイルに合わせたレイアウトに変更できます。

02編集ツール

3種類の
編集ツール

✏
鉛筆ツール
左クリックでノートを追加。右クリックで削除。 ノートの右端をドラッグするとデュレーション（長さ）を変更できます。 追加時にプレビュー音が鳴り、音程を確認しながら入力できます。
⬚
選択ツール
クリックで単体選択。ドラッグで範囲選択。Shiftキーで複数選択。 選択したノートはドラッグで移動、矢印キーで微調整（クオンタイズ単位）。 Ctrl+Aで全選択。
✕
消しゴムツール
クリックしたノートを即削除します。 鉛筆ツール使用中でも右クリックで同様の削除操作が可能です。 Deleteキーで選択中のノートを一括削除できます。
03Domino特有の機能

プロ向け
高度な編集機能

〜
ストローク機能
選択した複数ノートのタイミングを指定した間隔（tick数）で少しずつずらす機能。 ギターのコードカッティングやハープのグリッサンドを再現するために使用します。 「上から下（高音→低音）」と「下から上（低音→高音）」の方向も選択可能です。
ƒ
ベロシティ数式変換
選択ノートのベロシティを独自の数式で一括変換。 変数 v（現在値）、i（インデックス）、n（総数）を使ってクレッシェンド・デクレッシェンド・山型・ランダマイズなどの表情付けが自在にできます。
♪
コード/スケール表示
メジャー・マイナー・ペンタトニック・ドリアン・ミクソリディアンなど9種類のスケールやコードを選択すると、構成音に該当する鍵盤行がピアノロール上で色変えされます。 音楽理論に沿った入力補助として活用できます。
↓
イベントグラフ編集
ベロシティ・ピッチベンド・CC#1（モジュレーション）・CC#11（エクスプレッション）をグラフとして表示。 グラフ上でドラッグするとベロシティ値を直感的に変更でき、細かいダイナミクスの調整に対応します。
↑
SMFエクスポート
作成した楽曲をStandard MIDI File（.mid）形式で書き出し可能。 テンポ・拍子情報も含めて出力されるため、DAWやハードウェア音源でそのまま再生・編集できます。
⏵
リアルタイムプレビュー再生
Web Audio APIを使ったブラウザ内音源でリアルタイム再生。 BPMと拍子に同期したプレイヘッドがスクロールし、再生位置を常に把握できます。 ノート入力時のプレビュー音も鳴り、音程確認が容易です。
04基本操作フロー

楽曲制作の
ステップ

1
プロジェクト設定
ツールバーでBPM（テンポ）と拍子を設定します。クオンタイズ（音符の最小単位）を選択すれば、ノート入力が自動的にグリッドに吸着されます。デフォルトベロシティもスライダーで事前に設定できます。
2
ノート入力
鉛筆ツールでピアノロール上の任意の位置をクリックしてノートを追加します。横軸が時間、縦軸が音程です。左のピアノ鍵盤で音域を確認しながら入力できます。Ctrl+スクロールで表示を拡大縮小して細かい入力も快適に行えます。
3
選択と編集
選択ツールに切り替えてノートを選択し、ドラッグで移動、矢印キーで微調整します。ストローク機能やベロシティ数式変換などの特殊編集もこの段階で行います。イベントグラフでダイナミクスの細かい調整も可能です。
4
再生確認
スペースキーまたは再生ボタンで楽曲を確認します。プレイヘッドが移動し、再生位置が小節:拍:tick形式でリアルタイム表示されます。テンポを変えながら確認するなど、細かいニュアンス調整を繰り返します。
5
SMFエクスポート
完成したらツールバーの「↑ SMF」ボタンでStandard MIDI File（.mid）として書き出します。出力ファイルはDAWソフト（Cubase、Logic Pro、GarageBandなど）やハードウェア音源でそのまま使用できます。
05キーボードショートカット

効率的な
キーボード操作

Space再生 / 一時停止
P鉛筆ツールに切り替え
S選択ツールに切り替え
E消しゴムツールに切り替え
Delete選択ノートを削除
Ctrl + A全ノートを選択
↑ ↓選択ノートを半音単位で移動
← →クオンタイズ単位で左右移動
Ctrl + Wheelピアノロールを水平方向にズーム
Shift + Wheelピアノロールを左右スクロール
右クリックノートを削除（鉛筆ツール中）
Shift + Clickノートを追加選択
06技術仕様

実装仕様

項目仕様
動作環境モダンブラウザ（Chrome / Edge / Firefox / Safari）。インストール不要、単一HTMLファイルで動作
実装技術HTML5 / CSS3 / Vanilla JavaScript。外部ライブラリ依存なし
音源Web Audio API によるリアルタイム音声合成（三角波オシレータ）
MIDI解像度PPQ = 960（1拍あたり960 tick）
テンポ範囲20 〜 300 BPM
対応拍子4/4、3/4、6/8
クオンタイズ1/4、1/8、1/8三連、1/16、1/16三連、1/32
音域MIDI ノート 0〜127（C-2 〜 G8）
ベロシティ1〜127（デフォルト: 100）
エクスポート形式SMF（Standard MIDI File）Type 1、.mid 形式
スケール表示メジャー / マイナー / ペンタトニック / ドリアン / ミクソリディアン / メジャーコード / マイナーコード / ドミナント7th / メジャー7th
グラフ表示ベロシティ / ピッチベンド / CC#1（モジュレーション）/ CC#11（エクスプレッション）