wavesurfer.js 7.5.0 → 7.5.1

package/README.md

@@ -2,13 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/wavesurfer.js)](https://www.npmjs.com/package/wavesurfer.js)
 
-## New TypeScript version
-
-wavesurfer.js v7 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
+**Wavesurfer.js** is an interactive waveform rendering and audio playback library, perfect for web applications. It leverages modern web technologies to provide a robust and visually engaging audio experience.
 
 <img width="626" alt="waveform screenshot" src="https://github.com/katspaugh/wavesurfer.js/assets/381895/05f03bed-800e-4fa1-b09a-82a39a1c62ce">
 
@@ -62,7 +56,7 @@ See the wavesurfer.js documentation on our website:
 
 ## Plugins
 
-The "official" plugins have been completely rewritten and enhanced:
+We maintain a number of official plugins that add various extra features:
 
  * [Regions](https://wavesurfer.xyz/examples/?regions.js) – visual overlays and markers for regions of audio
  * [Timeline](https://wavesurfer.xyz/examples/?timeline.js) – displays notches and time labels below the waveform
@@ -90,7 +84,17 @@ For example:
 You can see which elements you can style in the DOM inspector – they will have a `part` attribute.
 See [this example](https://wavesurfer.xyz/examples/?styling.js) to play around with styling.
 
-## Upgrading from v6
+## v7 – a new TypeScript version
+
+Wavesurfer.js v7 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="749" alt="Screenshot 2023-12-06 at 09 06 30" src="https://github.com/katspaugh/wavesurfer.js/assets/381895/21eca2d9-47c7-461f-82bb-f23993818458">
+
+### Upgrading from v6
 
 Most options, events, and methods are similar to those in previous versions.
 

package/dist/plugins/minimap.d.ts

@@ -6,7 +6,7 @@ import { type WaveSurferOptions } from '../wavesurfer.js';
 export type MinimapPluginOptions = {
     overlayColor?: string;
     insertPosition?: InsertPosition;
-} & WaveSurferOptions;
+} & Partial<WaveSurferOptions>;
 declare const defaultOptions: {
     height: number;
     overlayColor: string;

package/dist/plugins/plugins/minimap.d.ts

@@ -6,7 +6,7 @@ import { type WaveSurferOptions } from '../wavesurfer.js';
 export type MinimapPluginOptions = {
     overlayColor?: string;
     insertPosition?: InsertPosition;
-} & WaveSurferOptions;
+} & Partial<WaveSurferOptions>;
 declare const defaultOptions: {
     height: number;
     overlayColor: string;

package/dist/plugins/plugins/zoom.d.ts

@@ -19,6 +19,7 @@
 import { BasePlugin, BasePluginEvents } from '../base-plugin.js';
 export type ZoomPluginOptions = {
     scale?: number;
+    maxZoom?: number;
 };
 declare const defaultOptions: {
     scale: number;
@@ -32,6 +33,7 @@ declare class ZoomPlugin extends BasePlugin<ZoomPluginEvents, ZoomPluginOptions>
     static create(options?: ZoomPluginOptions): ZoomPlugin;
     onInit(): void;
     private onWheel;
+    private calculateNewZoom;
     destroy(): void;
 }
 export default ZoomPlugin;

package/dist/plugins/zoom.cjs

@@ -1 +1 @@
-"use strict";class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={scale:.2};class i extends t{constructor(e){super(e||{}),this.wrapper=void 0,this.container=null,this.onWheel=e=>{var t;if(!(null===(t=this.wavesurfer)||void 0===t?void 0:t.options.minPxPerSec)||!this.container)return;e.preventDefault();const s=this.wavesurfer.getDuration(),i=this.wavesurfer.options.minPxPerSec,r=e.clientX,n=this.container.clientWidth,o=(this.wavesurfer.getScroll()+r)/i,h=i*(e.deltaY>0?1-this.options.scale:1+this.options.scale),a=n/h*(r/n);h*s<n?(this.wavesurfer.zoom(n/s),this.container.scrollLeft=0):(this.wavesurfer.zoom(h),this.container.scrollLeft=(o-a)*h)},this.options=Object.assign({},s,e)}static create(e){return new i(e)}onInit(){var e;this.wrapper=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.wrapper.addEventListener("wheel",this.onWheel))}destroy(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.onWheel),super.destroy()}}module.exports=i;
+"use strict";class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={scale:.5};class i extends t{constructor(e){super(e||{}),this.wrapper=void 0,this.container=null,this.onWheel=e=>{if(!this.wavesurfer||!this.container||Math.abs(e.deltaX)>=Math.abs(e.deltaY))return;e.preventDefault();const t=this.wavesurfer.getDuration(),s=this.wavesurfer.options.minPxPerSec,i=e.clientX,r=this.container.clientWidth,n=(this.wavesurfer.getScroll()+i)/s,o=this.calculateNewZoom(s,-e.deltaY),h=r/o*(i/r);o*t<r?(this.wavesurfer.zoom(r/t),this.container.scrollLeft=0):(this.wavesurfer.zoom(o),this.container.scrollLeft=(n-h)*o)},this.calculateNewZoom=(e,t)=>{const s=Math.max(0,e+t*this.options.scale);return void 0===this.options.maxZoom?s:Math.min(s,this.options.maxZoom)},this.options=Object.assign({},s,e)}static create(e){return new i(e)}onInit(){var e;this.wrapper=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.wrapper.addEventListener("wheel",this.onWheel))}destroy(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.onWheel),super.destroy()}}module.exports=i;

