WebSequencerはHTML5/Javascriptで書かれたMIDIシーケンサーです。Chromeでの使用を推奨します。

次のような事ができます

WebMidiLink対応シンセのロード
MIDIシーケンスの打ち込み/編集/再生
MIDIファイルへの書き出し/読み込み
MIDIキーボードからのリアルタイム入力は可能ですが、まだ実験的な実装です

ファイルの操作

ファイルの保存

WebSequencerで作った曲をファイルとして書き出すには[File:]の[SaveFile]ボタンを押すとボタンの右側に[SAVED-FILE]というリンクが現れますので、そこからブラウザの操作でリンク先を保存してください。
ファイルの形式はMIDIファイルにWebシンセの付加情報が追加された形式になっていますので、他のMIDIプレーヤーなどでも演奏が可能です。
また隣の[SAVED-URL]というリンクからはURL形式のデータが取り出せます。リンク先のアドレスをコピーしてブラウザでアクセスすると曲がロードされた状態でWebSequencerが開きます。ただし、URLは非常に長くなるため、ブラウザや経由するシステムによっては正常に扱えない場合があります。
WebSequencerでは演奏を音データそのものとして扱う事はできません。演奏結果を.wavなどにしたい場合はオーディオI/Fのループバック機能などを使って別の録音アプリで録音する方法があります。

ファイルを開く

WebSequencerで扱うファイルはMIDIファイルです。 [File:]メニューグループの[LoadFile]からのファイル選択またはファイルを直接WebSequencerにドロップする事で開く事ができます。
WebSequencerで作られたファイルならばWebシンセの設定なども再現されます(注:WebMidiLink Lv0対応シンセの場合はシンセがロードされますが音色は再現されません。WebMidiLink Lv1対応シンセの場合は音色まで再現されます)。

シンセの選択

WebSequencerはWebMidiLink対応シンセを[Synth-1]～[Synth-4]の4台までロードできます。デフォルトでは[Synth-1]に[GMPlayer]がロードされた状態になっています。ロードする手順は次のとおりです。

ピアノロールの下にある[Synth-1]～[Synth-4]のボタンを選択します。
その下のドロップダウンメニューからシンセを選びます。またはURLがわかっている場合はURLを入力します。
[Load]ボタンを押します。

トラック

WebSequencerは[Trk-01]～[Trk-16]の最大16トラックまで扱えます (デフォルトのデモソングが入った起動状態では7トラックを使用しています)。

各トラックの表示には次のものがあります。

対応するシンセの設定 : 前項の[シンセの選択]でロードした[Synth-1]～[Synth-4]のどれかを選択します。
MIDIチャンネル : そのトラックが使用するMIDIチャンネルです。
デフォルトのプログラム番号 : シーケンスの先頭にここで指定されたプログラムチェンジが自動的に挿入されます。シーケンスの途中にプログラムチェンジを入れた場合はそれに従います。
ミュートおよびソロボタン : そのトラックの再生をミュートまたはソロモードにします。
レベルメータ : ノートデータのベロシティに反応するメーターです。
シーケンスの概略 : 曲の先頭から最後までの全体の中でノートデータの分布を表示します。

また、トラックのシーケンスの概略の上部には曲全体中のピアノロール表示の範囲と現在の再生位置が表示されます。

トラックの操作：

トラックの各行をクリックするとそのトラックが選択され、ピアノロールにそのトラックのデータが表示されます。
トラックを追加するには[Track:]の[AddTrk]ボタンを押します。
トラックを削除するにはトラックを選択した後、[DelTrk]ボタンを押します。
トラックの行をドラッグして順序を入れ替える事ができます。
トラック上部の曲の全体表示をドラッグすると曲全体の中でのピアノロールの表示位置を変更します。

ピアノロール

ピアノロールには現在選択されているトラックのMIDIシーケンスが表示されます。
上部にある2つの赤い三角は繰り返しのマーカーで再生時にこの2つのマーカーで挟まれた部分をループ再生します。
また同じ行にある緑の縦線が再生カーソルで現在の再生位置を表し、再生はこの再生位置から開始されます。
下部のレーンにはベロシティ/ピッチベンド/コントロールチェンジなどの情報が表示されます。

編集モードの切り替え

[Select][Scroll][Edit]の3つのモードがあります。メニューの[Mode:]の所のボタンかキーボードショートカットA / S / E で切り替えられます。各モードの主な役割は次のようになっています。

