@logue/reverb 0.4.4 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -10
- package/dist/reverb.es.js +188 -0
- package/dist/reverb.umd.js +10 -0
- package/package.json +59 -44
- package/types/Meta.d.ts +4 -0
- package/types/Meta.d.ts.map +1 -0
- package/types/NoiseType.d.ts +14 -0
- package/types/NoiseType.d.ts.map +1 -0
- package/types/Reverb.d.ts +118 -0
- package/types/Reverb.d.ts.map +1 -0
- package/{src/interfaces/MetaInterface.ts → types/interfaces/MetaInterface.d.ts} +2 -3
- package/{dist → types}/interfaces/MetaInterface.d.ts.map +1 -1
- package/{src/interfaces/OptionInterface.ts → types/interfaces/OptionInterface.d.ts} +5 -5
- package/types/interfaces/OptionInterface.d.ts.map +1 -0
- package/.eslintignore +0 -4
- package/.eslintrc.js +0 -21
- package/.gitattributes +0 -1
- package/.prettierrc.js +0 -3
- package/bin/reverb.js +0 -432
- package/bin/reverb.js.map +0 -1
- package/bin/reverb.min.js +0 -2
- package/bin/reverb.min.js.LICENSE.txt +0 -11
- package/dist/Meta.d.ts +0 -4
- package/dist/Meta.d.ts.map +0 -1
- package/dist/Meta.js +0 -9
- package/dist/Meta.js.map +0 -1
- package/dist/NoiseType.d.ts +0 -7
- package/dist/NoiseType.d.ts.map +0 -1
- package/dist/NoiseType.js +0 -12
- package/dist/NoiseType.js.map +0 -1
- package/dist/Reverb.d.ts +0 -114
- package/dist/Reverb.d.ts.map +0 -1
- package/dist/Reverb.js +0 -331
- package/dist/Reverb.js.map +0 -1
- package/dist/interfaces/MetaInterface.d.ts +0 -10
- package/dist/interfaces/MetaInterface.js +0 -3
- package/dist/interfaces/MetaInterface.js.map +0 -1
- package/dist/interfaces/OptionInterface.d.ts +0 -25
- package/dist/interfaces/OptionInterface.d.ts.map +0 -1
- package/dist/interfaces/OptionInterface.js +0 -3
- package/dist/interfaces/OptionInterface.js.map +0 -1
- package/docs/demo.wav +0 -0
- package/docs/index.html +0 -365
- package/docs/localaudio.html +0 -718
- package/docs/reverb.js +0 -432
- package/docs/reverb.js.map +0 -1
- package/src/Meta.ts +0 -8
- package/src/NoiseType.ts +0 -7
- package/src/Reverb.ts +0 -366
- package/tsconfig.json +0 -32
- package/webpack.config.ts +0 -102
package/docs/index.html
DELETED
|
@@ -1,365 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" class="h-100">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
7
|
-
<meta name="description" content="Reverb effect written in JavaScript." />
|
|
8
|
-
<meta name="author" content="Masashi Yoshikawa" />
|
|
9
|
-
<!-- ogp -->
|
|
10
|
-
<meta property="og:title" content="JavaScript Reverb Effect Test" />
|
|
11
|
-
<meta property="og:type" content="article" />
|
|
12
|
-
<meta property="og:url" content="https://logue.github.io/Reverb.js/" />
|
|
13
|
-
<meta property="og:image"
|
|
14
|
-
content="https://repository-images.githubusercontent.com/194181712/20bdd780-9995-11e9-8811-42e3b44d1cec" />
|
|
15
|
-
<meta property="og:site_name" content="Logue's Lab" />
|
|
16
|
-
<meta property="og:description" content="Reverb effect written in JavaScript." />
|
|
17
|
-
<meta property="fb:app_id" content="129144050466298" />
|
|
18
|
-
<meta property="article:publisher" content="https://www.facebook.com/logue256" />
|
|
19
|
-
<meta name="twitter:card" content="Summary" />
|
|
20
|
-
<meta name="twitter:site" content="@logue256" />
|
|
21
|
-
<meta name="twitter:title" content="JavaScript Reverb Effect Test" />
|
|
22
|
-
<meta name="twitter:url" content="https://logue.dev/Reverb.js/" />
|
|
23
|
-
<meta name="twitter:description" content="Reverb effect written in JavaScript." />
|
|
24
|
-
<meta name="twitter:image"
|
|
25
|
-
content="https://repository-images.githubusercontent.com/194181712/20bdd780-9995-11e9-8811-42e3b44d1cec" />
|
|
26
|
-
<title>Reverb.js Demo</title>
|
|
27
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
28
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-33600926-1"></script>
|
|
29
|
-
<script>
|
|
30
|
-
window.dataLayer = window.dataLayer || [];
|
|
31
|
-
function gtag() {
|
|
32
|
-
dataLayer.push(arguments);
|
|
33
|
-
}
|
|
34
|
-
gtag('js', new Date());
|
|
35
|
-
|
|
36
|
-
gtag('config', 'UA-33600926-1');
|
|
37
|
-
</script>
|
|
38
|
-
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net/" />
|
|
39
|
-
<!-- Bootstrap core CSS -->
|
|
40
|
-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
41
|
-
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
|
|
42
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
|
|
43
|
-
integrity="sha256-PDJQdTN7dolQWDASIoBVrjkuOEaI137FI15sqI3Oxu8=" crossorigin="anonymous" />
|
|
44
|
-
</head>
|
|
45
|
-
|
|
46
|
-
<body class="d-flex flex-column h-100">
|
|
47
|
-
<header>
|
|
48
|
-
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
|
|
49
|
-
<div class="container-fluid d-flex justify-content-between">
|
|
50
|
-
<a class="navbar-brand" href="#">smfplayer.js</a>
|
|
51
|
-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
|
|
52
|
-
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
|
53
|
-
<span class="navbar-toggler-icon"></span>
|
|
54
|
-
</button>
|
|
55
|
-
<div class="collapse navbar-collapse flex-grow-0" id="navbarCollapse">
|
|
56
|
-
<ul class="navbar-nav">
|
|
57
|
-
<li class="nav-item">
|
|
58
|
-
<a class="nav-link" aria-current="page" href="https://logue.dev/">Home</a>
|
|
59
|
-
</li>
|
|
60
|
-
<li class="nav-item">
|
|
61
|
-
<a class="nav-link" href="https://github.com/logue/Reverb.js"><em class="bi bi-github"></em></a>
|
|
62
|
-
</li>
|
|
63
|
-
</ul>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
66
|
-
</nav>
|
|
67
|
-
</header>
|
|
68
|
-
|
|
69
|
-
<!-- Begin page content -->
|
|
70
|
-
<main role="main" class="flex-shrink-0 mt-2">
|
|
71
|
-
<div class="container">
|
|
72
|
-
<h1>Reverb.js Demo</h1>
|
|
73
|
-
<p>Refer to the console log for the values.</p>
|
|
74
|
-
<button id="play" class="btn btn-primary" disabled>
|
|
75
|
-
<em class="bi bi-play"></em> Play
|
|
76
|
-
</button>
|
|
77
|
-
<button id="stop" class="btn btn-secondary" disabled>
|
|
78
|
-
<em class="bi bi-stop"></em> Stop
|
|
79
|
-
</button>
|
|
80
|
-
<hr />
|
|
81
|
-
<h2>Reverb Control</h2>
|
|
82
|
-
<div class="form-check form-switch">
|
|
83
|
-
<input id="reverb" type="checkbox" class="form-check-input" />
|
|
84
|
-
<label class="form-check-label" for="reverb">Reverb</label>
|
|
85
|
-
</div>
|
|
86
|
-
<p>
|
|
87
|
-
Changing these values will regenerate the impulse response each time,
|
|
88
|
-
but due to its nature, it will take some time to see the effect. It
|
|
89
|
-
may be helpful to maximize the value of Wet.
|
|
90
|
-
</p>
|
|
91
|
-
<div class="row">
|
|
92
|
-
<div class="col-md">
|
|
93
|
-
<label for="time" class="form-label">Time <small>(Room size)</small></label>
|
|
94
|
-
<input type="range" class="form-range" title="1.1" value="1.1" min="0" max="50" id="time" />
|
|
95
|
-
</div>
|
|
96
|
-
<div class="col-md">
|
|
97
|
-
<label for="decay" class="form-label">Decay <small>(Hardness of room wall)</small></label>
|
|
98
|
-
<input type="range" class="form-range" title="2" value="2" min="0" max="100" id="decay" />
|
|
99
|
-
</div>
|
|
100
|
-
<div class="col-md">
|
|
101
|
-
<label for="delay" class="form-label">Delay
|
|
102
|
-
<small>(Delays due to obstacles in front of room walls)</small></label>
|
|
103
|
-
<input type="range" class="form-range" title="0" value="0" min="0" max="100" id="delay" />
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
<div class="row">
|
|
107
|
-
<div class="col-md">
|
|
108
|
-
<label for="mix" class="form-label">Dry / Wet</label>
|
|
109
|
-
<div class="d-flex mb-3">
|
|
110
|
-
<div>Dry</div>
|
|
111
|
-
<input type="range" id="mix" class="form-range" min="0" max="1" step="0.05" value="0.5" />
|
|
112
|
-
<div>Wet</div>
|
|
113
|
-
</div>
|
|
114
|
-
</div>
|
|
115
|
-
<fieldset class="col-md">
|
|
116
|
-
<legend>Inpulse Response Noise algorithm</legend>
|
|
117
|
-
<div class="form-check form-check-inline">
|
|
118
|
-
<input class="form-check-input" type="radio" name="noise" id="white" value="0" checked />
|
|
119
|
-
<label class="form-check-label" for="white">White Noise</label>
|
|
120
|
-
</div>
|
|
121
|
-
<div class="form-check form-check-inline">
|
|
122
|
-
<input class="form-check-input" type="radio" name="noise" id="pink" value="1" />
|
|
123
|
-
<label class="form-check-label" for="pink">Pink Noise</label>
|
|
124
|
-
</div>
|
|
125
|
-
<div class="form-check form-check-inline">
|
|
126
|
-
<input class="form-check-input" type="radio" name="noise" id="brown" value="2" />
|
|
127
|
-
<label class="form-check-label" for="brown">Brown Noise</label>
|
|
128
|
-
</div>
|
|
129
|
-
<div class="form-check form-switch">
|
|
130
|
-
<input type="checkbox" class="form-check-input" id="reverse" />
|
|
131
|
-
<label class="form-check-label" for="reverse">Reverse</label>
|
|
132
|
-
</div>
|
|
133
|
-
</fieldset>
|
|
134
|
-
</div>
|
|
135
|
-
<h2>Filter for IR</h2>
|
|
136
|
-
<p>
|
|
137
|
-
If the value of the filter is allpass, the filtering will be bypassed.
|
|
138
|
-
</p>
|
|
139
|
-
<div class="row">
|
|
140
|
-
<div class="col-md">
|
|
141
|
-
<label for="filter" class="form-label">Filter Type</label>
|
|
142
|
-
<select id="filter" class="form-select">
|
|
143
|
-
<option value="lowpass" selected="selected">lowpass</option>
|
|
144
|
-
<option value="highpass">highpass</option>
|
|
145
|
-
<option value="bandpass">bandpass</option>
|
|
146
|
-
<option value="lowshelf">lowshelf</option>
|
|
147
|
-
<option value="highshelf">highshelf</option>
|
|
148
|
-
<option value="peaking">peaking</option>
|
|
149
|
-
<option value="notch">notch</option>
|
|
150
|
-
<option value="allpass">allpass (Through)</option>
|
|
151
|
-
</select>
|
|
152
|
-
</div>
|
|
153
|
-
<div class="col-md">
|
|
154
|
-
<label for="freq" class="form-label">Filter frequency</label>
|
|
155
|
-
<input type="range" class="form-range" value="2500" min="20" max="5000" step="5" id="freq" />
|
|
156
|
-
</div>
|
|
157
|
-
<div class="col-md">
|
|
158
|
-
<label for="freq" class="form-label">Quality (Q) value</label>
|
|
159
|
-
<input type="range" class="form-range" value="1" min=".0001" max="10" step=".0005" id="q" />
|
|
160
|
-
</div>
|
|
161
|
-
</div>
|
|
162
|
-
<h2>FFT</h2>
|
|
163
|
-
<div class="overflow-auto">
|
|
164
|
-
<canvas id="graph" width="512" height="256"></canvas>
|
|
165
|
-
</div>
|
|
166
|
-
<p class="text-right">
|
|
167
|
-
The sound uses the drum part of
|
|
168
|
-
<a href="https://soundcloud.com/logue256/autumn-wind" target="_blank"><em class="bi bi-soundwave"></em> Autmun
|
|
169
|
-
Wind</a>.
|
|
170
|
-
</p>
|
|
171
|
-
</div>
|
|
172
|
-
</main>
|
|
173
|
-
|
|
174
|
-
<footer class="footer mt-auto py-3 bg-light">
|
|
175
|
-
<div class="container">
|
|
176
|
-
<address class="text-muted">
|
|
177
|
-
© 2019-2021 by Logue / MIT License.
|
|
178
|
-
</address>
|
|
179
|
-
</div>
|
|
180
|
-
</footer>
|
|
181
|
-
<script src="reverb.js"></script>
|
|
182
|
-
<script>
|
|
183
|
-
// Setup Audio Context
|
|
184
|
-
const AudioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
|
185
|
-
|
|
186
|
-
// Defreeze AudioContext for iOS.
|
|
187
|
-
document.addEventListener('touchstart', initAudioContext);
|
|
188
|
-
function initAudioContext() {
|
|
189
|
-
document.removeEventListener('touchstart', initAudioContext);
|
|
190
|
-
// wake up AudioContext
|
|
191
|
-
const emptySource = AudioCtxtx.createBufferSource();
|
|
192
|
-
emptySource.start();
|
|
193
|
-
emptySource.stop();
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
// Setup Reverb Class
|
|
197
|
-
const reverb = new Reverb.default(AudioCtx);
|
|
198
|
-
console.info(
|
|
199
|
-
'Reverb.js loaded. (version:' +
|
|
200
|
-
reverb.version +
|
|
201
|
-
' / build: ' +
|
|
202
|
-
reverb.build +
|
|
203
|
-
')'
|
|
204
|
-
);
|
|
205
|
-
const AudioSrc = AudioCtx.createBufferSource();
|
|
206
|
-
|
|
207
|
-
// Load audio file and decode asyncly.
|
|
208
|
-
const LoadSample = url => {
|
|
209
|
-
return new Promise(resolve => {
|
|
210
|
-
fetch(url)
|
|
211
|
-
.then(response => response.arrayBuffer())
|
|
212
|
-
.then(arraybuf =>
|
|
213
|
-
AudioCtx.decodeAudioData(
|
|
214
|
-
arraybuf,
|
|
215
|
-
buffer => {
|
|
216
|
-
resolve(buffer);
|
|
217
|
-
},
|
|
218
|
-
e => alert(e)
|
|
219
|
-
)
|
|
220
|
-
)
|
|
221
|
-
.catch(e => alert(e));
|
|
222
|
-
});
|
|
223
|
-
};
|
|
224
|
-
|
|
225
|
-
// Draw FFT to canvas
|
|
226
|
-
// Code taken from https://www.g200kg.com/jp/docs/webaudio/filter.html
|
|
227
|
-
const AnalyserNode = AudioCtx.createAnalyser();
|
|
228
|
-
const canvas = document.getElementById('graph');
|
|
229
|
-
const canvasContext = canvas.getContext('2d');
|
|
230
|
-
|
|
231
|
-
const analysedata = new Float32Array(1024);
|
|
232
|
-
const DrawGraph = () => {
|
|
233
|
-
AnalyserNode.getFloatFrequencyData(analysedata);
|
|
234
|
-
// Background
|
|
235
|
-
canvasContext.fillStyle = '#343a40';
|
|
236
|
-
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
|
|
237
|
-
// FFT Graph
|
|
238
|
-
canvasContext.fillStyle = document.getElementById('reverb').checked
|
|
239
|
-
? '#17a2b8'
|
|
240
|
-
: '#28a745';
|
|
241
|
-
for (let i = 0; i < canvas.width; ++i) {
|
|
242
|
-
const f = (AudioCtx.sampleRate * i) / (canvas.width * 2);
|
|
243
|
-
y = canvas.height / 2 + (analysedata[i] + 48.16) * 2.56;
|
|
244
|
-
canvasContext.fillRect(i, canvas.height - y, 1, y);
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
// y axis (dB)
|
|
248
|
-
for (let d = -50; d < 50; d += 10) {
|
|
249
|
-
const y = (canvas.height / 2 - (d * canvas.height) / 100) | 0;
|
|
250
|
-
// Line
|
|
251
|
-
canvasContext.fillStyle = '#6c757d';
|
|
252
|
-
canvasContext.fillRect(20, y, canvas.width, 1);
|
|
253
|
-
// Label
|
|
254
|
-
canvasContext.fillStyle = '#fd7e14';
|
|
255
|
-
canvasContext.fillText(d + 'dB', 5, y);
|
|
256
|
-
}
|
|
257
|
-
canvasContext.fillStyle = '#ffc107';
|
|
258
|
-
canvasContext.fillRect(20, canvas.height / 2, canvas.width, 1);
|
|
259
|
-
|
|
260
|
-
// x axis (frequency)
|
|
261
|
-
for (let f = 2200; f < AudioCtx.sampleRate / 2; f += 2000) {
|
|
262
|
-
const x = ((f * (canvas.width * 2)) / AudioCtx.sampleRate) | 0;
|
|
263
|
-
// Line
|
|
264
|
-
canvasContext.fillStyle = '#6c757d';
|
|
265
|
-
canvasContext.fillRect(x, 0, 1, canvas.height - 10);
|
|
266
|
-
// Label
|
|
267
|
-
if (x % 4 == 0) {
|
|
268
|
-
canvasContext.fillStyle = '#e83e8c';
|
|
269
|
-
canvasContext.fillText(f / 1000 + 'kHz', x - 10, canvas.height - 1);
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
};
|
|
273
|
-
|
|
274
|
-
// Reverb switch handler
|
|
275
|
-
const setReverb = () => {
|
|
276
|
-
AudioSrc.disconnect();
|
|
277
|
-
|
|
278
|
-
if (document.getElementById('reverb').checked) {
|
|
279
|
-
// Connect Reverb
|
|
280
|
-
reverb.connect(AudioSrc).connect(AnalyserNode);
|
|
281
|
-
} else {
|
|
282
|
-
reverb.disconnect(AudioSrc).connect(AnalyserNode);
|
|
283
|
-
}
|
|
284
|
-
AnalyserNode.connect(AudioCtx.destination);
|
|
285
|
-
};
|
|
286
|
-
|
|
287
|
-
window.addEventListener('load', async () => {
|
|
288
|
-
const sound = await LoadSample('./demo.wav');
|
|
289
|
-
|
|
290
|
-
// Draw FFT
|
|
291
|
-
setInterval(DrawGraph, 10);
|
|
292
|
-
|
|
293
|
-
// remove disabled
|
|
294
|
-
document.getElementById('play').disabled = '';
|
|
295
|
-
document.getElementById('stop').disabled = '';
|
|
296
|
-
|
|
297
|
-
// Play button
|
|
298
|
-
document.getElementById('play').addEventListener('click', () => {
|
|
299
|
-
if (AudioCtx.state == 'suspended') AudioCtx.resume();
|
|
300
|
-
if (AudioSrc.buffer == null) {
|
|
301
|
-
AudioSrc.buffer = sound;
|
|
302
|
-
AudioSrc.loop = true;
|
|
303
|
-
|
|
304
|
-
setReverb();
|
|
305
|
-
AudioSrc.start();
|
|
306
|
-
}
|
|
307
|
-
});
|
|
308
|
-
|
|
309
|
-
// Stop button
|
|
310
|
-
document.getElementById('stop').addEventListener('click', () => {
|
|
311
|
-
if (AudioSrc.buffer) AudioSrc.stop();
|
|
312
|
-
});
|
|
313
|
-
|
|
314
|
-
// Reverb switch button
|
|
315
|
-
document.getElementById('reverb').addEventListener('click', setReverb);
|
|
316
|
-
// Reverse checkbox
|
|
317
|
-
document
|
|
318
|
-
.getElementById('reverse')
|
|
319
|
-
.addEventListener('click', e => reverb.reverse(e.target.checked));
|
|
320
|
-
// Reverb dualation time
|
|
321
|
-
document.getElementById('time').addEventListener('change', e => {
|
|
322
|
-
reverb.time(e.target.value);
|
|
323
|
-
e.target.title = e.target.value;
|
|
324
|
-
});
|
|
325
|
-
// Decay time
|
|
326
|
-
document.getElementById('decay').addEventListener('change', e => {
|
|
327
|
-
reverb.decay(e.target.value);
|
|
328
|
-
e.target.title = e.target.value;
|
|
329
|
-
});
|
|
330
|
-
// Delay time
|
|
331
|
-
document.getElementById('delay').addEventListener('change', e => {
|
|
332
|
-
reverb.delay(e.target.value);
|
|
333
|
-
e.target.title = e.target.value;
|
|
334
|
-
});
|
|
335
|
-
// Filter select box
|
|
336
|
-
document.getElementById('filter').addEventListener('change', e => {
|
|
337
|
-
reverb.filterType(e.target.value);
|
|
338
|
-
e.target.title = e.target.value;
|
|
339
|
-
});
|
|
340
|
-
// Filter frequency
|
|
341
|
-
document.getElementById('freq').addEventListener('change', e => {
|
|
342
|
-
reverb.filterFreq(e.target.value);
|
|
343
|
-
e.target.title = e.target.value;
|
|
344
|
-
});
|
|
345
|
-
// Filter quality
|
|
346
|
-
document.getElementById('q').addEventListener('change', e => {
|
|
347
|
-
reverb.filterQ(e.target.value);
|
|
348
|
-
e.target.title = e.target.value;
|
|
349
|
-
});
|
|
350
|
-
// Dry/Wet
|
|
351
|
-
document.getElementById('mix').addEventListener('change', e => {
|
|
352
|
-
reverb.mix(e.target.value);
|
|
353
|
-
e.target.title = e.target.value;
|
|
354
|
-
});
|
|
355
|
-
// Noise Type
|
|
356
|
-
document
|
|
357
|
-
.querySelectorAll('[name=noise]')
|
|
358
|
-
.forEach(dom =>
|
|
359
|
-
dom.addEventListener('click', e => reverb.setNoise(e.target.value))
|
|
360
|
-
);
|
|
361
|
-
});
|
|
362
|
-
</script>
|
|
363
|
-
</body>
|
|
364
|
-
|
|
365
|
-
</html>
|