g200kg > WebModular

2017/01/02

WebModular

« Prev WebModular Next »

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

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

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

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

Modular Synthesizer written in HTML5+Javascript. Realtime sound genearation with javascript.

Currently, testing javascript+flash combination for support non-AudioAPI browsers (Internet Explorer / Opera / Safari). Flash-plugin should be installed on those browsers.

But it is not satisfiable performance. I strongly recommend to access with Firefox or Chrome if you have any problem.

Now testing multiple Web-based synthsizer sync protocol 'WebMidiLink'.
Please refer if you interested in.
WebMidiLink
WebMidiLink Test Page

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	オクターブ指定
<,>	以降をオクターブシフト
&	タイ

キーマッピング

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

2
C#3

3
D#3

5
F#3

6
G#3

7
A#3

9
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

S
C#2

D
D#2

G
F#2

H
G#2

J
A#2

L
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が使えない事)によるものです。

Usage

Consist modules of 2VCO / 2VCF / 2VCA / 2ENV / 2LFO.

Drag mouse between input-jack and output-jack for connect modules. the triangle marks toward outside means output-jack, and toward the jack means a input-jack. input to input, or output to output connection is not allowed.one output-jack to multiple input-jack connection is possible.

Drag from input-jack to anywhere except jacks for delete a connection.

Modules Description / Tutorial Page

The 'MML'(Music Macro Language) string in the MML field can be played.

Char	Description
Tnn	Tempo setting
A,B,C,D,E,F,G	Note name. following number is duration.
+,#,-	sharp/flat
R	rest
Lnn	default note duration
.	Dotted note
Onn	Octave
<,>	Octave shift
&	tie

Key Mapping