package/dist/plugins/zoom.d.ts

@@ -19,6 +19,7 @@
 import { BasePlugin, BasePluginEvents } from '../base-plugin.js';
 export type ZoomPluginOptions = {
     scale?: number;
+    maxZoom?: number;
 };
 declare const defaultOptions: {
     scale: number;
@@ -32,6 +33,7 @@ declare class ZoomPlugin extends BasePlugin<ZoomPluginEvents, ZoomPluginOptions>
     static create(options?: ZoomPluginOptions): ZoomPlugin;
     onInit(): void;
     private onWheel;
+    private calculateNewZoom;
     destroy(): void;
 }
 export default ZoomPlugin;

package/dist/plugins/zoom.esm.js

@@ -1 +1 @@
-class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={scale:.2};class i extends t{constructor(e){super(e||{}),this.wrapper=void 0,this.container=null,this.onWheel=e=>{var t;if(!(null===(t=this.wavesurfer)||void 0===t?void 0:t.options.minPxPerSec)||!this.container)return;e.preventDefault();const s=this.wavesurfer.getDuration(),i=this.wavesurfer.options.minPxPerSec,r=e.clientX,n=this.container.clientWidth,o=(this.wavesurfer.getScroll()+r)/i,h=i*(e.deltaY>0?1-this.options.scale:1+this.options.scale),a=n/h*(r/n);h*s<n?(this.wavesurfer.zoom(n/s),this.container.scrollLeft=0):(this.wavesurfer.zoom(h),this.container.scrollLeft=(o-a)*h)},this.options=Object.assign({},s,e)}static create(e){return new i(e)}onInit(){var e;this.wrapper=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.wrapper.addEventListener("wheel",this.onWheel))}destroy(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.onWheel),super.destroy()}}export{i as default};
+class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={scale:.5};class i extends t{constructor(e){super(e||{}),this.wrapper=void 0,this.container=null,this.onWheel=e=>{if(!this.wavesurfer||!this.container||Math.abs(e.deltaX)>=Math.abs(e.deltaY))return;e.preventDefault();const t=this.wavesurfer.getDuration(),s=this.wavesurfer.options.minPxPerSec,i=e.clientX,r=this.container.clientWidth,n=(this.wavesurfer.getScroll()+i)/s,o=this.calculateNewZoom(s,-e.deltaY),h=r/o*(i/r);o*t<r?(this.wavesurfer.zoom(r/t),this.container.scrollLeft=0):(this.wavesurfer.zoom(o),this.container.scrollLeft=(n-h)*o)},this.calculateNewZoom=(e,t)=>{const s=Math.max(0,e+t*this.options.scale);return void 0===this.options.maxZoom?s:Math.min(s,this.options.maxZoom)},this.options=Object.assign({},s,e)}static create(e){return new i(e)}onInit(){var e;this.wrapper=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.wrapper.addEventListener("wheel",this.onWheel))}destroy(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.onWheel),super.destroy()}}export{i as default};

package/dist/plugins/zoom.js

