wavesurfer.js 7.0.0-alpha.17 → 7.0.0-alpha.19

package/dist/base-plugin.d.ts

@@ -1,8 +1,8 @@
 import EventEmitter, { type GeneralEventTypes } from './event-emitter.js';
-import type { WaveSurfer, WaveSurferPluginParams } from './index.js';
+import WaveSurfer, { type WaveSurferPluginParams } from './index.js';
 export declare class BasePlugin<EventTypes extends GeneralEventTypes, Options> extends EventEmitter<EventTypes> {
     protected wavesurfer: WaveSurfer;
-    protected container: ShadowRoot | HTMLElement;
+    protected container: HTMLElement;
     protected wrapper: HTMLElement;
     protected subscriptions: (() => void)[];
     protected options: Options;

package/dist/base-plugin.js

@@ -1,8 +1,12 @@
 import EventEmitter from './event-emitter.js';
 export class BasePlugin extends EventEmitter {
+    wavesurfer;
+    container;
+    wrapper;
+    subscriptions = [];
+    options;
     constructor(params, options) {
         super();
-        this.subscriptions = [];
         this.wavesurfer = params.wavesurfer;
         this.container = params.container;
         this.wrapper = params.wrapper;

package/dist/decoder.js

@@ -1,13 +1,5 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 class Decoder {
+    audioCtx = null;
     initAudioContext(sampleRate) {
         this.audioCtx = new AudioContext({
             latencyHint: 'playback',
@@ -15,7 +7,6 @@ class Decoder {
         });
     }
     constructor() {
-        this.audioCtx = null;
         // Minimum sample rate supported by Web Audio API
         const DEFAULT_SAMPLE_RATE = 3000; // Chrome, Safari
         const FALLBACK_SAMPLE_RATE = 8000; // Firefox
@@ -26,17 +17,14 @@ class Decoder {
             this.initAudioContext(FALLBACK_SAMPLE_RATE);
         }
     }
-    decode(audioData) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.audioCtx) {
-                throw new Error('AudioContext is not initialized');
-            }
-            return this.audioCtx.decodeAudioData(audioData);
-        });
+    async decode(audioData) {
+        if (!this.audioCtx) {
+            throw new Error('AudioContext is not initialized');
+        }
+        return this.audioCtx.decodeAudioData(audioData);
     }
     destroy() {
-        var _a;
-        (_a = this.audioCtx) === null || _a === void 0 ? void 0 : _a.close();
+        this.audioCtx?.close();
         this.audioCtx = null;
     }
 }

package/dist/event-emitter.js

@@ -1,4 +1,5 @@
 class EventEmitter {
+    eventTarget;
     constructor() {
         this.eventTarget = new EventTarget();
     }

package/dist/fetcher.js

@@ -1,17 +1,6 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 class Fetcher {
-    load(url) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return fetch(url).then((response) => response.arrayBuffer());
-        });
+    async load(url) {
+        return fetch(url).then((response) => response.arrayBuffer());
     }
 }
 export default Fetcher;

package/dist/index.d.ts

