RSS Twitter Facebook
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






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

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.

CharDescription
TnnTempo setting
A,B,C,D,E,F,GNote name. following number is duration.
+,#,-sharp/flat
Rrest
Lnndefault note duration
.Dotted note
OnnOctave
<,>Octave shift
&tie

Key Mapping

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
/

Technology

WebModular use 'Web Audio API' (Chrome) or 'Audio Data API' (Firefox) if available. The Flash object is used if neither API is available.

    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;
        ...
    }

All PCM data generation (DSP) is done in javascript even if the Flash object mode. The Flash is just for PCM data output. Unfortunately, output buffer of the Flash mode is 4 times the size of others. Because of the Flash limitation, javascript=>actionscript overhead and the javascript engine performance (especially the TypedArray availability).


« Prev WebModular Next »


g200kg