@@ -1 +1 @@
-class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={scale:.2};class i extends t{constructor(e){super(e||{}),this.wrapper=void 0,this.container=null,this.onWheel=e=>{var t;if(!(null===(t=this.wavesurfer)||void 0===t?void 0:t.options.minPxPerSec)||!this.container)return;e.preventDefault();const s=this.wavesurfer.getDuration(),i=this.wavesurfer.options.minPxPerSec,r=e.clientX,n=this.container.clientWidth,o=(this.wavesurfer.getScroll()+r)/i,h=i*(e.deltaY>0?1-this.options.scale:1+this.options.scale),a=n/h*(r/n);h*s<n?(this.wavesurfer.zoom(n/s),this.container.scrollLeft=0):(this.wavesurfer.zoom(h),this.container.scrollLeft=(o-a)*h)},this.options=Object.assign({},s,e)}static create(e){return new i(e)}onInit(){var e;this.wrapper=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.wrapper.addEventListener("wheel",this.onWheel))}destroy(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.onWheel),super.destroy()}}export{i as default};
+class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={scale:.5};class i extends t{constructor(e){super(e||{}),this.wrapper=void 0,this.container=null,this.onWheel=e=>{if(!this.wavesurfer||!this.container||Math.abs(e.deltaX)>=Math.abs(e.deltaY))return;e.preventDefault();const t=this.wavesurfer.getDuration(),s=this.wavesurfer.options.minPxPerSec,i=e.clientX,r=this.container.clientWidth,n=(this.wavesurfer.getScroll()+i)/s,o=this.calculateNewZoom(s,-e.deltaY),h=r/o*(i/r);o*t<r?(this.wavesurfer.zoom(r/t),this.container.scrollLeft=0):(this.wavesurfer.zoom(o),this.container.scrollLeft=(n-h)*o)},this.calculateNewZoom=(e,t)=>{const s=Math.max(0,e+t*this.options.scale);return void 0===this.options.maxZoom?s:Math.min(s,this.options.maxZoom)},this.options=Object.assign({},s,e)}static create(e){return new i(e)}onInit(){var e;this.wrapper=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.wrapper.addEventListener("wheel",this.onWheel))}destroy(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.onWheel),super.destroy()}}export{i as default};

package/dist/plugins/zoom.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.Zoom=t())}(this,(function(){"use strict";class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={scale:.2};class i extends t{constructor(e){super(e||{}),this.wrapper=void 0,this.container=null,this.onWheel=e=>{var t;if(!(null===(t=this.wavesurfer)||void 0===t?void 0:t.options.minPxPerSec)||!this.container)return;e.preventDefault();const s=this.wavesurfer.getDuration(),i=this.wavesurfer.options.minPxPerSec,r=e.clientX,n=this.container.clientWidth,o=(this.wavesurfer.getScroll()+r)/i,h=i*(e.deltaY>0?1-this.options.scale:1+this.options.scale),a=n/h*(r/n);h*s<n?(this.wavesurfer.zoom(n/s),this.container.scrollLeft=0):(this.wavesurfer.zoom(h),this.container.scrollLeft=(o-a)*h)},this.options=Object.assign({},s,e)}static create(e){return new i(e)}onInit(){var e;this.wrapper=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.wrapper.addEventListener("wheel",this.onWheel))}destroy(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.onWheel),super.destroy()}}return i}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.Zoom=t())}(this,(function(){"use strict";class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={scale:.5};class i extends t{constructor(e){super(e||{}),this.wrapper=void 0,this.container=null,this.onWheel=e=>{if(!this.wavesurfer||!this.container||Math.abs(e.deltaX)>=Math.abs(e.deltaY))return;e.preventDefault();const t=this.wavesurfer.getDuration(),s=this.wavesurfer.options.minPxPerSec,i=e.clientX,r=this.container.clientWidth,n=(this.wavesurfer.getScroll()+i)/s,o=this.calculateNewZoom(s,-e.deltaY),h=r/o*(i/r);o*t<r?(this.wavesurfer.zoom(r/t),this.container.scrollLeft=0):(this.wavesurfer.zoom(o),this.container.scrollLeft=(n-h)*o)},this.calculateNewZoom=(e,t)=>{const s=Math.max(0,e+t*this.options.scale);return void 0===this.options.maxZoom?s:Math.min(s,this.options.maxZoom)},this.options=Object.assign({},s,e)}static create(e){return new i(e)}onInit(){var e;this.wrapper=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper(),this.wrapper&&(this.container=this.wrapper.parentElement,this.wrapper.addEventListener("wheel",this.onWheel))}destroy(){this.wrapper&&this.wrapper.removeEventListener("wheel",this.onWheel),super.destroy()}}return i}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "7.5.0",
+  "version": "7.5.1",
   "license": "BSD-3-Clause",
   "author": "katspaugh",
   "description": "Navigable audio waveform player",