WebModular

« Prev WebModular Next »

Japanese

English

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

Clear All Patch 1VCO+1VCA Most Simple Patch 2VCO=>1VCF=>1VCA Basic Patch 2VCO=>2VCF=>2VCA Dual Channel Patch LFO Modulation Patch Sound Effect Patch Ring Patch

MML:

t150 e-d- g-rg-4e-d- g-rg-4e-d- g-4 g-4 frf4 e-d- frf4e-d- frf4e-d- f4 f4 g-rg-4

Play Stop

URL:







Tweet this song

Demo

使い方

基本操作

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

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

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

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

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

キーマッピング

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

1 2

C#3 3

D#3 4 5

F#3 6

G#3 7

A#3 8 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 A S

C#2 D

D#2 F G

F#2 H

G#2 J

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