[Select] : ノート/MIDIイベントを選択します。
[Scroll] : ピアノロールをスクロールします。
[Edit] : ノートを編集します。

スクロールおよびズーム

[Scroll]モードでは、ピアノロールの再生位置表示の行以外の任意の場所をドラッグする事で上下左右にスクロールする事ができます。
[Select]および[Edit]モードでは、最上端の数字が表示されている行か左端の鍵盤部をドラッグする事で上下左右にスクロールできます。
Shiftを押しながらマウスホイールを回すと左右にスクロールします。
Altを押しながらマウスホイールを回すと上下にスクロールします。
メニュー[Zoom(Z/X):]グループにある[4/1]～[1/16]のボタン、またはショートカットキー(Z)および(X)で横方向のズームが切り替えられます。
Ctrl押しながら、または(Shift+Alt)を押しながらマウスホイールを回すと横方向のズームが切り替えられます (ChromeではCtrlを押しながらのマウスホイールはブラウザ自体のズームになります)。

MIDIイベント/ノートの選択

単音の選択：[Select]または[Edit]モードではピアノロール上のノートをクリックして１つのノートを選択できます。
範囲選択：[Select]モードでピアノロール上の範囲をドラッグすると、先頭部分が範囲に含まれているノートが選択されます。
その他の選択：ピアノロール下側のベロシティ/MIDIイベント表示レーンをドラッグするとドラッグ範囲内で現在表示されているイベントが選択されます。

ノートの入力

モードを[Edit](ショートカット:E)にして、ピアノロール上でドラッグします。

ノート/イベントの削除

ノートを選択した後、[Edit:]の[Delete]ボタンまたはDelキーを押します。

ノート/イベントのコピー

ノートやその他のMIDIイベントを選択して[Edit:]の[Copy]ボタンを押し、その後[Paste]ボタンを押すと現在の再生カーソルの位置にコピーされます。

ベロシティやコントロールチェンジなどの編集

[Edit]モードでピアノロールの下部のレーンをドラッグする事で編集できます。
ベロシティの場合は現在あるノートのベロシティを変更するだけですが、その他のイベントの場合はドラッグする事でカーソルの場所に新たにイベントが作成されます。この時のイベントの密度は [Grid:]の設定によります。

ショートカット

次のキーボードショートカットが使用できます。

A ... Selectモード
S ... Scrollモード
E ... Editモード
1 ... ズーム1:1
Z ... ズームイン
X ... ズームアウト
Ctrl-C/command-C ... 選択したイベントをコピー
Ctrl-V/command-V ... 再生カーソル位置にペースト
Del ... 選択したイベントを削除

MIDIキーボードからの入力

WebSequencerはMIDIキーボードからのリアルタイム入力を実験的に実装しています。精度や安定性を含めまだ実用的なものではありませんが、以下の手順で試せます。

準備

今後ブラウザはネイティブにMIDI入力をサポート(Web MIDI API)するようになるようですが、今の所、 MIDIキーボードからの入力を扱うには、「Jazz-plugin」のインストールが必要です。

Jazz-soft.net

上のページからダウンロードしてインストールしてください。

(注：環境によっては不安定になる事があるかも知れません。私が確認している範囲ではChromeでMIDIキーボードを使った後、しばらく放置しておくとブラウザがクラッシュすることがありました。)

使い方

起動直後はMIDI機能はオフになっています。まずシーケンサー上部の[InitializeMIDI]のボタンを押してください。
隣の[MIDI-in device:]の選択ボックスで使用するMIDI入力デバイスを選択します。
再生/録音などを行っていない状態でもMIDIの入力によって現在選択されているトラックのシンセを演奏できます。
[Rec]ボタンを押すとガイドクリックが鳴り、演奏がリアルタイムに記録されます。
ガイドクリックはメニューの「GuideClk」ボタンでOn/Offできます。
記録は現在のトラックのデータを上書きして行きます。範囲を何度もループして記録した場合、最後の1周分が記録されます。
記録されるのはノートon/off、コントロールチェンジ、ピッチベンドのイベントです。

WebSequencer is a MIDI sequencer written in HTML5/Javascript. Chrome is recommended for access.

Functions are:

Load and use WebMidiLink compatible synth
MIDI sequence creation/edit/play
Exporting to MIDI-file / importing MIDI-file
Realtime record from MIDI keyboards (tentative)

Loading/Saving File

File Save

