-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
120 lines (117 loc) · 9.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<meta keywords="web synthesizer javascript html5 advanced">
<meta description="html5 powered synthesizer">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>recrof's Subtractive playground</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/qwerty-hancock.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/wavetables.js"></script>
<script type="text/javascript" src="js/presets.js"></script>
<script type="text/javascript" src="js/auto.js"></script>
<script type="text/javascript" src="js/objects.js"></script>
<script type="text/javascript" src="js/synth.js"></script>
<script type="text/html" id="SynthControlsTemplate">
<div class="panel" id="osc${id}_panel">
<label class="title"><input type="checkbox" id="enabled${id}" checked />Oscillator ${id}</label>
<table>
<tr><td class="label"><label>detune</label></td><td><input type="range" id="detune${id}" min="-100" max="100" step="1"><input type="number" id="label_detune${id}" /></td></tr>
<tr><td class="label"><label>semi</label></td><td><input type="range" id="semitones${id}" min="-24" max="24" step="1"><input type="number" id="label_semitones${id}" /></td></tr>
<tr><td class="label"><label>vol</label></td><td><input type="range" id="volume${id}" min="0" max="1" step="0.01"><input type="number" id="label_volume${id}" /></td></tr>
<tr><td class="label"><label>type</label></td><td><select id="type${id}"></select></td></tr>
</table>
</div>
</script>
</head>
<body>
<div class="body" width="100%">
<div width="100%">
<div id="keyboard"></div>
</div>
<div class="controls">
<div class="panel_group container_left" id="oscillators">
<div class="panel" id="Preset Panel">
<label class="title">Preset</label>
<table >
<tr><td class="label"><select id="preset_table"></select></td><td><button id="preset_load">load</button></td><td></td></tr>
<tr><td class="label"><button id="preset_import">import</button><button id="preset_export">export</button></td><td><button id="preset_save">save</button></td><td></td></tr>
</table>
</div>
</div>
<div class="panel_group">
<div class="panel" id="volume_panel">
<label class="title">Master Volume</label>
<table >
<tr><td class="label"><label>volume</label></td><td><input type="range" min="0" max="1" step="0.01" id="volume" value="0.4" /><input type="number" id="label_volume"/></td></tr>
</table>
</div>
<div class="panel" id="volume_envelope_panel">
<label class="title">Volume Envelope</label>
<table>
<tr><td class="label"><label>attack</label></td><td><input type="range" min="0" max="5" value="0.001" step="0.001" id="volume_attack" /><input type="number" id="label_volume_attack" /></td></tr>
<tr><td class="label"><label>decay</label></td><td><input type="range" min="0" max="2" value="0.3" step="0.001" id="volume_decay" /><input type="number" id="label_volume_decay" /></td></tr>
<tr><td class="label"><label>sustain</label></td><td><input type="range" min="0" max="5" value="4" step="0.001" id="volume_sustain" /><input type="number" id="label_volume_sustain" /></td></tr>
<tr><td class="label"><label>release</label></td><td><input type="range" min="0.001" max="2" value="0.4" step="0.001" id="volume_release" /><input type="number" id="label_volume_release" /></td></tr>
</table>
</div>
<div class="panel" id="filter_panel">
<label class="title">Filter</label>
<table >
<tr><td class="label"><label>cutoff</label></td><td><input type="range" min="0" max="150" step="1" id="cutoff" value="50" /><input type="number" id="label_cutoff" /></td></tr>
<tr><td class="label"><label>reso</label></td><td><input type="range" min="0" max="40" step="0.01" id="Q" value="0" /><input type="number" id="label_Q" /></td></tr>
<tr style="display: none"><td><label>type</label></td><td><select id="filter_type"><option>lowpass</option><option>highpass</option></select></td></tr>
</table>
</div>
<div class="panel" id="filter_envelope_panel">
<label class="title">Filter Envelope(experimental)</label>
<table>
<tr><td class="label"><label>attack</label></td><td><input type="range" min="0" max="5" value="0" step="0.01" id="filter_attack" /><input type="number" id="label_filter_attack" /></td></tr>
<tr><td class="label"><label>decay</label></td><td><input type="range" min="0" max="2" value="0" step="0.01" id="filter_decay" /><input type="number" id="label_filter_decay" /></td></tr>
<tr><td class="label"><label>sustain</label></td><td><input type="range" min="0" max="5" value="5" step="0.01" id="filter_sustain" /><input type="number" id="label_filter_sustain" /></td></tr>
<tr><td class="label"><label>release</label></td><td><input type="range" min="0" max="2" value="0" step="0.01" id="filter_release" /><input type="number" id="label_filter_release" /></td></tr>
</table>
</div>
<div class="panel" id="lfo_panel">
<label class="title"><input type="checkbox" id="lfo_enabled0" />Low Frequency Oscillator 0</label>
<table>
<tr><td class="label"><label>retrig</label></td><td><input type="checkbox" id="lfo_retrig0" /></td></tr>
<tr><td class="label"><label>amount</label></td><td><input type="range" min="0" max="1" value="0.5" step="0.01" id="lfo_amount0" /><input type="number" id="label_lfo_amount0" /></td></tr>
<tr><td class="label"><label>freq</label></td><td><input type="range" min="0.01" max="30" value="4" step="0.01" id="lfo_frequency0" /><input type="number" id="label_lfo_frequency0" /></td></tr>
<tr><td class="label"><label>param</label></td><td><select id="lfo_parameter0"></select></td></tr>
<tr><td class="label"><label>type</label></td><td><select id="lfo_type0"></select></td></tr>
</table>
</div>
<div class="panel" id="lfo_panel">
<label class="title"><input type="checkbox" id="lfo_enabled1" />Low Frequency Oscillator 1</label>
<table>
<tr><td class="label"><label>retrig</label></td><td><input type="checkbox" id="lfo_retrig1" /></td></tr>
<tr><td class="label"><label>amount</label></td><td><input type="range" min="0" max="1" value="0.5" step="0.01" id="lfo_amount1" /><input type="number" id="label_lfo_amount1" /></td></tr>
<tr><td class="label"><label>frequency</label></td><td><input type="range" min="0.01" max="20" value="4" step="0.01" id="lfo_frequency1" /><input type="number" id="label_lfo_frequency1" /></td></tr>
<tr><td class="label"><label>parameter</label></td><td><select id="lfo_parameter1"></select></td></tr>
<tr><td class="label"><label>type</label></td><td><select id="lfo_type1"></select></td></tr>
</table>
</div>
<div class="panel" id="delay_panel" style="display:block">
<label class="title"><input type="checkbox" id="delay_enabled" />Feedback Delay</label>
<table>
<tr><td class="label"><label>delay</label></td><td><input type="range" min="0.01" max="2" step="0.01" id="delay_delay" value="0.3" /><input type="number" id="label_delay_delay" /></td></tr>
<tr><td class="label"><label>feedback</label></td><td><input type="range" min="0" max="0.9" step="0.1" id="delay_feedback" value="0.5" /><input type="number" id="label_delay_feedback" /></td></tr>
</table>
</div>
<div class="panel" id="reverb_panel" style="display:none">
<label class="title"><input type="checkbox" id="reverb_enabled" />Reverb</label>
<table>
<tr><td class="label"><label>level</label></td><td><input type="range" min="0" max="2" step="0.1" id="reverb_level" value="1" /><input type="number" id="label_reverb_level" /></td></tr>
</table>
</div>
</div>
<canvas id="scope" width="400px" height="300px"></canvas>
</div>
</div>
<small class="body">ideas? thoughts? <a href="mailto:[email protected]">send me a mail</a></small>
</body>
</html>