RSS Twitter Facebook
g200kg > WebModular

2017/01/02

WebModular

« Prev WebModular Next »


|

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








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