wavesurfer.js 7.0.0-alpha.21 → 7.0.0-alpha.23

package/dist/plugins/envelope.js

@@ -18,13 +18,22 @@ class EnvelopePlugin extends BasePlugin {
     volume = 1;
     isFadingIn = false;
     isFadingOut = false;
-    constructor(params, options) {
-        super(params, options);
+    constructor(options) {
+        super(options);
         this.options = Object.assign({}, defaultOptions, options);
         this.options.lineColor = this.options.lineColor || defaultOptions.lineColor;
         this.options.dragPointFill = this.options.dragPointFill || defaultOptions.dragPointFill;
         this.options.dragPointStroke = this.options.dragPointStroke || defaultOptions.dragPointStroke;
         this.volume = this.options.volume ?? 1;
+    }
+    static create(options) {
+        return new EnvelopePlugin(options);
+    }
+    init(params) {
+        super.init(params);
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
+        }
         this.subscriptions.push(this.wavesurfer.once('decode', ({ duration }) => {
             this.options.startTime = this.options.startTime || 0;
             this.options.endTime = this.options.endTime || duration;
@@ -48,10 +57,10 @@ class EnvelopePlugin extends BasePlugin {
         draggable.addEventListener('mousedown', (e) => {
             let x = e.clientX;
             let y = e.clientY;
-            const wasInteractive = this.wavesurfer.options.interactive;
+            const wasInteractive = this.wavesurfer?.options.interact || true;
             let delay;
             // Make the wavesurfer ignore clicks when we're dragging
-            this.wavesurfer.toggleInteractive(false);
+            this.wavesurfer?.toggleInteractive(false);
             const move = (e) => {
                 const dx = e.clientX - x;
                 const dy = e.clientY - y;
@@ -66,7 +75,7 @@ class EnvelopePlugin extends BasePlugin {
                 if (delay)
                     clearTimeout(delay);
                 delay = setTimeout(() => {
-                    this.wavesurfer.toggleInteractive(wasInteractive);
+                    this.wavesurfer?.toggleInteractive(wasInteractive);
                 }, 100);
             };
             document.addEventListener('mousemove', move);
@@ -76,7 +85,7 @@ class EnvelopePlugin extends BasePlugin {
         });
     }
     renderPolyline() {
-        if (!this.svg)
+        if (!this.svg || !this.wrapper || !this.wavesurfer)
             return;
         const polyline = this.svg.querySelector('polyline');
         const points = polyline.points;
@@ -99,6 +108,8 @@ class EnvelopePlugin extends BasePlugin {
         }
     }
     initSvg() {
+        if (!this.wrapper || !this.wavesurfer)
+            return;
         const width = this.wrapper.clientWidth;
         const height = this.wrapper.clientHeight;
         const duration = this.wavesurfer.getDuration();
@@ -180,7 +191,7 @@ class EnvelopePlugin extends BasePlugin {
                 this.emit('fade-out-change', { time: newTime });
             }
             // Also allow dragging points vertically
-            if (dy > 1) {
+            if (dy > 1 || dy < -1) {
                 onDragY(dy);
             }
             else {
@@ -201,7 +212,7 @@ class EnvelopePlugin extends BasePlugin {
         super.destroy();
     }
     initWebAudio() {
-        const audio = this.wavesurfer.getMediaElement();
+        const audio = this.wavesurfer?.getMediaElement();
         if (!audio)
             return null;
         this.volume = this.options.volume ?? audio.volume;
@@ -233,12 +244,12 @@ class EnvelopePlugin extends BasePlugin {
         this.gainNode.gain.value = volume;
     }
     initFadeEffects() {
-        if (!this.audioContext)
+        if (!this.audioContext || !this.wavesurfer)
             return;
         const unsub = this.wavesurfer.on('timeupdate', ({ currentTime }) => {
             if (!this.audioContext || !this.gainNode)
                 return;
-            if (!this.wavesurfer.isPlaying())
+            if (!this.wavesurfer?.isPlaying())
                 return;
             if (this.audioContext.state === 'suspended') {
                 this.audioContext.resume();
@@ -281,7 +292,6 @@ class EnvelopePlugin extends BasePlugin {
     }
     setStartTime(time) {
         this.options.startTime = time;
-        console.log(time);
         this.renderPolyline();
     }
     setEndTime(time) {

package/dist/plugins/minimap.d.ts

@@ -1,5 +1,5 @@
 import BasePlugin from '../base-plugin.js';
-import { type WaveSurferPluginParams, type WaveSurferOptions } from '../index.js';
+import { type WaveSurferPluginParams, type WaveSurferOptions } from '../wavesurfer.js';
 export type MinimapPluginOptions = {
     overlayColor?: string;
 } & WaveSurferOptions;
@@ -10,16 +10,18 @@ declare const defaultOptions: {
 export type MinimapPluginEvents = {
     ready: void;
 };
-declare class TimelinePlugin extends BasePlugin<MinimapPluginEvents, MinimapPluginOptions> {
+declare class MinimapPlugin extends BasePlugin<MinimapPluginEvents, MinimapPluginOptions> {
     protected options: MinimapPluginOptions & typeof defaultOptions;
     private minimapWrapper;
     private miniWavesurfer;
     private overlay;
-    constructor(params: WaveSurferPluginParams, options: MinimapPluginOptions);
+    constructor(options: MinimapPluginOptions);
+    static create(options: MinimapPluginOptions): MinimapPlugin;
+    init(params: WaveSurferPluginParams): void;
     private initMinimapWrapper;
     private initOverlay;
     private initMinimap;
     /** Unmount */
     destroy(): void;
 }
-export default TimelinePlugin;
+export default MinimapPlugin;

package/dist/plugins/minimap.js

@@ -1,19 +1,29 @@
 import BasePlugin from '../base-plugin.js';
-import WaveSurfer from '../index.js';
+import WaveSurfer from '../wavesurfer.js';
 const defaultOptions = {
     height: 50,
     overlayColor: 'rgba(100, 100, 100, 0.1)',
 };
-class TimelinePlugin extends BasePlugin {
+class MinimapPlugin extends BasePlugin {
     options;
     minimapWrapper;
     miniWavesurfer = null;
     overlay;
-    constructor(params, options) {
-        super(params, options);
+    constructor(options) {
+        super(options);
         this.options = Object.assign({}, defaultOptions, options);
         this.minimapWrapper = this.initMinimapWrapper();
         this.overlay = this.initOverlay();
+    }
+    static create(options) {
+        return new MinimapPlugin(options);
+    }
+    init(params) {
+        super.init(params);
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        this.container?.insertAdjacentElement('afterend', this.minimapWrapper);
         this.subscriptions.push(this.wavesurfer.on('decode', () => {
             this.initMinimap();
         }));
@@ -21,7 +31,6 @@ class TimelinePlugin extends BasePlugin {
     initMinimapWrapper() {
         const div = document.createElement('div');
         div.style.position = 'relative';
-        this.container.insertAdjacentElement('afterend', div);
         return div;
     }
     initOverlay() {
@@ -32,6 +41,8 @@ class TimelinePlugin extends BasePlugin {
         return div;
     }
     initMinimap() {
+        if (!this.wavesurfer || !this.wrapper)
+            return;
         const data = this.wavesurfer.getDecodedData();
         const media = this.wavesurfer.getMediaElement();
         if (!data || !media)
@@ -49,7 +60,7 @@ class TimelinePlugin extends BasePlugin {
         const overlayWidth = Math.round((this.minimapWrapper.clientWidth / this.wrapper.clientWidth) * 100);
         this.overlay.style.width = `${overlayWidth}%`;
         this.wavesurfer.on('timeupdate', ({ currentTime }) => {
-            const offset = Math.max(0, Math.min((currentTime / this.wavesurfer.getDuration()) * 100 - overlayWidth / 2, 100 - overlayWidth)).toFixed(2);
+            const offset = Math.max(0, Math.min((currentTime / data.duration) * 100 - overlayWidth / 2, 100 - overlayWidth)).toFixed(2);
             this.overlay.style.left = `${offset}%`;
         });
     }
@@ -60,4 +71,4 @@ class TimelinePlugin extends BasePlugin {
         super.destroy();
     }
 }
-export default TimelinePlugin;
+export default MinimapPlugin;

package/dist/plugins/multitrack.d.ts

@@ -1,4 +1,4 @@
-import { type WaveSurferOptions } from '../index.js';
+import { type WaveSurferOptions } from '../wavesurfer.js';
 import { type EnvelopePluginOptions } from './envelope.js';
 import EventEmitter from '../event-emitter.js';
 export type TrackId = string | number;
@@ -95,7 +95,6 @@ declare class MultiTrack extends EventEmitter<MultitrackEvents> {
     private updatePosition;
     private setIsDragging;
     private onDrag;
-    private onMove;
     private findCurrentTracks;
     private startSync;
     play(): void;

package/dist/plugins/multitrack.js

@@ -1,4 +1,4 @@
-import WaveSurfer from '../index.js';
+import WaveSurfer from '../wavesurfer.js';
 import RegionsPlugin from './regions.js';
 import TimelinePlugin from './timeline.js';
 import EnvelopePlugin from './envelope.js';
@@ -39,6 +39,11 @@ class MultiTrack extends EventEmitter {
                 const drag = initDragging(container, (delta) => this.onDrag(index, delta), options.rightButtonDrag);
                 this.wavesurfers[index].once('destroy', () => drag?.destroy());
             });
+            this.rendering.addClickHandler((position) => {
+                if (this.isDragging)
+                    return;
+                this.seekTo(position * this.maxDuration);
+            });
             this.emit('canplay');
         });
     }
@@ -48,11 +53,6 @@ class MultiTrack extends EventEmitter {
             return Math.max(max, track.startPosition + durations[index]);
         }, 0);
         this.rendering.setMainWidth(durations, this.maxDuration);
-        this.rendering.addClickHandler((position) => {
-            if (this.isDragging)
-                return;
-            this.seekTo(position * this.maxDuration);
-        });
     }
     initAudio(track) {
         const audio = new Audio(track.url);
@@ -77,14 +77,14 @@ class MultiTrack extends EventEmitter {
             peaks: track.peaks,
             cursorColor: 'transparent',
             cursorWidth: 0,
-            interactive: false,
+            interact: false,
         });
         // Regions and markers
-        const wsRegions = ws.registerPlugin(RegionsPlugin, {
+        const wsRegions = ws.registerPlugin(RegionsPlugin.create({
             draggable: false,
             resizable: true,
             dragSelection: false,
-        });
+        }));
         this.subscriptions.push(ws.once('decode', () => {
             // Start and end cues
             if (track.startCue != null || track.endCue != null) {
@@ -133,14 +133,14 @@ class MultiTrack extends EventEmitter {
             }
         }));
         // Envelope
-        const envelope = ws.registerPlugin(EnvelopePlugin, {
+        const envelope = ws.registerPlugin(EnvelopePlugin.create({
             ...this.options.envelopeOptions,
             startTime: track.startCue,
             endTime: track.endCue,
             fadeInEnd: track.fadeInEnd,
             fadeOutStart: track.fadeOutStart,
             volume: track.volume,
-        });
+        }));
         this.subscriptions.push(envelope.on('volume-change', ({ volume }) => {
             this.setIsDragging();
             this.emit('volume-change', { id: track.id, volume });
@@ -171,16 +171,18 @@ class MultiTrack extends EventEmitter {
     initTimeline() {
         if (this.timeline)
             this.timeline.destroy();
-        this.timeline = this.wavesurfers[0].registerPlugin(TimelinePlugin, {
+        this.timeline = this.wavesurfers[0].registerPlugin(TimelinePlugin.create({
             duration: this.maxDuration,
             container: this.rendering.containers[0].parentElement,
-        });
+        }));
     }
     updatePosition(time, autoCenter = false) {
         const precisionSeconds = 0.3;
-        this.currentTime = time;
-        this.rendering.updateCursor(time / this.maxDuration, autoCenter);
         const isPaused = !this.isPlaying();
+        if (time !== this.currentTime) {
+            this.currentTime = time;
+            this.rendering.updateCursor(time / this.maxDuration, autoCenter);
+        }
         // Update the current time of each audio
         this.tracks.forEach((track, index) => {
             const audio = this.audios[index];
@@ -212,19 +214,17 @@ class MultiTrack extends EventEmitter {
     }
     onDrag(index, delta) {
         this.setIsDragging();
-        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;
+        const newStartPosition = track.startPosition + delta * this.maxDuration;
         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.initDurations(this.durations);
             this.rendering.setContainerOffsets();
             this.updatePosition(this.currentTime);
             this.emit('start-position-change', { id: track.id, startPosition: newStartPosition });

package/dist/plugins/regions.d.ts

@@ -1,5 +1,5 @@
 import BasePlugin from '../base-plugin.js';
-import type { WaveSurferPluginParams } from '../index.js';
+import type { WaveSurferPluginParams } from '../wavesurfer.js';
 export type RegionsPluginOptions = {
     dragSelection?: boolean;
     draggable?: boolean;
@@ -32,8 +32,11 @@ declare class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPlugi
     private modifiedRegion;
     private isResizingLeft;
     private isMoving;
+    private wasInteractive;
     /** Create an instance of RegionsPlugin */
-    constructor(params: WaveSurferPluginParams, options: RegionsPluginOptions);
+    constructor(options?: RegionsPluginOptions);
+    static create(options?: RegionsPluginOptions): RegionsPlugin;
+    init(params: WaveSurferPluginParams): void;
     /** Unmount */
     destroy(): void;
     private initRegionsContainer;

package/dist/plugins/regions.js

@@ -23,13 +23,23 @@ class RegionsPlugin extends BasePlugin {
     modifiedRegion = null;
     isResizingLeft = false;
     isMoving = false;
+    wasInteractive = true;
     /** Create an instance of RegionsPlugin */
-    constructor(params, options) {
-        super(params, options);
+    constructor(options) {
+        super(options || {});
         this.options = Object.assign({}, defaultOptions, options);
         this.regionsContainer = this.initRegionsContainer();
+    }
+    static create(options) {
+        return new RegionsPlugin(options);
+    }
+    init(params) {
+        super.init(params);
+        if (!this.wavesurfer || !this.wrapper) {
+            throw Error('WaveSurfer is not initialized');
+        }
         this.subscriptions.push(this.wavesurfer.once('decode', () => {
-            this.wrapper.appendChild(this.regionsContainer);
+            this.wrapper?.appendChild(this.regionsContainer);
         }));
         this.wrapper.addEventListener('mousedown', this.handleMouseDown);
         document.addEventListener('mousemove', this.handleMouseMove);
@@ -37,7 +47,7 @@ class RegionsPlugin extends BasePlugin {
     }
     /** Unmount */
     destroy() {
-        this.wrapper.removeEventListener('mousedown', this.handleMouseDown);
+        this.wrapper?.removeEventListener('mousedown', this.handleMouseDown);
         document.removeEventListener('mousemove', this.handleMouseMove);
         document.removeEventListener('mouseup', this.handleMouseUp, true);
         this.regionsContainer.remove();
@@ -56,10 +66,14 @@ class RegionsPlugin extends BasePlugin {
     }
     handleMouseDown = (e) => {
         if (this.options.draggable || this.options.resizable || this.options.dragSelection) {
+            if (!this.wrapper)
+                return;
             this.dragStart = e.clientX - this.wrapper.getBoundingClientRect().left;
         }
     };
     handleMouseMove = (e) => {
+        if (!this.wrapper)
+            return;
         const box = this.wrapper.getBoundingClientRect();
         const { width } = box;
         const dragEnd = e.clientX - box.left;
@@ -76,7 +90,8 @@ class RegionsPlugin extends BasePlugin {
             const dragEnd = e.clientX - this.regionsContainer.getBoundingClientRect().left;
             if (dragEnd - this.dragStart >= MIN_WIDTH) {
                 if (!this.createdRegion) {
-                    this.wrapper.style.pointerEvents = 'none';
+                    this.wasInteractive = this.wavesurfer?.options.interact || true;
+                    this.wavesurfer?.toggleInteractive(false);
                     this.createdRegion = this.createRegion(this.dragStart / width, dragEnd / width);
                 }
                 else {
@@ -93,7 +108,7 @@ class RegionsPlugin extends BasePlugin {
         this.modifiedRegion = null;
         this.isMoving = false;
         this.dragStart = NaN;
-        this.wrapper.style.pointerEvents = '';
+        this.wavesurfer?.toggleInteractive(this.wasInteractive);
     };
     createRegionElement(start, end, title = '') {
         const noWidth = start === end;
@@ -181,7 +196,7 @@ class RegionsPlugin extends BasePlugin {
         return div;
     }
     createRegion(start, end, title = '') {
-        const duration = this.wavesurfer.getDuration();
+        const duration = this.wavesurfer?.getDuration() || 0;
         return {
             element: this.createRegionElement(start, end, title),
             start,
@@ -196,16 +211,17 @@ class RegionsPlugin extends BasePlugin {
         this.emit('region-created', { region });
     }
     updateRegion(region, start, end) {
+        const duration = this.wavesurfer?.getDuration() || 0;
         if (start != null) {
             region.start = start;
             region.element.style.left = `${region.start * 100}%`;
             region.element.style.width = `${(region.end - region.start) * 100}%`;
-            region.startTime = start * this.wavesurfer.getDuration();
+            region.startTime = start * duration;
         }
         if (end != null) {
             region.end = end;
             region.element.style.width = `${(region.end - region.start) * 100}%`;
-            region.endTime = end * this.wavesurfer.getDuration();
+            region.endTime = end * duration;
         }
         this.emit('region-updated', { region });
     }
@@ -214,7 +230,7 @@ class RegionsPlugin extends BasePlugin {
     }
     /** Create a region at a given start and end time, with an optional title */
     add(startTime, endTime, title = '', color = '') {
-        const duration = this.wavesurfer.getDuration();
+        const duration = this.wavesurfer?.getDuration() || 0;
         const start = startTime / duration;
         const end = endTime / duration;
         const region = this.createRegion(start, end, title);

package/dist/plugins/timeline.d.ts

@@ -1,5 +1,5 @@
 import BasePlugin from '../base-plugin.js';
-import type { WaveSurferPluginParams } from '../index.js';
+import type { WaveSurferPluginParams } from '../wavesurfer.js';
 export type TimelinePluginOptions = {
     /** The height of the timeline in pixels, defaults to 20 */
     height?: number;
@@ -23,7 +23,9 @@ export type TimelinePluginEvents = {
 declare class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOptions> {
     private timelineWrapper;
     protected options: TimelinePluginOptions & typeof defaultOptions;
-    constructor(params: WaveSurferPluginParams, options: TimelinePluginOptions);
+    constructor(options: TimelinePluginOptions);
+    static create(options: TimelinePluginOptions): TimelinePlugin;
+    init(params: WaveSurferPluginParams): void;
     /** Unmount */
     destroy(): void;
     private initTimelineWrapper;

package/dist/plugins/timeline.js

@@ -5,12 +5,21 @@ const defaultOptions = {
 class TimelinePlugin extends BasePlugin {
     timelineWrapper;
     options;
-    constructor(params, options) {
-        super(params, options);
+    constructor(options) {
+        super(options);
         this.options = Object.assign({}, defaultOptions, options);
-        this.container = this.options.container ?? this.wrapper;
         this.timelineWrapper = this.initTimelineWrapper();
-        this.container.appendChild(this.timelineWrapper);
+    }
+    static create(options) {
+        return new TimelinePlugin(options);
+    }
+    init(params) {
+        super.init(params);
+        if (!this.wavesurfer || !this.wrapper) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        const container = this.options.container ?? this.wrapper;
+        container.appendChild(this.timelineWrapper);
         if (this.options.duration) {
             this.initTimeline(this.options.duration);
         }

package/dist/renderer.d.ts

@@ -11,7 +11,7 @@ type RendererOptions = {
     barWidth?: number;
     barGap?: number;
     barRadius?: number;
-    noScrollbar?: boolean;
+    hideScrollbar?: boolean;
 };
 type RendererEvents = {
     click: {
@@ -27,6 +27,8 @@ declare class Renderer extends EventEmitter<RendererEvents> {
     private progressWrapper;
     private timeout;
     private isScrolling;
+    private audioData;
+    private resizeObserver;
     constructor(options: RendererOptions);
     getContainer(): HTMLElement;
     getWrapper(): HTMLElement;

package/dist/renderer.js

@@ -8,6 +8,8 @@ class Renderer extends EventEmitter {
     progressWrapper;
     timeout = null;
     isScrolling = false;
+    audioData = null;
+    resizeObserver = null;
     constructor(options) {
         super();
         this.options = options;
@@ -33,10 +35,10 @@ class Renderer extends EventEmitter {
           overflow-y: hidden;
           width: 100%;
           position: relative;
-          ${this.options.noScrollbar ? 'scrollbar-color: transparent;' : ''}
+          ${this.options.hideScrollbar ? 'scrollbar-color: transparent;' : ''}
         }
         :host ::-webkit-scrollbar {
-          display: ${this.options.noScrollbar ? 'none' : 'auto'};
+          display: ${this.options.hideScrollbar ? 'none' : 'auto'};
         }
         :host .wrapper {
           position: relative;
@@ -89,6 +91,11 @@ class Renderer extends EventEmitter {
             const relativeX = x / rect.width;
             this.emit('click', { relativeX });
         });
+        // Re-render the waveform on container resize
+        this.resizeObserver = new ResizeObserver(() => {
+            this.delay(() => this.audioData && this.zoom(this.audioData, this.options.minPxPerSec), 100);
+        });
+        this.resizeObserver.observe(this.scrollContainer);
     }
     getContainer() {
         return this.scrollContainer;
@@ -98,6 +105,7 @@ class Renderer extends EventEmitter {
     }
     destroy() {
         this.container.remove();
+        this.resizeObserver?.disconnect();
     }
     delay(fn, delayMs = 10) {
         if (this.timeout) {
@@ -178,11 +186,12 @@ class Renderer extends EventEmitter {
         // Clear the canvas
         this.canvasWrapper.innerHTML = '';
         this.progressWrapper.innerHTML = '';
-        // Draw the currently visible part of the waveform
+        // Determine the currently visible part of the waveform
         const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
         const scale = len / scrollWidth;
         const start = Math.floor(scrollLeft * scale);
         const end = Math.ceil(Math.min(scrollWidth, scrollLeft + clientWidth) * scale);
+        // Draw the visible portion of the waveform
         draw(start, end);
         // Draw the rest of the waveform with a timeout for better performance
         const step = end - start;
@@ -198,30 +207,34 @@ class Renderer extends EventEmitter {
         }
     }
     render(audioData) {
-        // Determine the width of the canvas
+        // Determine the width of the waveform
         const pixelRatio = window.devicePixelRatio || 1;
         const parentWidth = this.options.fillParent ? this.scrollContainer.clientWidth * pixelRatio : 0;
-        const scrollWidth = audioData.duration * this.options.minPxPerSec;
-        this.isScrolling = scrollWidth > parentWidth;
-        const width = Math.max(1, this.isScrolling ? scrollWidth : parentWidth);
+        const scrollWidth = Math.max(1, audioData.duration * this.options.minPxPerSec);
+        const width = scrollWidth > parentWidth ? scrollWidth : parentWidth;
         const { height } = this.options;
-        // Remember the current cursor position
-        const oldCursorPosition = this.progressWrapper.clientWidth;
+        // Set the width of the container
+        this.isScrolling = width > parentWidth;
         this.scrollContainer.style.overflowX = this.isScrolling ? 'auto' : 'hidden';
         this.wrapper.style.width = `${Math.floor(width / pixelRatio)}px`;
-        // Adjust the scroll position so that the cursor stays in the same place
-        const newCursortPosition = this.progressWrapper.clientWidth;
-        this.scrollContainer.scrollLeft += newCursortPosition - oldCursorPosition;
-        // First two channels are used
+        // Only the first two channels are used
         const channelData = [audioData.getChannelData(0)];
         if (audioData.numberOfChannels > 1) {
             channelData.push(audioData.getChannelData(1));
         }
+        // Render the waveform
         this.renderPeaks(channelData, width, height, pixelRatio);
+        this.audioData = audioData;
     }
     zoom(audioData, minPxPerSec) {
+        // Remember the current cursor position
+        const oldCursorPosition = this.progressWrapper.clientWidth;
+        // Set the new zoom level and re-render the waveform
         this.options.minPxPerSec = minPxPerSec;
         this.render(audioData);
+        // Adjust the scroll position so that the cursor stays in the same place
+        const newCursortPosition = this.progressWrapper.clientWidth;
+        this.scrollContainer.scrollLeft += newCursortPosition - oldCursorPosition;
     }
     renderProgress(progress, autoCenter = false) {
         this.progressWrapper.style.width = `${progress * 100}%`;