/
index.html
976 lines (942 loc) · 55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
<html>
<head>
<script src="lib/flocking/dist/flocking-all.js"></script> <!-- Flocking + all dependencies, including jQuery 2.1.3 and Infusion -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="crossorigin="anonymous"></script>
<script src="lib/masonry.pkgd.min.js"></script>
<script src="lib/segment-display.js"></script>
<script src="lib/knobKnob/transform.js"></script>
<script src="lib/knobKnob/knobKnob.jquery.js"></script>
<script src="lib/jquery.trackpad.js"></script>
<script src="lib/jquery.l90r.piano.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link href="lib/knobKnob/knobKnob.css" rel="stylesheet">
<link href="lib/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"></link>
<title>SYNTHI-JS, a JavaScript emulation of the EMS Synthi A</title>
<meta name="description" content="SYNTHI-JS is a JavaScript emulation of the legendary EMS Synthi A analog synthesizer." />
<!-- Twitter Card data -->
<meta name="twitter:card" value="SYNTHI-JS is a JavaScript emulation of the legendary EMS Synthi A analog synthesizer.">
<!-- Open Graph data -->
<meta property="og:title" content="SYNTHI-JS" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://alexnisnevich.github.io/synthi-js/" />
<meta property="og:image" content="https://alexnisnevich.github.io/synthi-js/synthi-js.png" />
<meta property="og:description" content="SYNTHI-JS is a JavaScript emulation of the legendary EMS Synthi A analog synthesizer." />
<base target="_blank">
</head>
<body>
<div id="loader">
<img src="images/gear.svg" />
<div id="sadBrowserText"></div>
</div>
<div class="grid">
<div class="panel width2 enhancement">
<div class="panelName">INPUT SOURCES</div>
<div id="inputSources">
<div class="inputSource" id="inputCh1">
<div class="inputSourceHeading">Ch 1</div>
<div>
<input id="inputFile1" type="file">
<span id="inputFile1Indicators" class="indicators">
<span id="inputFile1Progress"><img src="images/small-loader.gif" /></span>
<span id="inputFile1Success" class="successIndicator"></span>
<span id="inputFile1Failure" class="FailureIndicator"></span>
</span>
</div>
<div>Speed: <input id="speed1" type="number" value="1" step="0.1"></input></div>
<div>Start: <input id="start1" type="number" value="0"></input> %</div>
<div>End: <input id="end1" type="number" value="100"></input> %</div>
</div>
<div class="inputSource" id="inputCh2">
<div class="inputSourceHeading">Ch 2</div>
<div>
<input id="inputFile2" type="file">
<span id="inputFile2Indicators" class="indicators">
<span id="inputFile2Progress"><img src="images/small-loader.gif" /></span>
<span id="inputFile2Success" class="successIndicator"></span>
<span id="inputFile2Failure" class="FailureIndicator"></span>
</span>
</div>
<div>Speed: <input id="speed2" type="number" value="1" step="0.1"></input></div>
<div>Start: <input id="start2" type="number" value="0"></input> %</div>
<div>End: <input id="end2" type="number" value="100"></input> %</div>
</div>
</div>
</div>
<div class="panel width2" id="scope">
<canvas id="gfx" height="125" width="230"></canvas>
</div>
<div class="panel width3" id="filterOscillator">
<div class="panelName">FILTER / OSCILLATOR</div>
<div class="dial" id="filterFrequency"></div>
<div class="dial" id="filterResponse"></div>
<div class="dial" id="filterLevel"></div>
</div>
<div class="panel width1" id="ringModulator">
<div class="panelName">RING MOD</div>
<div class="dial" id="ringModLevel"></div>
</div>
<div class="panel width2 enhancement">
<div class="panelName">MEMORY BANKS</div>
<div id="bankDisplayContainer">
<canvas id="bankDisplay" width="183" height="70"></canvas>
</div>
<div id="bankSelectButtons">
<button id="bankUp">↑</button>
<button id="bankDown">↓</button>
</div>
<div id="bankOperationButtons">
<button id="bankStore">Store</button>
<button id="bankLoad">Load</button>
<button id="bankClear">Clear</button>
<button id="bankImportExport">Imp/Export</button>
</div>
</div>
<div class="panel width4" id="oscillator1">
<div class="panelName">OSCILLATOR 1</div>
<div class="freq" id="osc1FreqDisplay"></div>
<div class="dial" id="osc1Freq"></div>
<div class="dial" id="osc1Shape"></div>
<div class="dial" id="osc1SinLevel"></div>
<div class="dial" id="osc1RampLevel"></div>
</div>
<div class="panel width6" id="envelopeShaper">
<div class="panelName">ENVELOPE SHAPER</div>
<div class="dial" id="envAttack"></div>
<div class="dial" id="envOn"></div>
<div class="dial" id="envDecay"></div>
<div class="dial" id="envOff"></div>
<div class="dial" id="envTrapezoidLevel"></div>
<div class="dial" id="envSignalLevel"></div>
<div id="envLight"></div>
</div>
<div class="panel width4" id="oscillator2">
<div class="panelName">OSCILLATOR 2</div>
<div class="freq" id="osc2FreqDisplay"></div>
<div class="dial" id="osc2Freq"></div>
<div class="dial" id="osc2Shape"></div>
<div class="dial" id="osc2SquareLevel"></div>
<div class="dial" id="osc2TriangleLevel"></div>
</div>
<div class="panel width4 height4" id="patchboard">
<table id="patches">
<tr>
<th></th>
<th></th>
<th colspan="8">signal inputs</th>
<th colspan="8">control inputs</th>
</tr>
<tr>
<th></th>
<th></th>
<th class="vertical" rowspan="2" title="output ch.1">o u t p u t ch 1 <span class="tri">▲</span></th>
<th class="vertical" rowspan="2" title="scope">s c o p e <span class="tri">▲</span></th>
<th class="vertical" rowspan="2" title="output ch.2">o u t p u t ch 2 <span class="tri">▲</span></th>
<th class="vertical" rowspan="2" title="envelope">e n v e l o p e <span class="tri">▲</span></th>
<th class="horizontal" colspan="2">ring mod</th>
<th class="vertical" rowspan="2" title="reverb">r e v e r b <span class="tri">▲</span></th>
<th class="vertical" rowspan="2" title="filter">f i l t e r <span class="tri">▲</span></th>
<th class="horizontal" colspan="3">osc freq</th>
<th class="vertical" rowspan="2" title="decay">d e c a y <span class="tri">▲</span></th>
<th class="vertical" rowspan="2" title="reverb">r e v e r b m i x <span class="tri">▲</span></th>
<th class="vertical" rowspan="2" title="filter freq">f i l t e r f r q <span class="tri">▲</span></th>
<th class="horizontal" colspan="2">out- put ch lvl</th>
</tr>
<tr>
<th colspan="6"></th>
<th>A<span class="tri">▲</span></th>
<th>B<span class="tri">▲</span></th>
<th>1<span class="tri">▲</span></th>
<th>2<span class="tri">▲</span></th>
<th>3<span class="tri">▲</span></th>
<th>1<span class="tri">▲</span></th>
<th>2<span class="tri">▲</span></th>
</tr>
<tr>
<td>osc 1 (sin)</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="1" type="checkbox"></td>
<td><input data-in="B" data-out="1" type="checkbox"></td>
<td><input data-in="C" data-out="1" type="checkbox"></td>
<td><input data-in="D" data-out="1" type="checkbox"></td>
<td><input data-in="E" data-out="1" type="checkbox"></td>
<td><input data-in="F" data-out="1" type="checkbox"></td>
<td><input data-in="G" data-out="1" type="checkbox"></td>
<td><input data-in="H" data-out="1" type="checkbox"></td>
<td><input data-in="I" data-out="1" type="checkbox"></td>
<td><input data-in="J" data-out="1" type="checkbox"></td>
<td><input data-in="K" data-out="1" type="checkbox"></td>
<td><input data-in="L" data-out="1" type="checkbox"></td>
<td><input data-in="M" data-out="1" type="checkbox"></td>
<td><input data-in="N" data-out="1" type="checkbox"></td>
<td><input data-in="O" data-out="1" type="checkbox"></td>
<td><input data-in="P" data-out="1" type="checkbox"></td>
<td>1</td>
</tr>
<tr>
<td>osc 1 (rmp)</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="2" type="checkbox"></td>
<td><input data-in="B" data-out="2" type="checkbox"></td>
<td><input data-in="C" data-out="2" type="checkbox"></td>
<td><input data-in="D" data-out="2" type="checkbox"></td>
<td><input data-in="E" data-out="2" type="checkbox"></td>
<td><input data-in="F" data-out="2" type="checkbox"></td>
<td><input data-in="G" data-out="2" type="checkbox"></td>
<td><input data-in="H" data-out="2" type="checkbox"></td>
<td><input data-in="I" data-out="2" type="checkbox"></td>
<td><input data-in="J" data-out="2" type="checkbox"></td>
<td><input data-in="K" data-out="2" type="checkbox"></td>
<td><input data-in="L" data-out="2" type="checkbox"></td>
<td><input data-in="M" data-out="2" type="checkbox"></td>
<td><input data-in="N" data-out="2" type="checkbox"></td>
<td><input data-in="O" data-out="2" type="checkbox"></td>
<td><input data-in="P" data-out="2" type="checkbox"></td>
<td>2</td>
</tr>
<tr>
<td>osc 2 (sq)</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="3" type="checkbox"></td>
<td><input data-in="B" data-out="3" type="checkbox"></td>
<td><input data-in="C" data-out="3" type="checkbox"></td>
<td><input data-in="D" data-out="3" type="checkbox"></td>
<td><input data-in="E" data-out="3" type="checkbox"></td>
<td><input data-in="F" data-out="3" type="checkbox"></td>
<td><input data-in="G" data-out="3" type="checkbox"></td>
<td><input data-in="H" data-out="3" type="checkbox"></td>
<td><input data-in="I" data-out="3" type="checkbox"></td>
<td><input data-in="J" data-out="3" type="checkbox"></td>
<td><input data-in="K" data-out="3" type="checkbox"></td>
<td><input data-in="L" data-out="3" type="checkbox"></td>
<td><input data-in="M" data-out="3" type="checkbox"></td>
<td><input data-in="N" data-out="3" type="checkbox"></td>
<td><input data-in="O" data-out="3" type="checkbox"></td>
<td><input data-in="P" data-out="3" type="checkbox"></td>
<td>3</td>
</tr>
<tr>
<td>osc 2 (tri)</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="4" type="checkbox"></td>
<td><input data-in="B" data-out="4" type="checkbox"></td>
<td><input data-in="C" data-out="4" type="checkbox"></td>
<td><input data-in="D" data-out="4" type="checkbox"></td>
<td><input data-in="E" data-out="4" type="checkbox"></td>
<td><input data-in="F" data-out="4" type="checkbox"></td>
<td><input data-in="G" data-out="4" type="checkbox"></td>
<td><input data-in="H" data-out="4" type="checkbox"></td>
<td><input data-in="I" data-out="4" type="checkbox"></td>
<td><input data-in="J" data-out="4" type="checkbox"></td>
<td><input data-in="K" data-out="4" type="checkbox"></td>
<td><input data-in="L" data-out="4" type="checkbox"></td>
<td><input data-in="M" data-out="4" type="checkbox"></td>
<td><input data-in="N" data-out="4" type="checkbox"></td>
<td><input data-in="O" data-out="4" type="checkbox"></td>
<td><input data-in="P" data-out="4" type="checkbox"></td>
<td>4</td>
</tr>
<tr>
<td>osc 3 (sq)</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="5" type="checkbox"></td>
<td><input data-in="B" data-out="5" type="checkbox"></td>
<td><input data-in="C" data-out="5" type="checkbox"></td>
<td><input data-in="D" data-out="5" type="checkbox"></td>
<td><input data-in="E" data-out="5" type="checkbox"></td>
<td><input data-in="F" data-out="5" type="checkbox"></td>
<td><input data-in="G" data-out="5" type="checkbox"></td>
<td><input data-in="H" data-out="5" type="checkbox"></td>
<td><input data-in="I" data-out="5" type="checkbox"></td>
<td><input data-in="J" data-out="5" type="checkbox"></td>
<td><input data-in="K" data-out="5" type="checkbox"></td>
<td><input data-in="L" data-out="5" type="checkbox"></td>
<td><input data-in="M" data-out="5" type="checkbox"></td>
<td><input data-in="N" data-out="5" type="checkbox"></td>
<td><input data-in="O" data-out="5" type="checkbox"></td>
<td><input data-in="P" data-out="5" type="checkbox"></td>
<td>5</td>
</tr>
<tr>
<td>osc 3 (tri)</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="6" type="checkbox"></td>
<td><input data-in="B" data-out="6" type="checkbox"></td>
<td><input data-in="C" data-out="6" type="checkbox"></td>
<td><input data-in="D" data-out="6" type="checkbox"></td>
<td><input data-in="E" data-out="6" type="checkbox"></td>
<td><input data-in="F" data-out="6" type="checkbox"></td>
<td><input data-in="G" data-out="6" type="checkbox"></td>
<td><input data-in="H" data-out="6" type="checkbox"></td>
<td><input data-in="I" data-out="6" type="checkbox"></td>
<td><input data-in="J" data-out="6" type="checkbox"></td>
<td><input data-in="K" data-out="6" type="checkbox"></td>
<td><input data-in="L" data-out="6" type="checkbox"></td>
<td><input data-in="M" data-out="6" type="checkbox"></td>
<td><input data-in="N" data-out="6" type="checkbox"></td>
<td><input data-in="O" data-out="6" type="checkbox"></td>
<td><input data-in="P" data-out="6" type="checkbox"></td>
<td>6</td>
</tr>
<tr>
<td>noise</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="7" type="checkbox"></td>
<td><input data-in="B" data-out="7" type="checkbox"></td>
<td><input data-in="C" data-out="7" type="checkbox"></td>
<td><input data-in="D" data-out="7" type="checkbox"></td>
<td><input data-in="E" data-out="7" type="checkbox"></td>
<td><input data-in="F" data-out="7" type="checkbox"></td>
<td><input data-in="G" data-out="7" type="checkbox"></td>
<td><input data-in="H" data-out="7" type="checkbox"></td>
<td><input data-in="I" data-out="7" type="checkbox"></td>
<td><input data-in="J" data-out="7" type="checkbox"></td>
<td><input data-in="K" data-out="7" type="checkbox"></td>
<td><input data-in="L" data-out="7" type="checkbox"></td>
<td><input data-in="M" data-out="7" type="checkbox"></td>
<td><input data-in="N" data-out="7" type="checkbox"></td>
<td><input data-in="O" data-out="7" type="checkbox"></td>
<td><input data-in="P" data-out="7" type="checkbox"></td>
<td>7</td>
</tr>
<tr>
<td>input ch 1</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="8" type="checkbox"></td>
<td><input data-in="B" data-out="8" type="checkbox"></td>
<td><input data-in="C" data-out="8" type="checkbox"></td>
<td><input data-in="D" data-out="8" type="checkbox"></td>
<td><input data-in="E" data-out="8" type="checkbox"></td>
<td><input data-in="F" data-out="8" type="checkbox"></td>
<td><input data-in="G" data-out="8" type="checkbox"></td>
<td><input data-in="H" data-out="8" type="checkbox"></td>
<td><input data-in="I" data-out="8" type="checkbox"></td>
<td><input data-in="J" data-out="8" type="checkbox"></td>
<td><input data-in="K" data-out="8" type="checkbox"></td>
<td><input data-in="L" data-out="8" type="checkbox"></td>
<td><input data-in="M" data-out="8" type="checkbox"></td>
<td><input data-in="N" data-out="8" type="checkbox"></td>
<td><input data-in="O" data-out="8" type="checkbox"></td>
<td><input data-in="P" data-out="8" type="checkbox"></td>
<td>8</td>
</tr>
<tr>
<td>input ch 2</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="9" type="checkbox"></td>
<td><input data-in="B" data-out="9" type="checkbox"></td>
<td><input data-in="C" data-out="9" type="checkbox"></td>
<td><input data-in="D" data-out="9" type="checkbox"></td>
<td><input data-in="E" data-out="9" type="checkbox"></td>
<td><input data-in="F" data-out="9" type="checkbox"></td>
<td><input data-in="G" data-out="9" type="checkbox"></td>
<td><input data-in="H" data-out="9" type="checkbox"></td>
<td><input data-in="I" data-out="9" type="checkbox"></td>
<td><input data-in="J" data-out="9" type="checkbox"></td>
<td><input data-in="K" data-out="9" type="checkbox"></td>
<td><input data-in="L" data-out="9" type="checkbox"></td>
<td><input data-in="M" data-out="9" type="checkbox"></td>
<td><input data-in="N" data-out="9" type="checkbox"></td>
<td><input data-in="O" data-out="9" type="checkbox"></td>
<td><input data-in="P" data-out="9" type="checkbox"></td>
<td>9</td>
</tr>
<tr>
<td><i>filter</i></td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="10" type="checkbox"></td>
<td><input data-in="B" data-out="10" type="checkbox"></td>
<td><input data-in="C" data-out="10" type="checkbox"></td>
<td><input data-in="D" data-out="10" type="checkbox"></td>
<td><input data-in="E" data-out="10" type="checkbox"></td>
<td><input data-in="F" data-out="10" type="checkbox"></td>
<td><input data-in="G" data-out="10" type="checkbox"></td>
<td><input data-in="H" data-out="10" type="checkbox"></td>
<td><input data-in="I" data-out="10" type="checkbox"></td>
<td><input data-in="J" data-out="10" type="checkbox"></td>
<td><input data-in="K" data-out="10" type="checkbox"></td>
<td><input data-in="L" data-out="10" type="checkbox"></td>
<td><input data-in="M" data-out="10" type="checkbox"></td>
<td><input data-in="N" data-out="10" type="checkbox"></td>
<td><input data-in="O" data-out="10" type="checkbox"></td>
<td><input data-in="P" data-out="10" type="checkbox"></td>
<td>10</td>
</tr>
<tr>
<td>trapezoid</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="11" type="checkbox"></td>
<td><input data-in="B" data-out="11" type="checkbox"></td>
<td><input data-in="C" data-out="11" type="checkbox"></td>
<td><input data-in="D" data-out="11" type="checkbox"></td>
<td><input data-in="E" data-out="11" type="checkbox"></td>
<td><input data-in="F" data-out="11" type="checkbox"></td>
<td><input data-in="G" data-out="11" type="checkbox"></td>
<td><input data-in="H" data-out="11" type="checkbox"></td>
<td><input data-in="I" data-out="11" type="checkbox"></td>
<td><input data-in="J" data-out="11" type="checkbox"></td>
<td><input data-in="K" data-out="11" type="checkbox"></td>
<td><input data-in="L" data-out="11" type="checkbox"></td>
<td><input data-in="M" data-out="11" type="checkbox"></td>
<td><input data-in="N" data-out="11" type="checkbox"></td>
<td><input data-in="O" data-out="11" type="checkbox"></td>
<td><input data-in="P" data-out="11" type="checkbox"></td>
<td>11</td>
</tr>
<tr>
<td><i>env</i></td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="12" type="checkbox"></td>
<td><input data-in="B" data-out="12" type="checkbox"></td>
<td><input data-in="C" data-out="12" type="checkbox"></td>
<td><input data-in="D" data-out="12" type="checkbox"></td>
<td><input data-in="E" data-out="12" type="checkbox"></td>
<td><input data-in="F" data-out="12" type="checkbox"></td>
<td><input data-in="G" data-out="12" type="checkbox"></td>
<td><input data-in="H" data-out="12" type="checkbox"></td>
<td><input data-in="I" data-out="12" type="checkbox"></td>
<td><input data-in="J" data-out="12" type="checkbox"></td>
<td><input data-in="K" data-out="12" type="checkbox"></td>
<td><input data-in="L" data-out="12" type="checkbox"></td>
<td><input data-in="M" data-out="12" type="checkbox"></td>
<td><input data-in="N" data-out="12" type="checkbox"></td>
<td><input data-in="O" data-out="12" type="checkbox"></td>
<td><input data-in="P" data-out="12" type="checkbox"></td>
<td>12</td>
</tr>
<tr>
<td><i>ring mod</i></td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="13" type="checkbox"></td>
<td><input data-in="B" data-out="13" type="checkbox"></td>
<td><input data-in="C" data-out="13" type="checkbox"></td>
<td><input data-in="D" data-out="13" type="checkbox"></td>
<td><input data-in="E" data-out="13" type="checkbox"></td>
<td><input data-in="F" data-out="13" type="checkbox"></td>
<td><input data-in="G" data-out="13" type="checkbox"></td>
<td><input data-in="H" data-out="13" type="checkbox"></td>
<td><input data-in="I" data-out="13" type="checkbox"></td>
<td><input data-in="J" data-out="13" type="checkbox"></td>
<td><input data-in="K" data-out="13" type="checkbox"></td>
<td><input data-in="L" data-out="13" type="checkbox"></td>
<td><input data-in="M" data-out="13" type="checkbox"></td>
<td><input data-in="N" data-out="13" type="checkbox"></td>
<td><input data-in="O" data-out="13" type="checkbox"></td>
<td><input data-in="P" data-out="13" type="checkbox"></td>
<td>13</td>
</tr>
<tr>
<td><i>reverb</i></td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="14" type="checkbox"></td>
<td><input data-in="B" data-out="14" type="checkbox"></td>
<td><input data-in="C" data-out="14" type="checkbox"></td>
<td><input data-in="D" data-out="14" type="checkbox"></td>
<td><input data-in="E" data-out="14" type="checkbox"></td>
<td><input data-in="F" data-out="14" type="checkbox"></td>
<td><input data-in="G" data-out="14" type="checkbox"></td>
<td><input data-in="H" data-out="14" type="checkbox"></td>
<td><input data-in="I" data-out="14" type="checkbox"></td>
<td><input data-in="J" data-out="14" type="checkbox"></td>
<td><input data-in="K" data-out="14" type="checkbox"></td>
<td><input data-in="L" data-out="14" type="checkbox"></td>
<td><input data-in="M" data-out="14" type="checkbox"></td>
<td><input data-in="N" data-out="14" type="checkbox"></td>
<td><input data-in="O" data-out="14" type="checkbox"></td>
<td><input data-in="P" data-out="14" type="checkbox"></td>
<td>14</td>
</tr>
<tr>
<td>joystick ↔</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="15" type="checkbox"></td>
<td><input data-in="B" data-out="15" type="checkbox"></td>
<td><input data-in="C" data-out="15" type="checkbox"></td>
<td><input data-in="D" data-out="15" type="checkbox"></td>
<td><input data-in="E" data-out="15" type="checkbox"></td>
<td><input data-in="F" data-out="15" type="checkbox"></td>
<td><input data-in="G" data-out="15" type="checkbox"></td>
<td><input data-in="H" data-out="15" type="checkbox"></td>
<td><input data-in="I" data-out="15" type="checkbox"></td>
<td><input data-in="J" data-out="15" type="checkbox"></td>
<td><input data-in="K" data-out="15" type="checkbox"></td>
<td><input data-in="L" data-out="15" type="checkbox"></td>
<td><input data-in="M" data-out="15" type="checkbox"></td>
<td><input data-in="N" data-out="15" type="checkbox"></td>
<td><input data-in="O" data-out="15" type="checkbox"></td>
<td><input data-in="P" data-out="15" type="checkbox"></td>
<td>15</td>
</tr>
<tr>
<td>joystick ↕</td>
<td><div class="tri">►</div></td>
<td><input data-in="A" data-out="16" type="checkbox"></td>
<td><input data-in="B" data-out="16" type="checkbox"></td>
<td><input data-in="C" data-out="16" type="checkbox"></td>
<td><input data-in="D" data-out="16" type="checkbox"></td>
<td><input data-in="E" data-out="16" type="checkbox"></td>
<td><input data-in="F" data-out="16" type="checkbox"></td>
<td><input data-in="G" data-out="16" type="checkbox"></td>
<td><input data-in="H" data-out="16" type="checkbox"></td>
<td><input data-in="I" data-out="16" type="checkbox"></td>
<td><input data-in="J" data-out="16" type="checkbox"></td>
<td><input data-in="K" data-out="16" type="checkbox"></td>
<td><input data-in="L" data-out="16" type="checkbox"></td>
<td><input data-in="M" data-out="16" type="checkbox"></td>
<td><input data-in="N" data-out="16" type="checkbox"></td>
<td><input data-in="O" data-out="16" type="checkbox"></td>
<td><input data-in="P" data-out="16" type="checkbox"></td>
<td>16</td>
</tr>
<tr>
<td></td>
<td></td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td></td>
</tr>
</table>
<div class="logo">SYNTHI-JS</div>
<div id="toolbar">
<button id="helpButton" title="Help" alt="Help"><i class="fa fa-question fa-lg" aria-hidden="true"></i></button>
<button id="settingsButton" title="Settings" alt="Settings"><i class="fa fa-gear fa-lg" aria-hidden="true"></i></button>
<button id="pianoButton" title="Keyboard" alt="Keyboard"><img src="images/1468117249_piano.png" /></button>
</div>
</div>
<div class="panel width2" id="reverb">
<div class="panelName">REVERBERATION</div>
<div class="dial" id="reverbMix"></div>
<div class="dial" id="reverbLevel"></div>
</div>
<div class="panel width4" id="oscillator3">
<div class="panelName">OSCILLATOR 3</div>
<div class="freq" id="osc3FreqDisplay"></div>
<div class="dial" id="osc3Freq"></div>
<div class="dial" id="osc3Shape"></div>
<div class="dial" id="osc3SquareLevel"></div>
<div class="dial" id="osc3TriangleLevel"></div>
</div>
<div class="panel width2">
<div class="panelName">INPUT LEVEL</div>
<div class="dial" id="ch1inputLevel"></div>
<div class="dial" id="ch2inputLevel"></div>
</div>
<div class="panel width2" id="noiseGenerator">
<div class="panelName">NOISE GENERATOR</div>
<div class="dial" id="noiseShape"></div>
<div class="dial" id="noiseLevel"></div>
</div>
<div class="panel width2">
<div class="panelName">OUTPUT FILTER</div>
<div class="dial" id="ch1outputFilter"></div>
<div class="dial" id="ch2outputFilter"></div>
</div>
<div class="panel width2 height2">
<div class="panelName">RANGE</div>
<div class="dial" id="joystickXRange"></div>
<div class="dial" id="joystickYRange"></div>
<div id="joystick"></div>
<div id="manualTrigger">
<button class="red"></button>
manual trigger
</div>
</div>
<div class="panel width4">
<div class="panelName">CHANNEL 1 ---- OUTPUT ---- CHANNEL 2</div>
<div class="dial" id="ch1level"></div>
<div class="dial" id="ch1pan"></div>
<div class="dial" id="ch2pan"></div>
<div class="dial" id="ch2level"></div>
</div>
</div>
<div id="pianoDialog" class="modalDialog noOverlay">
<div class="panel">
<div class="panelName">SYNTHI DK.2</div>
<button id="pianoDialogClose" class="closeButton">X</button>
<div id="pianoControls" class="panel">
<div class="subPanel" id="pianoControlsOscillator">
<div class="panelName">KEYBOARD OSCILLATOR</div>
<div class="dial" id="keyboardFrequency"></div>
<div class="dial" id="keyboardTuningSpread"></div>
<div class="dial" id="keyboardLevel"></div>
</div>
<div class="subPanel" id="pianoControlsInputs">
<div>
<div class="panelName">INPUT CH 1</div>
<div class="inputSelector">
<label for="pianoInputCh1Signal">signal </label>
<input type="radio" name="pianoInputCh1" id="pianoInputCh1Signal" value="signal" checked="true" />
<input type="radio" name="pianoInputCh1" id="pianoInputCh1Voltage" value="control" />
<label for="pianoInputCh1Voltage"> voltage</label>
</div>
</div>
<div>
<div class="panelName">INPUT CH 2</div>
<div class="inputSelector">
<label for="pianoInputCh2Signal">signal </label>
<input type="radio" name="pianoInputCh2" id="pianoInputCh2Signal" value="signal" />
<input type="radio" name="pianoInputCh2" id="pianoInputCh2Voltage" value="control" checked="true" />
<label for="pianoInputCh2Voltage"> voltage</label>
</div>
</div>
</div>
</div>
<div id="piano">
<div id="A4Freq"></div>
<div id="A5Freq"></div>
</div>
</div>
</div>
<div id="memoryDialog" class="modalDialog">
<div class="panel">
<div class="panelName">MEMORY IMPORT / EXPORT</div>
<textarea>
</textarea>
<button id="memoryImport">Import Into Memory</button>
<button id="memoryDialogClose">Close</button>
</div>
</div>
<div id="settingsDialog" class="modalDialog">
<div class="panel">
<div class="panelName">SETTINGS</div>
<button id="settingsDialogClose" class="closeButton">X</button>
<div class="subPanel">
<div class="panelName">Knobs</div>
<div class="dial" id="testDial"></div>
<div class="setting">
Motion: <select id="knobMotion">
<option selected value="radial">Radial (skeumorphic)</option>
<option value="vertical">Vertical (Ableton-style)</option>
<option value="hybrid">Hybrid</option>
</select>
</div>
<div class="setting">Speed: <div id="knobIntensity"></div></div>
</div>
</div>
</div>
<div id="helpDialog" class="modalDialog">
<div class="panel">
<div class="panelName">SYNTHI-JS MANUAL</div>
<button id="helpDialogClose" class="closeButton">X</button>
<div id="helpArea">
<div id="sidebar">
<ul>
<li value="what-is-synthi-js">What is SYNTHI-JS?</li>
<li value="what-was-the-synthi-a">What was the Synthi A?</li>
<li value="usage">Usage</li>
<li value="components">Components</li>
<li value="synthi-manual">Synthi A Manual (1971)</li>
<li value="dk2-keyboard">DK2 Keyboard</li>
<li value="presets">Presets</li>
<li value="development">Development</li>
<li value="contact-me">Contact Me</li>
</ul>
</div>
<div id="content">
<div id="what-is-synthi-js" class="page">
<p>SYNTHI-JS is a JavaScript emulation of the legendary EMS Synthi A analog synthesizer.</p>
<img src="images/synthi-js.png" />
<p>SYNTHI-JS is a modular synthesizer that is made up of 11 components: oscillators,
filters and so on. The patchboard at the center is used to connect component <i>outputs</i>
(listed on the left of the patchboard) to component <i>inputs</i> (listed on the top).</p>
<p>To hear the output of any component, connect it to one of the Output Ch pins (<b>A</b> and <b>C</b>).
You can also visualize the output of any component by connecting it to the Scope pin (<b>B</b>).</p>
<p>SYNTHI-JS adds a couple features that were not in the original Synthi A: a Memory Bank
that can store up to 100 different patches/configurations and export them as text files, and
an Input Sources panel that lets you use audio from anywhere on the Internet as an input.</p>
<p>SYNTHI-JS was built over a period of many months in 2015 and 2016 by
<a href="http://alex.nisnevich.com">Alex Nisnevich</a>,
using the <a href="http://flockingjs.org/">Flocking</a> library.</p>
</div>
<div id="what-was-the-synthi-a" class="page">
<img src="images/SYNTHI_A.jpg" />
<p>The <a href="https://en.wikipedia.org/wiki/EMS_Synthi_A">Synthi A</a> was a portable analog synthesizer made by
<a href="https://en.wikipedia.org/wiki/Electronic_Music_Studios">EMS (Electronic Music Studios, London)</a>.
in 1971. The Synthi A, along with the <a href="https://en.wikipedia.org/wiki/EMS_VCS_3">VCS 3</a>
that it was based on, used a highly
idiosyncratic design: unlike other analog synthesizers that relied on patch cables to
connect components, it used pins in a patchboard matrix.</p>
<p>As a result, modifying sounds on a Synthi A is a much simpler and more organic
procedure than on conventional analog synthesizers. This feature, along with its portability
and capacity for unusual noises, made it popular among both progressive rock bands and
soundtrack composers.</p>
<p>Among the most notable uses of the Synthi A are the synthesizer loop in Pink Floyd's
<a href="https://www.youtube.com/watch?v=6oVFKYQR7sY">"On the Run"</a>.
The <a href="https://en.wikipedia.org/wiki/EMS_Synthi_100">Synthi 100</a>,
a large-scale studio version of the VCS/Synthi A, was
used heavily by the BBC to create sound effects for <i>The Hitchhikers' Guide to the Galaxy</i>,
<i>Doctor Who</i>, and other radio and TV programs.</p>
<img src="images/everynun.jpg" />
</div>
<div id="usage" class="page">
<p>SYNTHI-JS can look daunting at first, but creating patches with it is actually quite straightforward.</p>
<p><i>This section of the manual covers general operation of SYNTHI-JS - see the next section
for information and specifications of each individual synth component (oscillators, filters, etc).</i></p>
<h3>The Patchboard</h3>
<img src="images/patchboard.png" />
<p>The patchboard connects the <i>outputs</i> of components to the <i>inputs</i> of other components.</p>
<p>For example, the simplest patch
you can make is by just placing a pin on <b>A1</b>, which connects the output of Oscillator 1
to the input of Output Ch1, by default producing a 440 Hz sine wave sound.</p>
<p>It helps to separate the components into <i>sources</i> and <i>treatments</i>:</p>
<ul>
<li><i>Sources</i> always produce a sound, and don't take any input. These include the oscillators,
the noise generator, the input channels (assuming an input source is selected), and also the
trapezoid output of the envelope shaper.</li>
<li><i>Treatments</i> take a signal as an input, alter it in some way, and return a new
signal. These include the filter, the envelope output of the envelope shaper, the reverb
module, and the ring modulator (which is unique in that it requires two inputs, not one). Treatments
are <i>italicized</i> on the left side of the patchboard.</li>
<li>The Output Amplifier is neither of these - it's the only component that has only an input
pin and no output pin. Its output is your speakers!</li>
</ul>
<p>Many components can additionally take a <i>control voltage</i> (CV) input to modify their
functionality. For example, each of the oscillators has a frequency control pin - a signal can
be sent there to modulate the frequency of the given oscillator.</p>
<h3>The Scope</h3>
<img src="images/scope.png" />
<p>The scope <b>(input B)</b> can be used to observe any given output signal. The scope displays
the amplitude of the given signal over time, with the top of the scope representing a control voltage
of +6V and the bottom of the scope representing a control voltage of -6V. The frequency of a signal
can be observed by watching its movement.</p>
<h3>The Joystick</h3>
<img src="images/joystick.png" />
<p>The joystick produces two
user-controlled signals while the mouse is pressed down on it - one corresponding to the mouse's
X-position from the center of the pad and one corresponding to the mouse's Y-position from the center
of the pad. By default the signal produced ranges from -1V to +1V, but the Range knobs can be used
to make the signal range up to -2V to +2V.</p>
<h3>The Memory Banks</h3>
<img src="images/memory.png" />
<p>The memory banks can be used to store up to 100 patches. Clicking the <b>Store</b> button at a given memory
location will store the current configuration of SYNTHI-JS (knobs and patchboard pins) into memory.
Memory banks that have a patch stored under them are indicated by the letter <b>S</b>.</p>
<p>Preset memory banks that can not be modified are indicated by the letter <b>P</b>. See the <b>Presets</b> page
of this manual for more information.</p>
<p>The <b>Imp/Export</b> button opens the <b>Memory Import / Export</b> dialog, which can be used to
share the current patch or to load a patch that has been shared with you by someone else.</p>
<h3>The Input Source Selector</h3>
<img src="images/input-sources.png" />
<p>The input source selector can be used to upload audio tracks for playback. Each track
loaded this way will play in a loop on the given input channel <b>(pins 8 and 9)</b>. You can adjust
the playback speed and the start and end points of the track to loop between.</p>
</div>
<div id="components" class="page">
<h3>Oscillator 1</h3>
<p>A sine and ramp (sawtooth) wave oscillator, with a frequency control going from 28 Hz to 7040 Hz.
Outputs the sine and ramp waves on <b>rows 1 and 2</b>, respectively, and
takes a frequency control input at <b>column I</b>.</p>
<p class="no-margin"><b>Controls:</b></p>
<ul>
<li><b>Frequency:</b> Controls the frequency of both the sine and ramp waves.</li>
<li><b>Shape:</b> Controls the sine wave only. At the middle position, a pure sine wave is produced.</li>
<li><b>Sin Level:</b> The signal level of the sine wave in the mix (up to +/- 3V).</li>
<li><b>Ramp Level:</b> The signal level of the ramp wave in the mix (up to +/- 4V).</li>
</ul>
<h3>Oscillator 2</h3>
<p>A square and triangle wave oscillator, with a frequency control going from 28 Hz to 7040 Hz.
Outputs the square and triangle waves on <b>rows 3 and 4</b>, respectively, and
takes a frequency control input at <b>column J</b>.</p>
<p class="no-margin"><b>Controls:</b></p>
<ul>
<li><b>Frequency:</b> Controls the frequency of both the square and triangle waves.</li>
<li><b>Shape:</b> Affects both waves, as shown below:
<img src="images/squ-tri-shape.png" />
</li>
<li><b>Squ Level:</b> The signal level of the square wave in the mix (up to +/- 4V).</li>
<li><b>Tri Level:</b> The signal level of the triangle wave in the mix (up to +/- 6V).</li>
</ul>
<h3>Oscillator 3</h3>
<p>A square and triangle wave oscillator, with a frequency control going from 0.025 (1/40) Hz to 512 Hz.
Because it outputs such low frequency, it is primarily useful as a control input.
Outputs the square and triangle waves on <b>rows 5 and 6</b>, respectively, and
takes a frequency control input at <b>column K</b>.</p>
<p><b>Controls:</b> <i>(same as for Oscillator 2, above)</i></p>
<h3>Noise Generator</h3>
<p>Produces white or grey noise on <b>row 7</b>.</p>
<p class="no-margin"><b>Controls:</b></p>
<ul>
<li><b>Colour:</b> Controls which frequencies are emphasized. At the middle position, produces
pure white noise. To the left, produces "darker" noise. To the right, produces "lighter" noise.</li>
<li><b>Level:</b> The output signal level (up to +/- 3V).</li>
</ul>
<h3>Ring Modulator</h3>
<p>Takes two inputs at <b>columns E and F</b> and <i>multiplies</i> them together, outputting the
result in <b>row 13</b>.</p>
<p class="no-margin"><b>Controls:</b></p>
<ul>
<li><b>Level:</b> The level of the signal produced.</li>
</ul>
<h3>Filter/Oscillator</h3>
<p><i>(Note: I haven't yet been able to get the Filter/Oscillator in SYNTHI-JS to work exactly the way that it
should.)</i></p>
<p>Removes selected frequencies from its input signal. Depending on the position of the <b>Response</b>
control, it can function as a low-pass or band-pass filter or as a very pure sine-wave oscillator.
Takes an input signal at <b>column H</b> and outputs a signal on <b>row 10</b>. The filter frequency
can be modulated by a control signal at <b>column N</b>.</p>
<p class="no-margin"><b>Controls:</b></p>
<ul>
<li><b>Frequency:</b> Controls the cutoff frequency of the filter.</li>
<li><b>Response:</b> Selects the mode of the filter and its response level. If turned far to the left,
the filter functions as a low-pass filter; if turned near the center, the filter functions as a
band-pass filter; if turned far to the right, the filter should function as an oscillator.</li>
<li><b>Level:</b> The level of the signal produced.</li>
</ul>
<h3>Envelope Shaper</h3>
<p>A repeating 4-stage envelope (attack/on/decay/off) that controls the shape of a signal:</p>
<img src="images/trapezoid.png" />
<p>Takes an input signal at <b>column D</b> and optionally a control signal at <b>column L</b> to modify
the Decay time. Outputs the envelope-shaped signal on <b>row 12</b> and the trapezoid wave itself (for use
as a control signal) on <b>row 11</b>. The envelope is self-triggering, but can also be manually triggered
with the <b>manual trigger</b> button near the joystick.</p>
<p class="no-margin"><b>Controls:</b></p>
<ul>
<li><b>Attack:</b> The amount of time for the "attack" step during which a sound "grows" (up to 1 sec).</li>
<li><b>On:</b> The amount of time for the "on" step during which a sound stays at its maximum volume (up to 2.5 sec).</li>
<li><b>Decay:</b> The amount of time for the "decay" step during which a sound fades away (up to 15 sec).</li>
<li><b>Off:</b> The amount of time for the "off" step during which there is no sound (up to 10 sec). When the "off" step time is set to 9 sec or higher, the envelope shaper stops self-triggering and can only be manually triggered</li>
<li><b>Trapezoid Lvl:</b> The level of the trapezoid wave outputted on row 11 (at maximum, -3V to +4V).</li>
<li><b>Signal Lvl:</b> The level of the output signal outputted on row 12.</li>
</ul>
<h3>Reverberation</h3>
<p>Simulates a spring-driven reverberation unit to make a signal sound as though it's coming through
a large room.
Takes an input signal at <b>column G</b> and outputs a signal on <b>row 14</b>. The mix amount
can be modulated by a control signal at <b>column M</b>.</p>
<p class="no-margin"><b>Controls:</b></p>
<ul>
<li><b>Mix:</b> The proportion of direct to reverberated output. Turn rightward to add
more reverberation.</li>
<li><b>Level:</b> The level of the signal produced.</li>
</ul>
<h3>Input Amplifiers</h3>
<p>Loops the audio tracks specified in the Input Sources panel, if any, and outputs them
in <b>rows 8 and 9</b> for input channels 1 and 2 respectively.</p>
<p class="no-margin"><b>Controls:</b></p>
<ul>
<li><b>Channel 1:</b> The level of the input channel 1 signal produced.</li>
<li><b>Channel 2:</b> The level of the input channel 2 signal produced.</li>
</ul>
<h3>Output Amplifiers</h3>
<p>Takes inputs from <b>columns 1 and 3</b> for output channels 1 and 2, respectively, and plays
them through your speakers.</p>
<p class="no-margin"><b>Controls:</b></p>
<ul>
<li><b>Filter:</b> These controls adjust bass or treble attenuation for each output channel. Setting them
to the middle position results in a "flat" response.</li>
<li><b>Level:</b> The controls adjust the volume of each output channel.</li>
<li><b>Pan:</b> These controls adjust the stereo pan of each output channel. By default, channel 1 pans fully to
the left and channel 2 pans fully to the right.</li>
</ul>
</div>
<div id="synthi-manual" class="page">
<iframe src="//docs.google.com/gview?url=http://www.thesynthi.de/data/Synthiusermanual.pdf&embedded=true" frameborder="0"></iframe>
</div>
<div id="dk2-keyboard" class="page">
<p>As of version 1.3.0, SYNTHI-JS includes an emulation of the classic <a href="http://www.phutney.com/EMSDK2.html">EMS DK2 keyboard</a>.</p>
<p><img src="images/dk2.png"></p>
<p>The DK2 can be controlled with either the keyboard (by pressing the keys indicated on the keyboard) or the mouse. (For duophonic control, only the keyboard can be used.) Its outputs are on input ch 1 and 2 (pins 8 and 9, respectively). On each channel, it can output either a sawtooth signal using its built-in oscillator or a control voltage that can be used to modulate other oscillators.</p>
<p>The DK2 has two modes of operation. When both channels are set to the same output mode (<i>signal</i> or <i>voltage</i>), it is in <i>duophonic</i> mode: two keys can be pressed at once, with the lower key signal or voltage being sent to ch 1 and the upper key signal or voltage (if any) being sent to ch 2. On the other hand, when one channel is set to <i>signal</i> and the other channel is set to <i>voltage</i>, the keyboard is in <i>monophonic</i> mode: only one key can be pressed at once, with its signal being sent to one channel and voltage being sent to the other.</p>
<p>Whenever a key is pressed on the DK2, the envelope generator is re-triggered.</p>
<p class="no-margin"><b>Controls:</b></p>
<ul>
<li><b>Frequency:</b> Controls the frequency of the built-in sawtooth oscillator.</li>
<li><b>Spread:</b> Controls the tuning of the built-in sawtooth oscillator. By default, each pair of notes is a semitone apart, but this can be customized from 1/10 semitone up to 2 semitones.</li>
<li><b>Level:</b> The signal level of the built-in sawtooth wave (up to +/- 2V).</li>
<li><b>Input Ch 1:</b> Specifies the output mode of Input Ch 1 (pin 8): <i>signal</i> or <i>voltage</i>.</li>
<li><b>Input Ch 2:</b> Specifies the output mode of Input Ch 2 (pin 9): <i>signal</i> or <i>voltage</i>.</li>
</ul>
</div>
<div id="presets" class="page">
<p>As of version 1.1.0, SYNTHI-JS comes with some preset patches to give you some examples of what you can do!
Preset patches occupy memory banks 95-99 and are not modifiable.</p>
<p>Here are the current available presets:</p>
<table border="1" cellpadding="7" cellspacing="3">
<tr><td>00</td><td><b>Crashing waves</b></td></tr>
<tr><td>01</td><td><b>Modem connection sound</b> <i>(control with joystick)</i></td></tr>
<tr><td>02</td><td><b>Bowing effect</b> <i>(use the joystick to make sounds; Ex.12 in the SYNTHI manual)</i></td></tr>
<tr><td>03</td><td><b>"Bounce"</b> <i>(failed attempt at Ex.6 in SYNTHI manual)</i></td></tr>
<tr><td>04</td><td><b>Overtone bell</b> <i>(Ex.4 in the SYNTHI manual)</i></td></tr>
</table>
</div>
<div id="development" class="page">
<h3>GitHub Repository</h3>
<p>SYNTHI-JS development happens on <a href="https://github.com/AlexNisnevich/synthi-js">its GitHub repository</a>.
If you want to file a bug report, help work on some features, or just take a peek at the source code,
that's the place to go.</p>
<h3>Missing Features</h3>
<p>My goal is to make as faithful a reproduction of the Synthi A as possible, but there
have been features of it that I have been unable to reproduce, whether because of
conceptual difficulties or just lack of time. Here are the ones that I know of at the moment:</p>
<ul>
<li>The ability to have circular chains of component dependencies <i>(for example,
A depends on B and B depends on A)</i>. As far as I can tell, this is not possible in
<a href="http://flockingjs.org/">Flocking</a>, but I'm open to suggestions.</li>
<li>The EMS KS sequencer.</li>
<li>Dynamic voltage output from the DK2 keyboard. (This could only be done if there were
some way to interact with a MIDI controller in JavaScript, which doesn't seem to be possible yet.)</li>
<li>The Filter/Oscillator doesn't behave as expected yet.</li>
<li>In general, many of the components of SYNTHI-JS don't follow the specs as well
as they could. As I don't personally have a Synthi A to test, I've been doing the best
I could from videos and spec sheets. All feedback is much appreciated.</li>
</ul>
<h3>Version History</h3>
<ul>
<li><b>Version 1.3.0</b> <i>(2016-07-09)</i>: DK2 duophonic keyboard emulator, increased buffer size to reduce lag, minor UI improvements.
<li><b>Version 1.2.1</b> <i>(2016-06-11)</i>: Manual Trigger button for Envelope Shaper, more accurate state loading, minor UI improvements.</li>
<li><b>Version 1.2.0</b> <i>(2016-06-10)</i>: Settings panel with knob controls, restyled patchboard, upload support via S3.</li>
<li><b>Version 1.1.0</b> <i>(2016-05-25)</i>: Preset banks 95-99 (now called 00-04), knob control improvements, some adjustments to Reverb module.</li>
<li><b>Version 1.0.1</b> <i>(2016-05-25)</i>: Fixed bug with component order not being properly set, causing issues for patches using the Ring Modulator.</li>
<li><b>Version 1.0.0</b> <i>(2016-05-21)</i>: Initial release.</li>
</ul>
</div>
<div id="contact-me" class="page">
<p>Got any questions or comments about SYNTHI-JS? Feel free to email me
at <b>alex [dot] nisnevich [at] gmail [dot] com</b>.</p>
<p>If you notice any bugs or missing features, the best place to report them
is the <a href="https://github.com/AlexNisnevich/synthi-js">SYNTHI-JS GitHub page</a>.
</div>
</div>
</div>
</div>
</div>
<script src="js/util.js"></script>
<script src="js/synthi.js"></script>
<script src="js/components/output.js"></script>
<script src="js/components/scope.js"></script>
<script src="js/components/oscillators.js"></script>
<script src="js/components/noise-generator.js"></script>
<script src="js/components/inputs.js"></script>
<script src="js/components/filter.js"></script>
<script src="js/components/envelope.js"></script>
<script src="js/components/ring-modulator.js"></script>
<script src="js/components/reverb.js"></script>
<script src="js/components/joystick.js"></script>
<script src="js/components/keyboard.js"></script>
<script src="js/aws.js"></script>
<script src="js/presets.js"></script>
<script src="js/ui.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-345959-17', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>