[ Jpn | Eng ]

Main Menu



Recent

最近の記事

Search

サイト内検索:

Archive

Powered by
MTOS 5.2.2

g200kg > WebModular
WebModular

WebModular (HTML5 モジュラーシンセサイザー)

HTML5+Javascriptで書いたモジュラーシンセサイザーです。 Javascriptのソフトシンセでリアルタイムに音を合成しています。

FirefoxまたはChromeでアクセスする事をおすすめします。

InternetExplorer/Opera/Safari などのWebAudioAPI/AudioDataAPIをサポートしていないブラウザでは JavascriptとFlashを組み合わせて音を出すテストをしています。これらのブラウザで音を出すには 「Flashプラグイン」がインストールされている必要があります。ただし、パフォーマンスは良くありません ので音が途切れる/遅れるなどが気になる場合は是非FirefoxまたはChromeでアクセスしてみてください。

※Safari 6 (Developer Preview) もWeb Audio APIがサポートされているようです。



Webシンセサイザーを複数連携動作させる'WebMidiLink'という仕組みを実験中です。 興味のある方は是非こちらをご覧ください。
お客様の中にWebシンセプログラマはいらっしゃいませんか
WebMidiLinkテストページ



[ Japanese ] | [ English ]



MML:


この曲のURL:



Demo

Sample Song 1
Sample Song 2









使い方

基本操作

2VCO / 2VCF / 2VCA / 2ENV / 2LFOの構成で各モジュールをパッチコードで接続して音色を作ります。

パッチの接続は入力ジャックと出力ジャック間をマウスでドラッグします。 それぞれのジャックの隣にある三角マークが外を向いているのが出力ジャック、ジャック側を向いている のが入力ジャックになります。入力ジャック同士、出力ジャック同士を接続する事はできません。

1つの出力ジャックから複数の入力に接続する事が可能です。接続を削除する場合は入力ジャックからドラッグして何もない所で 離してください。

モジュールの詳しい説明 / チュートリアル

音を出すにはキーボードをマウスでクリックします。また、シンセの下側に「MML」の入力欄があります。 ここにメロディをMMLで書いて「Play」を押すと自動演奏します。

MML文法
文字内容
Tnnテンポの設定
A,B,C,D,E,F,G音名。後ろに続く数字で音符の長さを指定
+,#,-シャープ/フラットを指定(+と#は同じ意味)
R休符。後ろに続く数字で音符の長さを指定
Lnnデフォルトの音符の長さ
.付点
Onnオクターブ指定
<,>以降をオクターブシフト
&タイ

キーマッピング

キーボードで弾く事もできます。各キーは次のように割り当てられています。

12
C#3
3
D#3
45
F#3
6
G#3
7
A#3
89
C#4
0
D#4
Q
C3
W
D3
E
E3
R
F3
T
G3
Y
A3
U
B3
I
C4
O
D4
P
E4
AS
C#2
D
D#2
FG
F#2
H
G#2
J
A#2
KL
C#3
;
D#3
Z
C2
X
D2
C
E2
V
F2
B
G2
N
A2
M
B2
,
C3
.
D3
/

技術情報

WebModularはオーディオを扱うために'Web Audio API' (Chrome) または'Audio Data API' (Firefox)を 使用しています。また、どちらも使えない場合はFlashオブジェクトを利用します。その判定部分は次の ようになっています。

    API = 0;
    if (typeof (webkitAudioContext) != "undefined") {
       API = 1; // WebAudioAPI
       outbufsize = 1024;
       ...
    }
    else if (typeof (Audio) == "function") {
        audio = new Audio();
        if (typeof (audio.mozSetup) == "function") {
           API = 2; // AudioDataAPI
           outbufsize = 1024;
           ...
        }
    }
    if (API == 0) {
        // Use Flash Object
        outbufsize = 4096;
        ...
    }

Flashオブジェクトは単にPCMデータの出力にのみ使用し、Flash使用時でも全ての波形の生成処理は Javascript上で行っています。 ただし残念ながらFlash使用時は出力バッファのサイズ、(=レイテンシー)は4倍になっています。 これはFlashの制限とJavascript=>Actionscriptの受け渡しのオーバーヘッド、また Javascriptエンジンそのもののパフォーマンス(特にTypedArrayが使えない事)によるものです。