-
Notifications
You must be signed in to change notification settings - Fork 187
/
index.html
205 lines (197 loc) · 14.7 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
<!doctype html>
<html>
<head>
<title>Live input effects</title>
<script src="js/effect.js"></script>
<script src="js/waveshaper.js"></script>
<script src="js/jungle.js"></script>
<script src="js/effects.js"></script>
<script src="js/pingpong.js"></script>
<script src="js/apollo.js"></script>
<!-- Visualizer stuff -->
<script src="js/visualizer/events.js"></script>
<!-- WebGL stuff -->
<script src="js/visualizer/base.js"></script>
<script src="js/visualizer/cameracontroller.js"></script>
<!-- TODO(kbr): remove this dependency -->
<script src="js/visualizer/matrix4x4.js"></script>
<!-- Visualizer GL library -->
<script src="js/visualizer/visualizer.js"></script>
<script src="js/visualizer/shader.js"></script>
<style>
body { font: 14pt Arial, sans-serif; background: #333; color: gray; }
select { font: 14pt Arial, sans-serif; }
div#controls div { display:none; border: 1px solid darkgray; border-radius: 5px; padding: 10px; width: 728px;}
div#controls div.display { display: block; }
#controls { padding-top: 24px;}
#effectMix { padding-top: 12px;}
#arranger { width:750px; margin: 25px auto}
#autoplay { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="autoplay">
<button onclick="audioContext.resume(); changeInput(); document.getElementById('autoplay').style='display:none';">Start Processing</button>
</div>
<div>Input:
<select id="audioinput" onchange="changeInput(this.selectedIndex);">
<option>default (selection not supported)</option>
</select>
<!--
<button id="apollo">quindar beep</button>
-->
</div>
<div id="arranger">
<canvas id="view1" width="750" height="200"></canvas><br>
<canvas id="view2" width="750" height="200"></canvas>
<div>
<input type="radio" name="radioSet" value="data"
onmousedown="analyserView1.setAnalysisType(ANALYSISTYPE_FREQUENCY); analyserView2.setAnalysisType(ANALYSISTYPE_FREQUENCY);">Frequency
<input type="radio" name="radioSet" value="data"
onmousedown="analyserView1.setAnalysisType(ANALYSISTYPE_SONOGRAM); analyserView2.setAnalysisType(ANALYSISTYPE_SONOGRAM);">Sonogram
<input type="radio" name="radioSet" value="data" checked="checked"
onmousedown="analyserView1.setAnalysisType(ANALYSISTYPE_3D_SONOGRAM); analyserView2.setAnalysisType(ANALYSISTYPE_3D_SONOGRAM);">3D Sonogram
<input type="radio" name="radioSet" value="data"
onmousedown="analyserView1.setAnalysisType(ANALYSISTYPE_WAVEFORM); analyserView2.setAnalysisType(ANALYSISTYPE_WAVEFORM);">Waveform
</div>
<div id="effectMix">Effect: <select id="effect">
<option>Delay </option>
<option>Reverb </option>
<option>Distortion </option>
<option>Telephone </option>
<option>Gain LFO </option>
<option>Chorus </option>
<option>Flange </option>
<option>Ring mod </option>
<option>Stereo Chorus </option>
<option>Stereo Flange </option>
<option>Pitch Shifter </option>
<option>Mod Delay </option>
<option>Ping-pong delay</option>
<option>LFO Filter</option>
<option>Envelope Follower (testing only)</option>
<option>Autowah</option>
<option>Noise Gate</option>
<option>Wah Bass</option>
<option>Distorted Wah Chorus</option>
<option>Vibrato</option>
<option>BitCrusher</option>
<option>Apollo Quindar Tones</option>
</select>
Effect Mix: <input type="range" min="0.0" max="1.0" step="0.01" value="1.0" style="height: 20px; width: 200px;"
onInput="crossfade( event.target.value );">
Mono input: <input type="checkbox" checked onchange="toggleMono()">
<!-- 60Hz filter: <input type="checkbox" checked onchange="toggleFilter()"> -->
</div>
<div id="controls">
<div id="delayControls">A basic digital delay.<br>
Delay time: <input id="dtime" type="range" min="0.01" max="3" step="0.01" value="0.15" style="height: 20px; width: 200px" onInput="if (dtime) dtime.delayTime.value = event.target.value;"><br>
Regen: <input id="dregen" type="range" min="0.0" max="1.0" step="0.01" value="0.75" style="height: 20px; width: 200px;"
onInput="if (dregen) dregen.gain.value = event.target.value;">
</div>
<div id="reverbControls">A convolution-based "hall" reverb, using a generated impulse file. <!-- TODO: let user select other impulse response files, even auto-generate -->
</div>
<div id="distortionControls">A waveshaper, used to do distortion. Note this will become more high-quality in the future, as we improve the antialiasing in waveshapers.<br>
Drive: <input type="range" min="0.01" max="20" step="0.01" value="5" style="height: 20px; width: 200px;"
onInput="if (waveshaper) waveshaper.setDrive(event.target.value);">
</div>
<div id="telephoneControls">This effect pairs a low-pass and a high-pass filter to "telephonize" a sound - removing
the high and low frequencies. <!-- TODO: put LP/HP cutoff controls here -->
</div>
<div id="gainLFOControls">This effect chops up the sound by using a low-frequency oscillator (LFO) to control the
gain.<br>
LFO type:
<select id="lfotype" onchange="if (lfotype) lfotype.type = event.target.value;">
<option selected="selected" value="sine">SINE</option>
<option value="square">SQUARE</option>
<option value="sawtooth">SAWTOOTH</option>
<option value="triangle">TRIANGLE</option>
</select><br>
LFO speed: <input id="lfo" type="range" min="0.25" max="20" step="0.25" value="3" style="height: 20px; width: 200px;" onInput="if (lfo) lfo.frequency.value = event.target.value;"><br>
LFO depth: <input id="lfodepth" type="range" min="0.0" max="1.0" step="0.1" value="1.0" style="height: 20px; width: 200px;" onInput="if (lfodepth) lfodepth.gain.value = event.target.value;">
</div>
<div id="chorusControls">A basic (monophonic) chorus effect.<br>
Chorus speed: <input id="cspeed" type="range" min="0.5" max="15" step="0.25" value="3.5" style="height: 20px; width: 200px;" onInput="if (cspeed) cspeed.frequency.value = event.target.value;"><br>
Chorus delay: <input id="cdelay" type="range" min="0.005" max="0.055" step="0.005" value="0.03" style="height: 20px; width: 200px;" onInput="if (cdelay) cdelay.delayTime.value = event.target.value;"><br>
Chorus depth: <input id="cdepth" type="range" min="0.0005" max="0.004" step="0.0005" value="0.002" style="height: 20px; width: 200px;" onInput="if (cdepth) cdepth.gain.value = event.target.value;">
</div>
<div id="flangeControls">A basic (monophonic) flanging effect.<br>
Flanger speed: <input id="flspeed" type="range" min="0.05" max="5" step="0.05" value="0.25" style="height: 20px; width: 200px;" onInput="if (flspeed) flspeed.frequency.value = event.target.value;"><br>
Flanger delay: <input id="fldelay" type="range" min="0.001" max="0.02" step="0.001" value="0.005" style="height: 20px; width: 200px;" onInput="if (fldelay) fldelay.delayTime.value = event.target.value;"><br>
Flanger depth: <input id="fldepth" type="range" min="0.0005" max="0.005" step="0.00025" value="0.002" style="height: 20px; width: 200px;" onInput="if (fldepth) fldepth.gain.value = event.target.value;"><br>
Flanger feedback: <input id="flfb" type="range" min="0" max="1" step="0.01" value="0.5" style="height: 20px; width: 200px;" onInput="if (flfb) flfb.gain.value = event.target.value;">
</div>
<div id="ringmodControls">A ring modulator.<br>
Ringmod freq: <input id="rmfreq" type="range" min="9" max="13" step="0.01" value="11" style="height: 20px; width: 200px;" onInput="if (rmod) rmod.frequency.value = Math.pow(2, event.target.value);">
</div>
<div id="stereoChorusControls">A stereo chorus effect.<br>
Chorus speed: <input id="scspeed" type="range" min="0.5" max="15" step="0.25" value="3.5" style="height: 20px; width: 200px;" onInput="if (scspeed) scspeed.frequency.value = event.target.value;"><br>
Chorus delay: <input id="scdelay" type="range" min="0.005" max="0.055" step="0.005" value="0.03" style="height: 20px; width: 200px;" onInput="if (scldelay) scldelay.delayTime.value = event.target.value;if (scrdelay) scrdelay.delayTime.value = event.target.value;"><br>
Chorus depth: <input id="scdepth" type="range" min="0.0005" max="0.004" step="0.0005" value="0.002" style="height: 20px; width: 200px;" onInput="if (scldepth) scldepth.gain.value = event.target.value; if (scrdepth) scrdepth.gain.value = -1.0 * event.target.value;">
</div>
<div id="flangeControls">A stereo flanging effect.<br>
Flanger speed: <input id="sflspeed" type="range" min="0.05" max="2" step="0.05" value="0.15" style="height: 20px; width: 200px;" onInput="if (sflspeed) sflspeed.frequency.value = event.target.value;"><br>
Flanger delay: <input id="sfldelay" type="range" min="0.001" max="0.02" step="0.001" value="0.003" style="height: 20px; width: 200px;" onInput="if (sflldelay) sflldelay.delayTime.value = event.target.value; if (sflrdelay) sflrdelay.delayTime.value = event.target.value;"><br>
Flanger depth: <input id="sfldepth" type="range" min="0.0005" max="0.02" step="0.00025" value="0.005" style="height: 20px; width: 200px;" onInput="if (sflldepth) sflldepth.gain.value = event.target.value; if (sflrdepth) sflrdepth.gain.value = -1.0 * event.target.value;"><br>
Flanger feedback: <input id="sflfb" type="range" min="0" max="1" step="0.01" value="0.9" style="height: 20px; width: 200px;" onInput="if (sfllfb) sfllfb.gain.value = event.target.value; if (sflrfb) sflrfb.gain.value = event.target.value;">
</div>
<div id="doublerControls">A pitch-shifting effect, using sample-accurate delay ramping. Defaults to one octave down.<br>
Pitch-shift: <input id="octpitch" type="range" min="-1" max="1" step="0.05" value="-1" style="height: 20px; width: 200px;" onInput="if (effect.setPitchOffset) effect.setPitchOffset(event.target.value);"><br>
</div>
<div id="modDelayControls">A delay with a basic chorus effect.<br>
Delay time: <input id="mdtime" type="range" min="0.01" max="3" step="0.01" value="0.15" style="height: 20px; width: 200px" onInput="if (mdtime) mdtime.delayTime.value = event.target.value;"><br>
Regen: <input id="mdfeedback" type="range" min="0.0" max="1.0" step="0.01" value="0.5" style="height: 20px; width: 200px;"
onInput="if (mdfeedback) mdfeedback.gain.value = event.target.value;"><br>
Chorus speed: <input id="mdspeed" type="range" min="0.5" max="15" step="0.25" value="3.5" style="height: 20px; width: 200px;" onInput="if (mdspeed) mdspeed.frequency.value = event.target.value;"><br>
Chorus delay: <input id="mddelay" type="range" min="0.005" max="0.055" step="0.005" value="0.03" style="height: 20px; width: 200px;" onInput="if (mddelay) mddelay.delayTime.value = event.target.value;"><br>
Chorus depth: <input id="mddepth" type="range" min="0.0005" max="0.004" step="0.0005" value="0.002" style="height: 20px; width: 200px;" onInput="if (mddepth) mddepth.gain.value = event.target.value;">
</div>
<div id="pingpongControls">A ping-pong delay - bounces stereo channels. Most noticeable with mono signal.<br>
</div>
<div id="lfowahControls">An LFO-controlled low-pass filter.<br>
LFO type:
<select id="lplfotype" onchange="if (lplfo) lplfo.type = event.target.value;">
<option selected="selected" value="sine">SINE</option>
<option value="square">SQUARE</option>
<option value="sawtooth">SAWTOOTH</option>
<option value="triangle">TRIANGLE</option>
</select><br>
LFO speed: <input id="lplfo" type="range" min="0.25" max="20" step="0.25" value="3" style="height: 20px; width: 200px;" onInput="if (lplfo) lplfo.frequency.value = event.target.value;"><br>
LFO depth: <input id="lplfodepth" type="range" min="0.0" max="1.0" step="0.1" value="1.0" style="height: 20px; width: 200px;" onInput="if (lplfodepth) lplfodepth.gain.value = 2500 * event.target.value;">
Filter Q: <input id="lplfoq" type="range" min="0.0" max="20.0" step="0.5" value="3.0" style="height: 20px; width: 200px;" onInput="if (lplfofilter) lplfofilter.Q.value = event.target.value;">
</div>
<div id="envfollowerControls">An envelope follower. Just for testing.<br>
</div>
<div id="autowahControls">An autowah effect.<br>
Envelope follower filter frequency: <input id="awEF" type="range" min="0.25" max="20" step="0.25" value="10" style="height: 20px; width: 200px;" onInput="if (awFollower) awFollower.frequency.value = event.target.value;"><br>
Filter depth (log): <input id="lfo" type="range" min="0" max="4" step="0.1" value="3.5" style="height: 20px; width: 200px;" onInput="if (awDepth) awDepth.gain.value = Math.pow(2,10+parseFloat(event.target.value));"><br>
Filter Q: <input id="awQ" type="range" min="0.0" max="20.0" step="0.1" value="5.0" style="height: 20px; width: 200px;" onInput="if (awFilter) awFilter.Q.value = event.target.value;">
</div>
<div id="noisegateControls">A cheaply-implemented noise gate. Due to how it's implemented, it WILL have chattering problems.<br>
Envelope follower filter frequency: <input id="ngEF" type="range" min="0.25" max="20" step="0.25" value="10" style="height: 20px; width: 200px;" onInput="if (ngFollower) ngFollower.frequency.value = event.target.value;"><br>
Floor: <input id="ngFloor" type="range" min="0.0" max="0.1" step="0.001" value="0.01" style="height: 20px; width: 200px;" onInput="if (ngGate) ngGate.curve = generateNoiseFloorCurve(event.target.value);">
</div>
<div id="wahbassControls">Octave-down + wah + ping-pong.<br>
</div>
<div id="wahdistchorusControls">Wah + distortion + stereo chorus.<br>
</div>
<div id="vibratoControls">Vibrato.<br>
Vibrato speed: <input id="vspeed" type="range" min="0.5" max="15" step="0.25" value="3.5" style="height: 20px; width: 200px;" onInput="if (cspeed) cspeed.frequency.value = event.target.value;"><br>
Vibrato delay: <input id="vdelay" type="range" min="0.005" max="0.055" step="0.005" value="0.03" style="height: 20px; width: 200px;" onInput="if (cdelay) cdelay.delayTime.value = event.target.value;"><br>
Vibrato depth: <input id="vdepth" type="range" min="0.0005" max="0.004" step="0.0005" value="0.002" style="height: 20px; width: 200px;" onInput="if (cdepth) cdepth.gain.value = event.target.value;">
</div>
<div id="bitcrusherControls">Bitcrusher effect.<br>
Bit depth: <input id="bitdepth" type="range" min="1" max="16" step="0.25" value="8" style="height: 20px; width: 200px;" onInput="btcrBits = parseInt(event.target.value);"><br>
Frequency stepping: <input id="btcrFreq" type="range" min="0" max="1" step="0.01" value="1" style="height: 20px; width: 200px;" onInput="btcrNormFreq = parseFloat(event.target.value);">
</div>
<div id="apolloControls">Apollo Quindar tone effect.<br>
Noise floor: <input id="apolloFloor" type="range" min="0.0" max="0.2" step="0.001" value="0.01" style="height: 20px; width: 200px;" onInput="if (apolloGate) apolloGate.curve = generateNoiseFloorCurve(event.target.value);">
</div>
</div>
<!--
<button onclick="this.innerText = toggleSample();">play</button>
-->
</div>
<a href="https://github.com/cwilso/Audio-Input-Effects" style="position: absolute; z-index:2; top: 0; right: 0; border: 0;"><img src="img/forkme.png" alt="Fork me on GitHub"></a>
</body>
</html>