wavesurfer.js 7.0.0-alpha.9 → 7.0.0-beta.1

package/dist/renderer.d.ts

@@ -1,38 +1,54 @@
 import EventEmitter from './event-emitter.js';
-type RendererOptions = {
-    container: HTMLElement | string | null;
+export type RendererStyleOptions = {
     height: number;
     waveColor: string;
     progressColor: string;
     cursorColor?: string;
+    cursorWidth: number;
     minPxPerSec: number;
     fillParent: boolean;
     barWidth?: number;
     barGap?: number;
     barRadius?: number;
+    barHeight?: number;
+    hideScrollbar?: boolean;
+    autoCenter?: boolean;
+    autoScroll?: boolean;
 };
 type RendererEvents = {
-    click: {
-        relativeX: number;
-    };
+    click: [relativeX: number];
+    drag: [relativeX: number];
+    scroll: [relativeStart: number, relativeEnd: number];
+    render: [];
 };
 declare class Renderer extends EventEmitter<RendererEvents> {
+    private static MAX_CANVAS_WIDTH;
     private options;
     private container;
     private scrollContainer;
-    private mainCanvas;
-    private progressCanvas;
+    private wrapper;
+    private canvasWrapper;
+    private progressWrapper;
     private cursor;
-    private ctx;
     private timeout;
-    constructor(options: RendererOptions);
-    getContainer(): HTMLElement;
+    private isScrolling;
+    private audioData;
+    private resizeObserver;
+    private isDragging;
+    constructor(container: HTMLElement | string | null, options: RendererStyleOptions);
+    private initEvents;
+    private initDrag;
+    private initHtml;
+    setOptions(options: RendererStyleOptions): void;
+    getWrapper(): HTMLElement;
+    getScroll(): number;
     destroy(): void;
     private delay;
     private renderPeaks;
-    private createProgressMask;
     render(audioData: AudioBuffer): void;
-    zoom(audioData: AudioBuffer, minPxPerSec: number): void;
-    renderProgress(progress: number, autoCenter?: boolean): void;
+    reRender(): void;
+    zoom(minPxPerSec: number): void;
+    private scrollIntoView;
+    renderProgress(progress: number, isPlaying?: boolean): void;
 }
 export default Renderer;

package/dist/renderer.js

@@ -1,28 +1,77 @@
-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 EventEmitter from './event-emitter.js';
 class Renderer extends EventEmitter {
-    constructor(options) {
+    constructor(container, options) {
         super();
+        this.options = {
+            height: 0,
+        };
         this.timeout = null;
-        this.options = options;
-        let container = null;
-        if (typeof this.options.container === 'string') {
-            container = document.querySelector(this.options.container);
-        }
-        else if (this.options.container instanceof HTMLElement) {
-            container = this.options.container;
+        this.isScrolling = false;
+        this.audioData = null;
+        this.resizeObserver = null;
+        this.isDragging = false;
+        this.options = { ...options };
+        if (typeof container === 'string') {
+            container = document.querySelector(container);
         }
         if (!container) {
             throw new Error('Container not found');
         }
+        const [div, shadow] = this.initHtml();
+        container.appendChild(div);
+        this.container = div;
+        this.scrollContainer = shadow.querySelector('.scroll');
+        this.wrapper = shadow.querySelector('.wrapper');
+        this.canvasWrapper = shadow.querySelector('.canvases');
+        this.progressWrapper = shadow.querySelector('.progress');
+        this.cursor = shadow.querySelector('.cursor');
+        this.initEvents();
+    }
+    initEvents() {
+        // Add a click listener
+        this.wrapper.addEventListener('click', (e) => {
+            const rect = this.wrapper.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const relativeX = x / rect.width;
+            this.emit('click', relativeX);
+        });
+        // Drag
+        this.initDrag();
+        // Add a scroll listener
+        this.scrollContainer.addEventListener('scroll', () => {
+            const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
+            const startX = scrollLeft / scrollWidth;
+            const endX = (scrollLeft + clientWidth) / scrollWidth;
+            this.emit('scroll', startX, endX);
+        });
+        // Re-render the waveform on container resize
+        this.resizeObserver = new ResizeObserver(() => {
+            this.delay(() => this.reRender(), 100);
+        });
+        this.resizeObserver.observe(this.scrollContainer);
+    }
+    initDrag() {
+        this.wrapper.addEventListener('mousedown', (e) => {
+            const minDx = 5;
+            const x = e.clientX;
+            const move = (e) => {
+                const diff = Math.abs(e.clientX - x);
+                if (diff >= minDx) {
+                    this.isDragging = true;
+                    const rect = this.wrapper.getBoundingClientRect();
+                    this.emit('drag', Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)));
+                }
+            };
+            const up = () => {
+                document.removeEventListener('mousemove', move);
+                document.removeEventListener('mouseup', up);
+                this.isDragging = false;
+            };
+            document.addEventListener('mousemove', move);
+            document.addEventListener('mouseup', up);
+        });
+    }
+    initHtml() {
         const div = document.createElement('div');
         const shadow = div.attachShadow({ mode: 'open' });
         shadow.innerHTML = `
@@ -36,66 +85,79 @@ class Renderer extends EventEmitter {
           width: 100%;
           position: relative;
         }
+        :host .noScrollbar {
+          scrollbar-color: transparent;
+          scrollbar-width: none;
+        }
+        :host .noScrollbar::-webkit-scrollbar {
+          display: none;
+          -webkit-appearance: none;
+        }
         :host .wrapper {
           position: relative;
-          width: fit-content;
-          min-width: 100%;
+          overflow: visible;
           z-index: 2;
         }
+        :host .canvases {
+          position: relative;
+          height: ${this.options.height}px;
+        }
         :host canvas {
           display: block;
-          height: ${this.options.height}px;
-          min-width: 100%;
+          position: absolute;
+          top: 0;
           image-rendering: pixelated;
+          height: ${this.options.height}px;
         }
         :host .progress {
+          pointer-events: none;
           position: absolute;
           z-index: 2;
           top: 0;
           left: 0;
-          pointer-events: none;
-          clip-path: inset(100%);
+          width: 0;
+          height: 100%;
+          overflow: hidden;
         }
         :host .cursor {
+          pointer-events: none;
           position: absolute;
-          z-index: 3;
+          z-index: 2;
           top: 0;
           left: 0;
           height: 100%;
-          border-right: 1px solid ${this.options.cursorColor || this.options.progressColor};
-          margin-left: -1px;
+          border-radius: 2px;
+          width: ${this.options.cursorWidth}px;
+          background-color: ${this.options.cursorColor || this.options.progressColor};
         }
       </style>
 
-      <div class="scroll">
+      <div class="scroll" part="scroll">
         <div class="wrapper">
-          <canvas></canvas>
-          <canvas class="progress"></canvas>
-          <div class="cursor"></div>
+          <div class="canvases"></div>
+          <div class="progress"></div>
+          <div class="cursor" part="cursor"></div>
         </div>
       </div>
     `;
-        this.container = div;
-        this.scrollContainer = shadow.querySelector('.scroll');
-        this.mainCanvas = shadow.querySelector('canvas');
-        this.ctx = this.mainCanvas.getContext('2d', { desynchronized: true });
-        this.progressCanvas = shadow.querySelector('.progress');
-        this.cursor = shadow.querySelector('.cursor');
-        container.appendChild(div);
-        this.mainCanvas.addEventListener('click', (e) => {
-            const rect = this.mainCanvas.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const relativeX = x / rect.width;
-            this.emit('click', { relativeX });
-        });
+        return [div, shadow];
+    }
+    setOptions(options) {
+        this.options = options;
+        // Re-render the waveform
+        this.reRender();
     }
-    getContainer() {
-        return this.scrollContainer.querySelector('.wrapper');
+    getWrapper() {
+        return this.wrapper;
+    }
+    getScroll() {
+        return this.scrollContainer.scrollLeft;
     }
     destroy() {
         this.container.remove();
+        this.resizeObserver?.disconnect();
     }
-    delay(fn, delayMs = 100) {
+    delay(fn, delayMs = 10) {
         if (this.timeout) {
             clearTimeout(this.timeout);
         }
@@ -105,135 +167,192 @@ class Renderer extends EventEmitter {
             }, delayMs);
         });
     }
-    renderPeaks(channelData, width, height) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const { devicePixelRatio } = window;
-            const { ctx } = this;
-            const barWidth = this.options.barWidth != null ? this.options.barWidth * devicePixelRatio : 1;
-            const barGap = this.options.barGap != null ? this.options.barGap * devicePixelRatio : this.options.barWidth ? barWidth / 2 : 0;
-            const barRadius = (_a = this.options.barRadius) !== null && _a !== void 0 ? _a : 0;
-            const leftChannel = channelData[0];
-            const len = leftChannel.length;
-            const barCount = Math.floor(width / (barWidth + barGap));
-            const barIndexScale = barCount / len;
-            const halfHeight = height / 2;
-            const isMono = channelData.length === 1;
-            const rightChannel = isMono ? leftChannel : channelData[1];
-            const useNegative = isMono && rightChannel.some((v) => v < 0);
-            const draw = (start, end) => {
-                let prevX = 0;
-                let prevLeft = 0;
-                let prevRight = 0;
-                ctx.beginPath();
-                ctx.fillStyle = this.options.waveColor;
-                // Firefox shim until 2023.04.11
-                if (!ctx.roundRect)
-                    ctx.roundRect = ctx.fillRect;
-                for (let i = start; i < end; i++) {
-                    const barIndex = Math.round(i * barIndexScale);
-                    if (barIndex > prevX) {
-                        const leftBarHeight = Math.round(prevLeft * halfHeight);
-                        const rightBarHeight = Math.round(prevRight * halfHeight);
-                        ctx.roundRect(prevX * (barWidth + barGap), halfHeight - leftBarHeight, barWidth, leftBarHeight + rightBarHeight || 1, barRadius);
-                        prevX = barIndex;
-                        prevLeft = 0;
-                        prevRight = 0;
-                    }
-                    const leftValue = useNegative ? leftChannel[i] : Math.abs(leftChannel[i]);
-                    const rightValue = useNegative ? rightChannel[i] : Math.abs(rightChannel[i]);
-                    if (leftValue > prevLeft) {
-                        prevLeft = leftValue;
-                    }
-                    // If stereo, both channels are drawn as max values
-                    // If mono with negative values, the bottom channel will be the min negative values
-                    if (useNegative ? rightValue < -prevRight : rightValue > prevRight) {
-                        prevRight = rightValue < 0 ? -rightValue : rightValue;
-                    }
+    async renderPeaks(audioData, width, height, pixelRatio) {
+        const barWidth = this.options.barWidth != null && !isNaN(this.options.barWidth) ? this.options.barWidth * pixelRatio : 1;
+        const barGap = this.options.barGap != null && !isNaN(this.options.barGap)
+            ? this.options.barGap * pixelRatio
+            : this.options.barWidth
+                ? barWidth / 2
+                : 0;
+        const barRadius = this.options.barRadius || 0;
+        const scaleY = this.options.barHeight || 1;
+        const leftChannel = audioData.getChannelData(0);
+        const len = leftChannel.length;
+        const barCount = Math.floor(width / (barWidth + barGap));
+        const barIndexScale = barCount / len;
+        const halfHeight = height / 2;
+        const isMono = audioData.numberOfChannels === 1;
+        const rightChannel = isMono ? leftChannel : audioData.getChannelData(1);
+        const useNegative = isMono && rightChannel.some((v) => v < 0);
+        const draw = (start, end) => {
+            let prevX = 0;
+            let prevLeft = 0;
+            let prevRight = 0;
+            const canvas = document.createElement('canvas');
+            canvas.width = Math.round((width * (end - start)) / len);
+            canvas.height = this.options.height;
+            canvas.style.width = `${Math.floor(canvas.width / pixelRatio)}px`;
+            canvas.style.height = `${this.options.height}px`;
+            canvas.style.left = `${Math.floor((start * width) / pixelRatio / len)}px`;
+            this.canvasWrapper.appendChild(canvas);
+            const ctx = canvas.getContext('2d', {
+                desynchronized: true,
+            });
+            ctx.beginPath();
+            ctx.fillStyle = this.options.waveColor ?? '';
+            // Firefox shim until 2023.04.11
+            if (!ctx.roundRect)
+                ctx.roundRect = ctx.fillRect;
+            for (let i = start; i < end; i++) {
+                const barIndex = Math.round((i - start) * barIndexScale);
+                if (barIndex > prevX) {
+                    const leftBarHeight = Math.round(prevLeft * halfHeight * scaleY);
+                    const rightBarHeight = Math.round(prevRight * halfHeight * scaleY);
+                    ctx.roundRect(prevX * (barWidth + barGap), halfHeight - leftBarHeight, barWidth, leftBarHeight + (rightBarHeight || 1), barRadius);
+                    prevX = barIndex;
+                    prevLeft = 0;
+                    prevRight = 0;
+                }
+                const leftValue = useNegative ? leftChannel[i] : Math.abs(leftChannel[i]);
+                const rightValue = useNegative ? rightChannel[i] : Math.abs(rightChannel[i]);
+                if (leftValue > prevLeft) {
+                    prevLeft = leftValue;
+                }
+                // If stereo, both channels are drawn as max values
+                // If mono with negative values, the bottom channel will be the min negative values
+                if (useNegative ? rightValue < -prevRight : rightValue > prevRight) {
+                    prevRight = rightValue < 0 ? -rightValue : rightValue;
                 }
-                ctx.fill();
-                ctx.closePath();
-            };
-            // Clear the canvas
-            ctx.clearRect(0, 0, width, height);
-            // Draw 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((scrollLeft + clientWidth) * scale);
-            draw(start, end);
-            // Draw the progress mask
-            this.createProgressMask();
-            // Draw the rest of the waveform with a timeout for better performance
-            if (start > 0) {
-                yield this.delay(() => {
-                    draw(0, start);
-                });
             }
-            if (end < len) {
-                yield this.delay(() => {
-                    draw(end, len);
-                });
+            ctx.fill();
+            ctx.closePath();
+            // Draw a progress canvas
+            const progressCanvas = canvas.cloneNode();
+            this.progressWrapper.appendChild(progressCanvas);
+            const progressCtx = progressCanvas.getContext('2d', {
+                desynchronized: true,
+            });
+            if (canvas.width > 0 && canvas.height > 0) {
+                progressCtx.drawImage(canvas, 0, 0);
             }
-            // Redraw the progress mask
-            this.delay(() => {
-                this.createProgressMask();
+            // Set the composition method to draw only where the waveform is drawn
+            progressCtx.globalCompositeOperation = 'source-in';
+            progressCtx.fillStyle = this.options.progressColor ?? '';
+            // This rectangle acts as a mask thanks to the composition method
+            progressCtx.fillRect(0, 0, canvas.width, canvas.height);
+        };
+        // Clear the canvas
+        this.canvasWrapper.innerHTML = '';
+        this.progressWrapper.innerHTML = '';
+        // Determine the currently visible part of the waveform
+        const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
+        const scale = len / scrollWidth;
+        let viewportWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth);
+        viewportWidth -= viewportWidth % ((barWidth + barGap) / pixelRatio);
+        const start = Math.floor(Math.abs(scrollLeft) * scale);
+        const end = Math.ceil(start + viewportWidth * 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;
+        for (let i = end; i < len; i += step) {
+            await this.delay(() => {
+                draw(i, Math.min(len, i + step));
             });
-        });
-    }
-    createProgressMask() {
-        const progressCtx = this.progressCanvas.getContext('2d', { desynchronized: true });
-        // Set the canvas to the same size as the main canvas
-        this.progressCanvas.width = this.mainCanvas.width;
-        this.progressCanvas.height = this.mainCanvas.height;
-        this.progressCanvas.style.width = this.mainCanvas.style.width;
-        this.progressCanvas.style.height = this.mainCanvas.style.height;
-        // Copy the waveform image to the progress canvas
-        // The main canvas itself is used as the source image
-        progressCtx.drawImage(this.mainCanvas, 0, 0);
-        // Set the composition method to draw only where the waveform is drawn
-        progressCtx.globalCompositeOperation = 'source-in';
-        progressCtx.fillStyle = this.options.progressColor;
-        // This rectangle acts as a mask thanks to the composition method
-        progressCtx.fillRect(0, 0, this.progressCanvas.width, this.progressCanvas.height);
+        }
+        for (let i = start - 1; i >= 0; i -= step) {
+            await this.delay(() => {
+                draw(Math.max(0, i - step), i);
+            });
+        }
     }
     render(audioData) {
-        // Determine the width of the canvas
-        const { devicePixelRatio } = window;
-        const parentWidth = this.options.fillParent ? this.scrollContainer.clientWidth * devicePixelRatio : 0;
-        const scrollWidth = audioData.duration * this.options.minPxPerSec;
-        const isScrolling = scrollWidth > parentWidth;
-        const width = Math.max(1, isScrolling ? scrollWidth : parentWidth);
+        // Determine the width of the waveform
+        const pixelRatio = window.devicePixelRatio || 1;
+        const parentWidth = this.scrollContainer.clientWidth;
+        const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0));
+        // Whether the container should scroll
+        this.isScrolling = scrollWidth > parentWidth;
+        const useParentWidth = this.options.fillParent && !this.isScrolling;
+        // Width and height of the waveform in pixels
+        const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
         const { height } = this.options;
-        this.mainCanvas.width = width;
-        this.mainCanvas.height = height;
-        this.mainCanvas.style.width = Math.floor(scrollWidth / devicePixelRatio) + 'px';
-        // First two channels are used
-        const channelData = [audioData.getChannelData(0)];
-        if (audioData.numberOfChannels > 1) {
-            channelData.push(audioData.getChannelData(1));
-        }
-        this.renderPeaks(channelData, width, height);
+        // Set the width of the wrapper
+        this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
+        // Set additional styles
+        this.scrollContainer.style.overflowX = this.isScrolling ? 'auto' : 'hidden';
+        this.scrollContainer.classList.toggle('noScrollbar', !!this.options.hideScrollbar);
+        this.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`;
+        this.cursor.style.width = `${this.options.cursorWidth}px`;
+        this.canvasWrapper.style.height = `${this.options.height}px`;
+        // Render the waveform
+        this.renderPeaks(audioData, width, height, pixelRatio);
+        this.audioData = audioData;
+        this.emit('render');
     }
-    zoom(audioData, minPxPerSec) {
+    reRender() {
+        // Return if the waveform has not been rendered yet
+        if (!this.audioData)
+            return;
         // Remember the current cursor position
-        const oldCursorPosition = this.cursor.getBoundingClientRect().left;
-        this.options.minPxPerSec = minPxPerSec;
-        this.render(audioData);
+        const oldCursorPosition = this.progressWrapper.clientWidth;
+        // Set the new zoom level and re-render the waveform
+        this.render(this.audioData);
         // Adjust the scroll position so that the cursor stays in the same place
-        const newCursortPosition = this.cursor.getBoundingClientRect().left;
+        const newCursortPosition = this.progressWrapper.clientWidth;
         this.scrollContainer.scrollLeft += newCursortPosition - oldCursorPosition;
     }
-    renderProgress(progress, autoCenter = false) {
-        this.progressCanvas.style.clipPath = `inset(0 ${100 - progress * 100}% 0 0)`;
-        this.cursor.style.left = `${progress * 100}%`;
-        if (autoCenter) {
-            const center = this.container.clientWidth / 2;
-            const fullWidth = this.mainCanvas.clientWidth;
-            if (fullWidth * progress >= center) {
-                this.scrollContainer.scrollLeft = fullWidth * progress - center;
+    zoom(minPxPerSec) {
+        this.options.minPxPerSec = minPxPerSec;
+        this.reRender();
+    }
+    scrollIntoView(progress, isPlaying = false) {
+        const { clientWidth, scrollLeft, scrollWidth } = this.scrollContainer;
+        const progressWidth = scrollWidth * progress;
+        const center = clientWidth / 2;
+        const minScroll = isPlaying && this.options.autoCenter && !this.isDragging ? center : clientWidth;
+        if (progressWidth > scrollLeft + minScroll || progressWidth < scrollLeft) {
+            // Scroll to the center
+            if (this.options.autoCenter && !this.isDragging) {
+                // If the cursor is in viewport but not centered, scroll to the center slowly
+                const minDiff = center / 20;
+                if (progressWidth - (scrollLeft + center) >= minDiff && progressWidth < scrollLeft + clientWidth) {
+                    this.scrollContainer.scrollLeft += minDiff;
+                }
+                else {
+                    // Otherwise, scroll to the center immediately
+                    this.scrollContainer.scrollLeft = progressWidth - center;
+                }
+            }
+            else if (this.isDragging) {
+                // Scroll just a little bit to allow for some space between the cursor and the edge
+                const gap = 10;
+                this.scrollContainer.scrollLeft =
+                    progressWidth < scrollLeft ? progressWidth - gap : progressWidth - clientWidth + gap;
+            }
+            else {
+                // Scroll to the beginning
+                this.scrollContainer.scrollLeft = progressWidth;
             }
         }
+        // Emit the scroll event
+        {
+            const { scrollLeft } = this.scrollContainer;
+            const startX = scrollLeft / scrollWidth;
+            const endX = (scrollLeft + clientWidth) / scrollWidth;
+            this.emit('scroll', startX, endX);
+        }
+    }
+    renderProgress(progress, isPlaying) {
+        if (isNaN(progress))
+            return;
+        this.progressWrapper.style.width = `${progress * 100}%`;
+        this.cursor.style.left = `${progress * 100}%`;
+        this.cursor.style.marginLeft = Math.round(progress * 100) === 100 ? `-${this.options.cursorWidth}px` : '';
+        if (this.isScrolling && this.options.autoScroll) {
+            this.scrollIntoView(progress, isPlaying);
+        }
     }
 }
+Renderer.MAX_CANVAS_WIDTH = 4000;
 export default Renderer;

package/dist/timer.d.ts

@@ -1,6 +1,6 @@
 import EventEmitter from './event-emitter.js';
 type TimerEvents = {
-    tick: void;
+    tick: [];
 };
 declare class Timer extends EventEmitter<TimerEvents> {
     private unsubscribe;