@@ -35,6 +35,8 @@ export type WaveSurferOptions = {
     autoplay?: boolean;
     /** Is the waveform clickable? */
     interactive?: boolean;
+    /** Hide scrollbar **/
+    noScrollbar?: boolean;
 };
 export type WaveSurferEvents = {
     decode: {
@@ -61,10 +63,10 @@ export type WaveSurferEvents = {
 };
 export type WaveSurferPluginParams = {
     wavesurfer: WaveSurfer;
-    container: ShadowRoot;
+    container: HTMLElement;
     wrapper: HTMLElement;
 };
-export declare class WaveSurfer extends EventEmitter<WaveSurferEvents> {
+declare class WaveSurfer extends EventEmitter<WaveSurferEvents> {
     private options;
     private fetcher;
     private decoder;

package/dist/index.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import Fetcher from './fetcher.js';
 import Decoder from './decoder.js';
 import Renderer from './renderer.js';
@@ -22,18 +13,23 @@ const defaultOptions = {
     fillParent: true,
     interactive: true,
 };
-export class WaveSurfer extends EventEmitter {
+class WaveSurfer extends EventEmitter {
+    options;
+    fetcher;
+    decoder;
+    renderer;
+    player;
+    timer;
+    plugins = [];
+    subscriptions = [];
+    decodedData = null;
     /** Create a new WaveSurfer instance */
     static create(options) {
         return new WaveSurfer(options);
     }
     /** Create a new WaveSurfer instance */
     constructor(options) {
-        var _a;
         super();
-        this.plugins = [];
-        this.subscriptions = [];
-        this.decodedData = null;
         this.options = Object.assign({}, defaultOptions, options);
         this.fetcher = new Fetcher();
         this.decoder = new Decoder();
@@ -54,12 +50,13 @@ export class WaveSurfer extends EventEmitter {
             barWidth: this.options.barWidth,
             barGap: this.options.barGap,
             barRadius: this.options.barRadius,
+            noScrollbar: this.options.noScrollbar,
         });
         this.initPlayerEvents();
         this.initRendererEvents();
         this.initTimerEvents();
         this.initReadyEvent();
-        const url = this.options.url || ((_a = this.options.media) === null || _a === void 0 ? void 0 : _a.src);
+        const url = this.options.url || this.options.media?.src;
         if (url) {
             this.load(url, this.options.peaks, this.options.duration);
         }
@@ -119,32 +116,32 @@ export class WaveSurfer extends EventEmitter {
         }));
     }
     /** Load an audio file by URL, with optional pre-decoded audio data */
-    load(url, channelData, duration) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.player.loadUrl(url);
-            // Fetch and decode the audio of no pre-computed audio data is provided
-            if (channelData == null) {
-                const audio = yield this.fetcher.load(url);
-                const data = yield this.decoder.decode(audio);
-                this.decodedData = data;
-            }
-            else {
-                if (!duration) {
-                    duration =
-                        (yield new Promise((resolve) => {
-                            this.player.on('canplay', () => resolve(this.getDuration()), { once: true });
-                        })) || 0;
-                }
-                this.decodedData = {
-                    duration,
-                    numberOfChannels: channelData.length,
-                    sampleRate: channelData[0].length / duration,
-                    getChannelData: (i) => channelData[i],
-                };
+    async load(url, channelData, duration) {
+        this.player.loadUrl(url);
+        // Fetch and decode the audio of no pre-computed audio data is provided
+        if (channelData == null) {
+            const audio = await this.fetcher.load(url);
+            const data = await this.decoder.decode(audio);
+            this.decodedData = data;
+        }
+        else {
+            if (!duration) {
+                duration =
+                    (await new Promise((resolve) => {
+                        this.player.on('canplay', () => resolve(this.getDuration()), {
+                            once: true,
+                        });
+                    })) || 0;
             }
-            this.renderer.render(this.decodedData);
-            this.emit('decode', { duration: this.decodedData.duration });
-        });
+            this.decodedData = {
+                duration,
+                numberOfChannels: channelData.length,
+                sampleRate: channelData[0].length / duration,
+                getChannelData: (i) => channelData[i],
+            };
+        }
+        this.renderer.render(this.decodedData);
+        this.emit('decode', { duration: this.decodedData.duration });
     }
     /** Zoom in or out */
     zoom(minPxPerSec) {
@@ -171,8 +168,7 @@ export class WaveSurfer extends EventEmitter {
     }
     /** Get the duration of the audio in seconds */
     getDuration() {
-        var _a;
-        return this.player.getDuration() || ((_a = this.decodedData) === null || _a === void 0 ? void 0 : _a.duration) || 0;
+        return this.player.getDuration() || this.decodedData?.duration || 0;
     }
     /** Get the current audio position in seconds */
     getCurrentTime() {

package/dist/player.d.ts

@@ -2,6 +2,7 @@ declare class Player {
     protected media: HTMLMediaElement;
     private isExternalMedia;
     private hasPlayedOnce;
+    private subscriptions;
     constructor({ media, autoplay }: {
         media?: HTMLMediaElement;
         autoplay?: boolean;

package/dist/player.js

@@ -1,7 +1,9 @@
 class Player {
+    media;
+    isExternalMedia = false;
+    hasPlayedOnce = false;
+    subscriptions = [];
     constructor({ media, autoplay }) {
-        this.isExternalMedia = false;
-        this.hasPlayedOnce = false;
         if (media) {
             this.media = media;
             this.isExternalMedia = true;
@@ -9,11 +11,11 @@ class Player {
         else {
             this.media = document.createElement('audio');
         }
+        this.subscriptions.push(
         // Track the first play() call
-        const unsubscribe = this.on('play', () => {
+        this.on('play', () => {
             this.hasPlayedOnce = true;
-            unsubscribe();
-        });
+        }, { once: true }));
         // Autoplay
         if (autoplay) {
             this.media.autoplay = true;
@@ -24,6 +26,9 @@ class Player {
         return () => this.media.removeEventListener(event, callback);
     }
     destroy() {
+        this.subscriptions.forEach((unsubscribe) => {
+            unsubscribe();
+        });
         this.media.pause();
         if (!this.isExternalMedia) {
             this.media.remove();
@@ -45,17 +50,13 @@ class Player {
         return this.media.currentTime > 0 && !this.media.paused && !this.media.ended;
     }
     seekTo(time) {
-        if (this.media) {
-            // iOS Safari requires a play() call before seeking
-            const { hasPlayedOnce } = this;
-            if (!hasPlayedOnce) {
-                this.media.play();
-            }
-            this.media.currentTime = time;
-            if (!hasPlayedOnce) {
-                this.media.pause();
-            }
+        // iOS Safari requires a play() call before seeking
+        if (!this.hasPlayedOnce && navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
+            this.media.play()?.then?.(() => {
+                setTimeout(() => this.media.pause(), 10);
+            });
         }
+        this.media.currentTime = time;
     }
     getDuration() {
         return this.media.duration;

package/dist/plugins/minimap.js

@@ -1,13 +1,16 @@
 import BasePlugin from '../base-plugin.js';
-import { WaveSurfer } from '../index.js';
+import WaveSurfer from '../index.js';
 const defaultOptions = {
     height: 50,
     overlayColor: 'rgba(100, 100, 100, 0.1)',
 };
 class TimelinePlugin extends BasePlugin {
+    options;
+    minimapWrapper;
+    miniWavesurfer = null;
+    overlay;
     constructor(params, options) {
         super(params, options);
-        this.miniWavesurfer = null;
         this.options = Object.assign({}, defaultOptions, options);
         this.minimapWrapper = this.initMinimapWrapper();
         this.overlay = this.initOverlay();
@@ -18,7 +21,7 @@ class TimelinePlugin extends BasePlugin {
     initMinimapWrapper() {
         const div = document.createElement('div');
         div.style.position = 'relative';
-        this.container.appendChild(div);
+        this.container.insertAdjacentElement('afterend', div);
         return div;
     }
     initOverlay() {
@@ -33,7 +36,16 @@ class TimelinePlugin extends BasePlugin {
         const media = this.wavesurfer.getMediaElement();
         if (!data || !media)
             return;
-        this.miniWavesurfer = WaveSurfer.create(Object.assign(Object.assign({}, this.options), { container: this.minimapWrapper, minPxPerSec: 1, fillParent: true, media, url: media.src, peaks: [data.getChannelData(0)], duration: data.duration }));
+        this.miniWavesurfer = WaveSurfer.create({
+            ...this.options,
+            container: this.minimapWrapper,
+            minPxPerSec: 1,
+            fillParent: true,
+            media,
+            url: media.src,
+            peaks: [data.getChannelData(0)],
+            duration: data.duration,
+        });
         const overlayWidth = Math.round((this.minimapWrapper.clientWidth / this.wrapper.clientWidth) * 100);
         this.overlay.style.width = `${overlayWidth}%`;
         this.wavesurfer.on('timeupdate', ({ currentTime }) => {
@@ -43,8 +55,7 @@ class TimelinePlugin extends BasePlugin {
     }
     /** Unmount */
     destroy() {
-        var _a;
-        (_a = this.miniWavesurfer) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.miniWavesurfer?.destroy();
         this.minimapWrapper.remove();
         super.destroy();
     }

package/dist/plugins/multitrack.d.ts

@@ -8,19 +8,26 @@ type MultitrackTracks = Array<{
     startCue?: number;
     endCue?: number;
     markers?: Array<{
-        id: string | number;
         time: number;
         label?: string;
         color?: string;
     }>;
+    regions?: Array<{
+        startTime: number;
+        endTime: number;
+        label?: string;
+        color?: string;
+    }>;
+    options?: WaveSurferOptions;
 }>;
 type MultitrackOptions = {
     container: HTMLElement;
     minPxPerSec?: number;
     cursorColor?: string;
+    cursorWidth?: number;
     trackBackground?: string;
     trackBorderColor?: string;
-    cueColor?: string;
+    rightButtonDrag?: boolean;
     onTrackPositionUpdate?: (id: string | number, startPosition: number) => void;
 };
 declare class MultiTrack {
@@ -41,6 +48,7 @@ declare class MultiTrack {
     private initTimeline;
     private updatePosition;
     private onDrag;
+    private onMove;
     private findCurrentTracks;
     private startSync;
     play(): void;

package/dist/plugins/multitrack.js

@@ -2,18 +2,25 @@ import WaveSurfer from '../index.js';
 import RegionsPlugin from './regions.js';
 import TimelinePlugin from './timeline.js';
 class MultiTrack {
+    tracks;
+    options;
+    audios = [];
+    wavesurfers = [];
+    durations = [];
+    currentTime = 0;
+    maxDuration = 0;
+    rendering;
+    isDragging = false;
+    frameRequest = null;
     static create(tracks, options) {
         return new MultiTrack(tracks, options);
     }
     constructor(tracks, options) {
-        this.audios = [];
-        this.wavesurfers = [];
-        this.durations = [];
-        this.currentTime = 0;
-        this.maxDuration = 0;
-        this.isDragging = false;
-        this.frameRequest = null;
-        this.tracks = tracks.map((track) => (Object.assign(Object.assign({}, track), { startPosition: track.startPosition || 0, peaks: track.peaks || (track.url ? undefined : [new Float32Array()]) })));
+        this.tracks = tracks.map((track) => ({
+            ...track,
+            startPosition: track.startPosition || 0,
+            peaks: track.peaks || (track.url ? undefined : [new Float32Array()]),
+        }));
         this.options = options;
         this.rendering = initRendering(this.tracks, this.options);
         this.initAudios().then((durations) => {
@@ -31,9 +38,9 @@ class MultiTrack {
             this.initWavesurfers();
             this.initTimeline();
             this.rendering.containers.forEach((container, index) => {
-                const drag = initDragging(container, (delta) => this.onDrag(index, delta));
+                const drag = initDragging(container, (delta) => this.onDrag(index, delta), options.rightButtonDrag);
                 this.wavesurfers[index].once('destroy', () => {
-                    drag === null || drag === void 0 ? void 0 : drag.destroy();
+                    drag?.destroy();
                 });
             });
         });
@@ -53,25 +60,46 @@ class MultiTrack {
     initWavesurfers() {
         const wavesurfers = this.tracks.map((track, index) => {
             // Create a wavesurfer instance
-            const ws = WaveSurfer.create(Object.assign(Object.assign({}, this.options), { container: this.rendering.containers[index], minPxPerSec: 0, media: this.audios[index], peaks: track.peaks, cursorColor: 'transparent', interactive: false }));
+            const ws = WaveSurfer.create({
+                ...track.options,
+                container: this.rendering.containers[index],
+                minPxPerSec: 0,
+                media: this.audios[index],
+                peaks: track.peaks,
+                cursorColor: 'transparent',
+                cursorWidth: 0,
+                interactive: false,
+            });
             const wsRegions = ws.registerPlugin(RegionsPlugin, {
                 draggable: false,
-                resizable: false,
+                resizable: true,
                 dragSelection: false,
             });
             ws.once('decode', () => {
                 // Render start and end cues
                 if (track.startCue) {
-                    wsRegions.add(track.startCue, track.startCue, 'start', this.options.cueColor);
+                    const region = wsRegions.add(0, track.startCue, '', 'rgba(0, 0, 0, 0.7)');
+                    region.element.firstElementChild?.remove();
                 }
                 if (track.endCue) {
-                    wsRegions.add(track.endCue, track.endCue, 'end', this.options.cueColor);
+                    const region = wsRegions.add(track.endCue, track.endCue + this.durations[index], '', 'rgba(0, 0, 0, 0.7)');
+                    region.element.lastChild?.remove();
+                }
+                // Render regions
+                if (track.regions) {
+                    track.regions.forEach((params) => {
+                        const region = wsRegions.add(params.startTime || 0, params.endTime, params.label, params.color);
+                        if (!params.startTime) {
+                            region.element.firstElementChild?.remove();
+                        }
+                    });
                 }
                 // Render markers
-                ;
-                (track.markers || []).forEach((marker) => {
-                    wsRegions.add(marker.time, marker.time, marker.label, marker.color);
-                });
+                if (track.markers) {
+                    track.markers.forEach((marker) => {
+                        wsRegions.add(marker.time, marker.time, marker.label, marker.color);
+                    });
+                }
             });
             return ws;
         });
@@ -111,23 +139,25 @@ class MultiTrack {
         });
     }
     onDrag(index, delta) {
-        var _a, _b;
+        // Prevent click events when dragging
+        this.isDragging = true;
+        setTimeout(() => (this.isDragging = false), 600);
+        const newTime = this.tracks[index].startPosition + delta * this.maxDuration;
+        this.onMove(index, newTime);
+    }
+    onMove(index, newStartPosition) {
         const track = this.tracks[index];
         if (!track.draggable)
             return;
-        this.isDragging = true;
-        setTimeout(() => (this.isDragging = false), 600);
-        const newTime = track.startPosition + delta * this.maxDuration;
-        const minStart = this.tracks.reduce((min, track, i) => {
-            if (i === index || !track.url)
-                return min;
-            return Math.min(min, track.startPosition);
-        }, Infinity);
-        if (newTime + this.durations[index] >= minStart) {
-            track.startPosition = newTime;
+        const mainIndex = this.tracks.findIndex((item) => item.url && !item.draggable);
+        const mainTrack = this.tracks[mainIndex];
+        const minStart = (mainTrack ? mainTrack.startPosition : 0) - this.durations[index];
+        const maxStart = mainTrack ? mainTrack.startPosition + this.durations[mainIndex] : this.maxDuration;
+        if (newStartPosition >= minStart && newStartPosition <= maxStart) {
+            track.startPosition = newStartPosition;
             this.rendering.setContainerOffsets();
             this.updatePosition(this.currentTime);
-            (_b = (_a = this.options).onTrackPositionUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, track.id, track.startPosition);
+            this.options.onTrackPositionUpdate?.(track.id, track.startPosition);
         }
     }
     findCurrentTracks() {
@@ -165,8 +195,7 @@ class MultiTrack {
         this.startSync();
         const indexes = this.findCurrentTracks();
         indexes.forEach((index) => {
-            var _a;
-            (_a = this.audios[index]) === null || _a === void 0 ? void 0 : _a.play();
+            this.audios[index]?.play();
         });
     }
     pause() {
@@ -212,8 +241,9 @@ function initRendering(tracks, options) {
     options.container.appendChild(scroll);
     // Create a common cursor
     const cursor = document.createElement('div');
-    cursor.setAttribute('style', 'width: 1px; height: 100%; position: absolute; z-index: 10; top: 0; left: 0');
+    cursor.setAttribute('style', 'height: 100%; position: absolute; z-index: 10; top: 0; left: 0');
     cursor.style.backgroundColor = options.cursorColor || '#000';
+    cursor.style.width = `${options.cursorWidth ?? 1}px`;
     wrapper.appendChild(cursor);
     const { clientWidth } = wrapper;
     // Create containers for each track
@@ -237,7 +267,7 @@ function initRendering(tracks, options) {
             container.style.width = `${durations[i] * pxPerSec}px`;
             container.style.transform = `translateX(${offset}px)`;
             if (tracks[i].draggable)
-                container.style.cursor = 'ew-resize';
+                container.style.cursor = 'move';
         });
     };
     return {
@@ -271,14 +301,19 @@ function initRendering(tracks, options) {
         },
     };
 }
-function initDragging(container, onDrag) {
+function initDragging(container, onDrag, rightButtonDrag = false) {
     const wrapper = container.parentElement;
     if (!wrapper)
         return;
     // Dragging tracks to set position
     let dragStart = null;
+    container.addEventListener('contextmenu', (e) => {
+        rightButtonDrag && e.preventDefault();
+    });
     // Drag start
     container.addEventListener('mousedown', (e) => {
+        if (rightButtonDrag && e.button !== 2)
+            return;
         const rect = wrapper.getBoundingClientRect();
         dragStart = e.clientX - rect.left;
     });