wavesurfer.js 7.0.0-beta.2 → 7.0.0-beta.3

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2012-2023, katspaugh and contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,46 +1,65 @@
-# <img src="https://user-images.githubusercontent.com/381895/226091100-f5567a28-7736-4d37-8f84-e08f297b7e1a.png" alt="logo" height="60" valign="middle" /> wavesurfer.ts
+# <img src="https://user-images.githubusercontent.com/381895/226091100-f5567a28-7736-4d37-8f84-e08f297b7e1a.png" alt="logo" height="60" valign="middle" /> wavesurfer.js
 
 ![npm](https://img.shields.io/npm/v/wavesurfer.js/beta)
 
-A rewrite of [wavesufer.js](https://github.com/wavesurfer-js/wavesurfer.js) in TypeScript with better performance.
+## New TypeScript version
 
-<img alt="screenshot" src="https://user-images.githubusercontent.com/381895/225539680-fc724acd-8657-458e-a558-ff1c6758ba30.png" width="800" />
+wavesurfer.js v7 beta is a TypeScript rewrite of wavesurfer.js that brings several improvements:
+
+ * Typed API for better development experience
+ * Enhanced decoding and rendering performance
+ * New and improved plugins
+
+<img width="674" alt="Screenshot" src="https://github.com/katspaugh/wavesurfer.ts/assets/381895/cde5fe51-be8a-46ff-934e-1d76a827b8bc">
+
+---
+
+ℹ️ Looking for the old stable version? V6 is here: https://github.com/katspaugh/wavesurfer.js/tree/master
+
+---
 
 Try it out:
-```
+
+```bash
 npm install --save wavesurfer.js@beta
 ```
+```js
+import WaveSurfer from 'wavesurfer.js'
+```
 
-Alternatively, import from a CDN or a local file as an ES6 module:
+Alternatively, import it from a CDN as a ES6 module directly in the browser:
 
-```
-import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
-```
+```html
+<script type="module">
+  import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
 
-Or, as a UMD script tag which exposes `WaveSurfer` as a global variable:
+  const wavesurfer = WaveSurfer.create({ ... })
+</script>
 ```
+
+Or, as a UMD script tag which exports the library as a global `WaveSurfer` variable:
+```html
 <script src="https://unpkg.com/wavesurfer.js@beta/dist/wavesurfer.min.js"></script>
 ```
 
 To import a plugin, e.g. the Timeline plugin:
-```
+```js
 import Timeline from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/timeline.js'
 ```
 
 TypeScript types are included in the package, so there's no need to install `@types/wavesurfer.js`.
 
-## Why upgrade to wavesurfer.ts?
+See more [examples](https://wavesurfer.pages.dev/examples/).
 
-wavesurfer.js v7 (aka wavesurfer.ts) brings several improvements:
+## Documentation
 
- * Typed API for better development experience
- * Enhanced decoding and rendering performance
- * New and improved plugins
+See the documentation on wavesurfer.js [methods](https://wavesurfer-ts.pages.dev/docs/classes/wavesurfer.WaveSurfer), [options](https://wavesurfer-ts.pages.dev/docs/types/wavesurfer.WaveSurferOptions) and [events](https://wavesurfer-ts.pages.dev/docs/types/wavesurfer.WaveSurferEvents) on our website.
 
 ## Plugins
+
 The "official" plugins have been completely rewritten and enhanced:
 
- * [Regions](https://wavesurfer.pages.dev/examples/#regions.js) – now also replaces the old Markers plugin
+ * [Regions](https://wavesurfer.pages.dev/examples/#regions.js) – visual overlays and markers for regions of audio
  * [Timeline](https://wavesurfer.pages.dev/examples/#timeline.js) – displays notches and time labels below the waveform
  * [Minimap](https://wavesurfer.pages.dev/examples/#minimap.js) – a small waveform that serves as a scrollbar for the main waveform
  * [Envelope](https://wavesurfer.pages.dev/examples/#envelope.js) – a graphical interface to add fade-in and -out effects and control volume
@@ -68,10 +87,7 @@ You can see which elements you can style in the DOM inspector – they will have
 
 See [this example](https://wavesurfer.pages.dev/examples/#styling.js) for play around with styling.
 
-## Documentation
-See the documentation on wavesurfer.js [methods](https://wavesurfer-ts.pages.dev/docs/classes/wavesurfer.WaveSurfer), [options](https://wavesurfer-ts.pages.dev/docs/types/wavesurfer.WaveSurferOptions) and [events](https://wavesurfer-ts.pages.dev/docs/types/wavesurfer.WaveSurferEvents) on our website.
-
-## Migrating from v6 and lower
+## Migrating from v6
 
 Most options, events, and methods are similar to those in previous versions.
 
@@ -93,6 +109,10 @@ Most options, events, and methods are similar to those in previous versions.
 
 See the complete [documentation of the new API](https://wavesurfer-ts.pages.dev/docs/modules/wavesurfer).
 
+## Questions
+
+Have a question about integrating wavesurfer.js on your website? Feel free to ask in our forum: https://github.com/wavesurfer-js/wavesurfer.js/discussions/categories/q-a
+
 ## Development
 
 To get started with development, follow these steps:
@@ -109,11 +129,20 @@ yarn
 yarn start
 ```
 
-This command will open http://localhost:9090/tutorial in your browser with live reload, allowing you to see the changes as you develop.
+This command will open http://localhost:9090 in your browser with live reload, allowing you to see the changes as you develop.
+
+## Tests
+
+The tests are written in the Cypress framework. They are a mix of e2e and visual regression tests.
+To run the test suite locally:
+
+```
+yarn cypress
+```
 
 ## Feedback
 
-We appreciate your feedback and contributions! Join the conversation and share your thoughts here: https://github.com/wavesurfer-js/wavesurfer.js/discussions/2684
+We appreciate your feedback and contributions! Join the conversation and share your thoughts here: https://github.com/wavesurfer-js/wavesurfer.js/discussions/2789
 
 If you encounter any issues or have suggestions for improvements, please don't hesitate to open an issue or submit a pull request on the GitHub repository.
 

package/dist/plugins/spectrogram-fft.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Calculate FFT - Based on https://github.com/corbanbrook/dsp.js
+ *
+ * @param {Number} bufferSize Buffer size
+ * @param {Number} sampleRate Sample rate
+ * @param {Function} windowFunc Window function
+ * @param {Number} alpha Alpha channel
+ */
+export default function FFT(bufferSize: any, sampleRate: any, windowFunc: any, alpha: any): void;

package/dist/plugins/spectrogram-fft.js

@@ -0,0 +1,150 @@
+// @ts-nocheck
+/**
+ * Calculate FFT - Based on https://github.com/corbanbrook/dsp.js
+ *
+ * @param {Number} bufferSize Buffer size
+ * @param {Number} sampleRate Sample rate
+ * @param {Function} windowFunc Window function
+ * @param {Number} alpha Alpha channel
+ */
+export default function FFT(bufferSize, sampleRate, windowFunc, alpha) {
+    this.bufferSize = bufferSize;
+    this.sampleRate = sampleRate;
+    this.bandwidth = (2 / bufferSize) * (sampleRate / 2);
+    this.sinTable = new Float32Array(bufferSize);
+    this.cosTable = new Float32Array(bufferSize);
+    this.windowValues = new Float32Array(bufferSize);
+    this.reverseTable = new Uint32Array(bufferSize);
+    this.peakBand = 0;
+    this.peak = 0;
+    var i;
+    switch (windowFunc) {
+        case 'bartlett':
+            for (i = 0; i < bufferSize; i++) {
+                this.windowValues[i] = (2 / (bufferSize - 1)) * ((bufferSize - 1) / 2 - Math.abs(i - (bufferSize - 1) / 2));
+            }
+            break;
+        case 'bartlettHann':
+            for (i = 0; i < bufferSize; i++) {
+                this.windowValues[i] =
+                    0.62 - 0.48 * Math.abs(i / (bufferSize - 1) - 0.5) - 0.38 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1));
+            }
+            break;
+        case 'blackman':
+            alpha = alpha || 0.16;
+            for (i = 0; i < bufferSize; i++) {
+                this.windowValues[i] =
+                    (1 - alpha) / 2 -
+                        0.5 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1)) +
+                        (alpha / 2) * Math.cos((4 * Math.PI * i) / (bufferSize - 1));
+            }
+            break;
+        case 'cosine':
+            for (i = 0; i < bufferSize; i++) {
+                this.windowValues[i] = Math.cos((Math.PI * i) / (bufferSize - 1) - Math.PI / 2);
+            }
+            break;
+        case 'gauss':
+            alpha = alpha || 0.25;
+            for (i = 0; i < bufferSize; i++) {
+                this.windowValues[i] = Math.pow(Math.E, -0.5 * Math.pow((i - (bufferSize - 1) / 2) / ((alpha * (bufferSize - 1)) / 2), 2));
+            }
+            break;
+        case 'hamming':
+            for (i = 0; i < bufferSize; i++) {
+                this.windowValues[i] = 0.54 - 0.46 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1));
+            }
+            break;
+        case 'hann':
+        case undefined:
+            for (i = 0; i < bufferSize; i++) {
+                this.windowValues[i] = 0.5 * (1 - Math.cos((Math.PI * 2 * i) / (bufferSize - 1)));
+            }
+            break;
+        case 'lanczoz':
+            for (i = 0; i < bufferSize; i++) {
+                this.windowValues[i] =
+                    Math.sin(Math.PI * ((2 * i) / (bufferSize - 1) - 1)) / (Math.PI * ((2 * i) / (bufferSize - 1) - 1));
+            }
+            break;
+        case 'rectangular':
+            for (i = 0; i < bufferSize; i++) {
+                this.windowValues[i] = 1;
+            }
+            break;
+        case 'triangular':
+            for (i = 0; i < bufferSize; i++) {
+                this.windowValues[i] = (2 / bufferSize) * (bufferSize / 2 - Math.abs(i - (bufferSize - 1) / 2));
+            }
+            break;
+        default:
+            throw Error("No such window function '" + windowFunc + "'");
+    }
+    var limit = 1;
+    var bit = bufferSize >> 1;
+    var i;
+    while (limit < bufferSize) {
+        for (i = 0; i < limit; i++) {
+            this.reverseTable[i + limit] = this.reverseTable[i] + bit;
+        }
+        limit = limit << 1;
+        bit = bit >> 1;
+    }
+    for (i = 0; i < bufferSize; i++) {
+        this.sinTable[i] = Math.sin(-Math.PI / i);
+        this.cosTable[i] = Math.cos(-Math.PI / i);
+    }
+    this.calculateSpectrum = function (buffer) {
+        // Locally scope variables for speed up
+        var bufferSize = this.bufferSize, cosTable = this.cosTable, sinTable = this.sinTable, reverseTable = this.reverseTable, real = new Float32Array(bufferSize), imag = new Float32Array(bufferSize), bSi = 2 / this.bufferSize, sqrt = Math.sqrt, rval, ival, mag, spectrum = new Float32Array(bufferSize / 2);
+        var k = Math.floor(Math.log(bufferSize) / Math.LN2);
+        if (Math.pow(2, k) !== bufferSize) {
+            throw 'Invalid buffer size, must be a power of 2.';
+        }
+        if (bufferSize !== buffer.length) {
+            throw ('Supplied buffer is not the same size as defined FFT. FFT Size: ' +
+                bufferSize +
+                ' Buffer Size: ' +
+                buffer.length);
+        }
+        var halfSize = 1, phaseShiftStepReal, phaseShiftStepImag, currentPhaseShiftReal, currentPhaseShiftImag, off, tr, ti, tmpReal;
+        for (var i = 0; i < bufferSize; i++) {
+            real[i] = buffer[reverseTable[i]] * this.windowValues[reverseTable[i]];
+            imag[i] = 0;
+        }
+        while (halfSize < bufferSize) {
+            phaseShiftStepReal = cosTable[halfSize];
+            phaseShiftStepImag = sinTable[halfSize];
+            currentPhaseShiftReal = 1;
+            currentPhaseShiftImag = 0;
+            for (var fftStep = 0; fftStep < halfSize; fftStep++) {
+                var i = fftStep;
+                while (i < bufferSize) {
+                    off = i + halfSize;
+                    tr = currentPhaseShiftReal * real[off] - currentPhaseShiftImag * imag[off];
+                    ti = currentPhaseShiftReal * imag[off] + currentPhaseShiftImag * real[off];
+                    real[off] = real[i] - tr;
+                    imag[off] = imag[i] - ti;
+                    real[i] += tr;
+                    imag[i] += ti;
+                    i += halfSize << 1;
+                }
+                tmpReal = currentPhaseShiftReal;
+                currentPhaseShiftReal = tmpReal * phaseShiftStepReal - currentPhaseShiftImag * phaseShiftStepImag;
+                currentPhaseShiftImag = tmpReal * phaseShiftStepImag + currentPhaseShiftImag * phaseShiftStepReal;
+            }
+            halfSize = halfSize << 1;
+        }
+        for (var i = 0, N = bufferSize / 2; i < N; i++) {
+            rval = real[i];
+            ival = imag[i];
+            mag = bSi * sqrt(rval * rval + ival * ival);
+            if (mag > this.peak) {
+                this.peakBand = i;
+                this.peak = mag;
+            }
+            spectrum[i] = mag;
+        }
+        return spectrum;
+    };
+}

package/dist/plugins/spectrogram.js

@@ -19,7 +19,7 @@
  */
 // @ts-nocheck
 import BasePlugin from '../base-plugin.js';
-import FFT from './spectrogram-fft.mjs';
+import FFT from './spectrogram-fft.js';
 export default class SpectrogramPlugin extends BasePlugin {
     static create(options) {
         return new SpectrogramPlugin(options || {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.3",
   "license": "BSD-3-Clause",
   "author": "katspaugh",
   "homepage": "https://wavesurfer-js.org",
@@ -17,7 +17,7 @@
   "main": "dist/wavesurfer.js",
   "module": "dist/wavesurfer.js",
   "types": "dist/wavesurfer.d.ts",
-  "browser": "dist/wavesurfer.min.js",
+  "browser": "dist/wavesurfer.js",
   "exports": {
     ".": {
       "import": "dist/wavesurfer.js",