For saving file, press the [SaveFile] button in the [File:] group. Next, download from the link [SAVED-FILE] that is appeared next to the button.
The file-format is standard MIDI file with some additional info about Web synths. That is playable with general MIDI player.
In addition, the next [SAVED-URL] link provide a URL form data that will open browser with the song. [ * Note that the URL will be very long. Some browsers or systems cannot handle that]
WebSequencer cannot handle sounds as a wave-files. If you want to export the song as .wav or something, you should use the method for example recording the AudioI/F's loopback with another app.

File Load

WebSequencer can load standard MIDI files with the [LoadFile] button in [File:] group or dropping a file directly.
If the file is created by WebSequencer, the Web synth settings are also loaded (Note: If the Web synth is compatible to WebMidiLink Link-Lv1).

Selecting Synth

WebSequencer can load upto four WebMidiLink compatible synths. In default, the [GMPlayer] is loaded as [Synth-1].

Select the slot by the buttons [Synth-1]-[Synth-4] under the pianoroll.
Select synth by the dropdown menu. Or input the URL of the synth.
Press the [Load] button.

Tracks

WebSequencer has upto 16 tracks [Trk-01]-[Trk-16] (In default song, 7 tracks are used).

Each track row has following displays:

Synth : Select synth that assigned to this track. [Synth-1]-[Synth-4].
Ch : MIDI channel of this track.
Prog : default program number. A MIDI program change message is inserted to start of sequence.
Mute/Solo : Mute this track, or mute all other tracs.
Level Meter : A indicator of note velocity.
Sequence Overview : A Overview of the whole sequence.

Also there is a ruler that indicate current pianoroll region and current playing location at the top of sequence overviews.

Handling tracks:

A track will be selected by clicking, and the pianoroll will show sequence in theat track.
Press [AddTrk] button for adding track.
Press [DelTrk] button for deleting track.
A track row can be dragged for changing order.
Locate quickly with dragging ruler top of sequence overviews.

Pianoroll

Pianoroll shows the MIDI sequence of current selected track.
Two red triangles top of pianoroll are loop start/end markers. The region inside markers are looped when play.
The green vertical line is the current play position. The play is start from here.
The lane bottom of the pianoroll is events lane it shows velocity/cc/pitchbend.

Mode

WebSequencer has three modes of Select/Scroll/Edit. The mode is switched by the buttons in the [Mode:] group, or keyboard shortcuts A/S/E. Each mode is used as:
- Select: Selecting notes/events
- Scroll: Scroll the pianoroll
- Edit: Editing notes/events

Scroll and Zoom

In [Scroll] mode, pianoroll is scrollable horizontal/vertical by dragging anywhere (excepting the marker position row).
In [Select] or [Edit] mode, scrollable horizontal/vertical by dragging the top row displaying the meas number or left-side keyboard display.
Or Shift+mousewheel also available for horizontal scroll
Horizontal zoom is switchable by the menu [4/1]-[1/16] in the group [Zoom(Z/X):], or shortcuts (Z) or (X).

Selecting notes/events

Selecting single note : In [Select] or [Edit] mode, a note is selected by clicking on pianoroll.
Selecting notes in specified area : In [Select] mode, notes are selected by dragging on pianoroll. a note start point should be included.
Selecting others : Currently displayed Notes or Events in the area are selected by dragging events-lane, bottom of the pianoroll.

Note input

Drag on the pianorool in [Edit] mode.

Deleting Notes/Events

Press [Delete] button or shortcut [Del] after select notes/events.

Copying Note/Events

After select Notes/Events, Press [Copy] and [Paste] button. The copy target location is the current play cursor.

Editing velocity/control-changes

In [Edit] mode, verocity,cc,pitch are editable by dragging bottom events-lane.
The velocity edit will just change the existing note's velocity. Other events edit will generate corespondent events. the generated events density is depends on the [Grid:] setting.

Shortcuts

Available keyboard shortcuts:

A ... Select mode
S ... Scroll mode
E ... Edit mode
1 ... Zoom 1:1
Z ... Zoom in
X ... Zoom out
Ctrl-C... Copy selected
Ctrl-V... Paste to play cursor position
Del ... Delete selected

Input from MIDI keyboards

Real time record from MIDI-keyboards has been tentavely implemented. Currently, it is not so accurate and stable but can be tried.

Preparation

Browsers will support native MIDI functions in the future (Web MIDI API) but now we need to install the support plugin [Jazz-plugin].