@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.
Files changed (51) hide show
  1. package/README.md +8 -10
  2. package/dist/reverb.es.js +188 -0
  3. package/dist/reverb.umd.js +10 -0
  4. package/package.json +59 -44
  5. package/types/Meta.d.ts +4 -0
  6. package/types/Meta.d.ts.map +1 -0
  7. package/types/NoiseType.d.ts +14 -0
  8. package/types/NoiseType.d.ts.map +1 -0
  9. package/types/Reverb.d.ts +118 -0
  10. package/types/Reverb.d.ts.map +1 -0
  11. package/{src/interfaces/MetaInterface.ts → types/interfaces/MetaInterface.d.ts} +2 -3
  12. package/{dist → types}/interfaces/MetaInterface.d.ts.map +1 -1
  13. package/{src/interfaces/OptionInterface.ts → types/interfaces/OptionInterface.d.ts} +5 -5
  14. package/types/interfaces/OptionInterface.d.ts.map +1 -0
  15. package/.eslintignore +0 -4
  16. package/.eslintrc.js +0 -21
  17. package/.gitattributes +0 -1
  18. package/.prettierrc.js +0 -3
  19. package/bin/reverb.js +0 -432
  20. package/bin/reverb.js.map +0 -1
  21. package/bin/reverb.min.js +0 -2
  22. package/bin/reverb.min.js.LICENSE.txt +0 -11
  23. package/dist/Meta.d.ts +0 -4
  24. package/dist/Meta.d.ts.map +0 -1
  25. package/dist/Meta.js +0 -9
  26. package/dist/Meta.js.map +0 -1
  27. package/dist/NoiseType.d.ts +0 -7
  28. package/dist/NoiseType.d.ts.map +0 -1
  29. package/dist/NoiseType.js +0 -12
  30. package/dist/NoiseType.js.map +0 -1
  31. package/dist/Reverb.d.ts +0 -114
  32. package/dist/Reverb.d.ts.map +0 -1
  33. package/dist/Reverb.js +0 -331
  34. package/dist/Reverb.js.map +0 -1
  35. package/dist/interfaces/MetaInterface.d.ts +0 -10
  36. package/dist/interfaces/MetaInterface.js +0 -3
  37. package/dist/interfaces/MetaInterface.js.map +0 -1
  38. package/dist/interfaces/OptionInterface.d.ts +0 -25
  39. package/dist/interfaces/OptionInterface.d.ts.map +0 -1
  40. package/dist/interfaces/OptionInterface.js +0 -3
  41. package/dist/interfaces/OptionInterface.js.map +0 -1
  42. package/docs/demo.wav +0 -0
  43. package/docs/index.html +0 -365
  44. package/docs/localaudio.html +0 -718
  45. package/docs/reverb.js +0 -432
  46. package/docs/reverb.js.map +0 -1
  47. package/src/Meta.ts +0 -8
  48. package/src/NoiseType.ts +0 -7
  49. package/src/Reverb.ts +0 -366
  50. package/tsconfig.json +0 -32
  51. 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
- &copy; 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>