wavesurfer.js 7.0.0-beta.1 → 7.0.0-beta.10

package/dist/renderer.js

@@ -1,24 +1,27 @@
+import { makeDraggable } from './draggable.js';
 import EventEmitter from './event-emitter.js';
 class Renderer extends EventEmitter {
-    constructor(container, options) {
+    constructor(options) {
         super();
-        this.options = {
-            height: 0,
-        };
-        this.timeout = null;
+        this.timeouts = [];
         this.isScrolling = false;
         this.audioData = null;
         this.resizeObserver = null;
         this.isDragging = false;
-        this.options = { ...options };
-        if (typeof container === 'string') {
-            container = document.querySelector(container);
+        this.options = options;
+        let parent;
+        if (typeof options.container === 'string') {
+            parent = document.querySelector(options.container);
+        }
+        else if (options.container instanceof HTMLElement) {
+            parent = options.container;
         }
-        if (!container) {
+        if (!parent) {
             throw new Error('Container not found');
         }
+        this.parent = parent;
         const [div, shadow] = this.initHtml();
-        container.appendChild(div);
+        parent.appendChild(div);
         this.container = div;
         this.scrollContainer = shadow.querySelector('.scroll');
         this.wrapper = shadow.querySelector('.wrapper');
@@ -45,31 +48,32 @@ class Renderer extends EventEmitter {
             this.emit('scroll', startX, endX);
         });
         // Re-render the waveform on container resize
+        const delay = this.createDelay(100);
         this.resizeObserver = new ResizeObserver(() => {
-            this.delay(() => this.reRender(), 100);
+            delay(() => this.reRender());
         });
         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);
-        });
+        makeDraggable(this.wrapper, 
+        // On drag
+        (_, __, x) => {
+            this.emit('drag', Math.max(0, Math.min(1, x / this.wrapper.clientWidth)));
+        }, 
+        // On start drag
+        () => (this.isDragging = true), 
+        // On end drag
+        () => (this.isDragging = false));
+    }
+    getHeight() {
+        const defaultHeight = 128;
+        if (this.options.height == null)
+            return defaultHeight;
+        if (!isNaN(Number(this.options.height)))
+            return Number(this.options.height);
+        if (this.options.height === 'auto')
+            return this.parent.clientHeight || defaultHeight;
+        return defaultHeight;
     }
     initHtml() {
         const div = document.createElement('div');
@@ -99,15 +103,16 @@ class Renderer extends EventEmitter {
           z-index: 2;
         }
         :host .canvases {
+          min-height: ${this.getHeight()}px;
+        }
+        :host .canvases > div {
           position: relative;
-          height: ${this.options.height}px;
         }
         :host canvas {
           display: block;
           position: absolute;
           top: 0;
           image-rendering: pixelated;
-          height: ${this.options.height}px;
         }
         :host .progress {
           pointer-events: none;
@@ -119,23 +124,24 @@ class Renderer extends EventEmitter {
           height: 100%;
           overflow: hidden;
         }
+        :host .progress > div {
+          position: relative;
+        }
         :host .cursor {
           pointer-events: none;
           position: absolute;
-          z-index: 2;
+          z-index: 5;
           top: 0;
           left: 0;
           height: 100%;
           border-radius: 2px;
-          width: ${this.options.cursorWidth}px;
-          background-color: ${this.options.cursorColor || this.options.progressColor};
         }
       </style>
 
       <div class="scroll" part="scroll">
         <div class="wrapper">
           <div class="canvases"></div>
-          <div class="progress"></div>
+          <div class="progress" part="progress"></div>
           <div class="cursor" part="cursor"></div>
         </div>
       </div>
@@ -157,116 +163,173 @@ class Renderer extends EventEmitter {
         this.container.remove();
         this.resizeObserver?.disconnect();
     }
-    delay(fn, delayMs = 10) {
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-        }
-        return new Promise((resolve) => {
-            this.timeout = setTimeout(() => {
-                resolve(fn());
-            }, delayMs);
+    createDelay(delayMs = 10) {
+        const context = {};
+        this.timeouts.push(context);
+        return (callback) => {
+            context.timeout && clearTimeout(context.timeout);
+            context.timeout = setTimeout(callback, delayMs);
+        };
+    }
+    // Convert array of color values to linear gradient
+    convertColorValues(color) {
+        if (!Array.isArray(color))
+            return color || '';
+        if (color.length < 2)
+            return color[0] || '';
+        const canvasElement = document.createElement('canvas');
+        const ctx = canvasElement.getContext('2d');
+        const gradient = ctx.createLinearGradient(0, 0, 0, canvasElement.height);
+        const colorStopPercentage = 1 / (color.length - 1);
+        color.forEach((color, index) => {
+            const offset = index * colorStopPercentage;
+            gradient.addColorStop(offset, color);
         });
+        return gradient;
     }
-    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;
+    renderBars(channelData, options, ctx) {
+        ctx.fillStyle = this.convertColorValues(options.waveColor);
+        // Custom rendering function
+        if (options.renderFunction) {
+            options.renderFunction(channelData, ctx);
+            return;
+        }
+        const topChannel = channelData[0];
+        const bottomChannel = channelData[1] || channelData[0];
+        const length = topChannel.length;
+        const pixelRatio = window.devicePixelRatio || 1;
+        const { width, height } = ctx.canvas;
         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;
-                }
+        const barHeight = options.barHeight || 1;
+        const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;
+        const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;
+        const barRadius = options.barRadius || 0;
+        const barIndexScale = width / (barWidth + barGap) / length;
+        let max = 1;
+        if (options.normalize) {
+            max = 0;
+            for (let i = 0; i < length; i++) {
+                const value = Math.abs(topChannel[i]);
+                if (value > max)
+                    max = value;
             }
-            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);
+        }
+        const vScale = (halfHeight / max) * barHeight;
+        ctx.beginPath();
+        let prevX = 0;
+        let maxTop = 0;
+        let maxBottom = 0;
+        for (let i = 0; i <= length; i++) {
+            const x = Math.round(i * barIndexScale);
+            if (x > prevX) {
+                const leftBarHeight = Math.round(maxTop * vScale);
+                const rightBarHeight = Math.round(maxBottom * vScale);
+                const barHeight = leftBarHeight + rightBarHeight || 1;
+                // Vertical alignment
+                let y = halfHeight - leftBarHeight;
+                if (options.barAlign === 'top')
+                    y = 0;
+                else if (options.barAlign === 'bottom')
+                    y = height - barHeight;
+                ctx.roundRect(prevX * (barWidth + barGap), y, barWidth, barHeight, barRadius);
+                prevX = x;
+                maxTop = 0;
+                maxBottom = 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, canvas.width, canvas.height);
-        };
-        // Clear the canvas
-        this.canvasWrapper.innerHTML = '';
-        this.progressWrapper.innerHTML = '';
+            const magnitudeTop = Math.abs(topChannel[i] || 0);
+            const magnitudeBottom = Math.abs(bottomChannel[i] || 0);
+            if (magnitudeTop > maxTop)
+                maxTop = magnitudeTop;
+            if (magnitudeBottom > maxBottom)
+                maxBottom = magnitudeBottom;
+        }
+        ctx.fill();
+        ctx.closePath();
+    }
+    renderSingleCanvas(channelData, options, width, height, start, end, canvasContainer, progressContainer) {
+        const pixelRatio = window.devicePixelRatio || 1;
+        const canvas = document.createElement('canvas');
+        const length = channelData[0].length;
+        canvas.width = Math.round((width * (end - start)) / length);
+        canvas.height = height * pixelRatio;
+        canvas.style.width = `${Math.floor(canvas.width / pixelRatio)}px`;
+        canvas.style.height = `${height}px`;
+        canvas.style.left = `${Math.floor((start * width) / pixelRatio / length)}px`;
+        canvasContainer.appendChild(canvas);
+        const ctx = canvas.getContext('2d');
+        this.renderBars(channelData.map((channel) => channel.slice(start, end)), options, ctx);
+        // Draw a progress canvas
+        const progressCanvas = canvas.cloneNode();
+        progressContainer.appendChild(progressCanvas);
+        const progressCtx = progressCanvas.getContext('2d');
+        if (canvas.width > 0 && canvas.height > 0) {
+            progressCtx.drawImage(canvas, 0, 0);
+        }
+        // Set the composition method to draw only where the waveform is drawn
+        progressCtx.globalCompositeOperation = 'source-in';
+        progressCtx.fillStyle = this.convertColorValues(options.progressColor);
+        // This rectangle acts as a mask thanks to the composition method
+        progressCtx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    renderWaveform(channelData, options, width) {
+        // A container for canvases
+        const canvasContainer = document.createElement('div');
+        const height = this.getHeight();
+        canvasContainer.style.height = `${height}px`;
+        this.canvasWrapper.style.minHeight = `${height}px`;
+        this.canvasWrapper.appendChild(canvasContainer);
+        // A container for progress canvases
+        const progressContainer = canvasContainer.cloneNode();
+        this.progressWrapper.appendChild(progressContainer);
         // Determine the currently visible part of the waveform
         const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
+        const len = channelData[0].length;
         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));
-            });
+        // Adjust width to avoid gaps between canvases when using bars
+        if (options.barWidth || options.barGap) {
+            const barWidth = options.barWidth || 0.5;
+            const barGap = options.barGap || barWidth / 2;
+            const totalBarWidth = barWidth + barGap;
+            if (viewportWidth % totalBarWidth !== 0) {
+                viewportWidth = Math.floor(viewportWidth / totalBarWidth) * totalBarWidth;
+            }
         }
-        for (let i = start - 1; i >= 0; i -= step) {
-            await this.delay(() => {
-                draw(Math.max(0, i - step), i);
-            });
+        const start = Math.floor(Math.abs(scrollLeft) * scale);
+        const end = Math.floor(start + viewportWidth * scale);
+        const viewportLen = end - start;
+        // Draw a portion of the waveform from start peak to end peak
+        const draw = (start, end) => {
+            this.renderSingleCanvas(channelData, options, width, height, Math.max(0, start), Math.min(end, len), canvasContainer, progressContainer);
+        };
+        // Draw the waveform in viewport chunks, each with a delay
+        const headDelay = this.createDelay();
+        const tailDelay = this.createDelay();
+        const renderHead = (fromIndex, toIndex) => {
+            draw(fromIndex, toIndex);
+            if (fromIndex > 0) {
+                headDelay(() => {
+                    renderHead(fromIndex - viewportLen, toIndex - viewportLen);
+                });
+            }
+        };
+        const renderTail = (fromIndex, toIndex) => {
+            draw(fromIndex, toIndex);
+            if (toIndex < len) {
+                tailDelay(() => {
+                    renderTail(fromIndex + viewportLen, toIndex + viewportLen);
+                });
+            }
+        };
+        renderHead(start, end);
+        if (end < len) {
+            renderTail(end, end + viewportLen);
         }
     }
     render(audioData) {
+        // Clear previous timeouts
+        this.timeouts.forEach((context) => context.timeout && clearTimeout(context.timeout));
+        this.timeouts = [];
         // Determine the width of the waveform
         const pixelRatio = window.devicePixelRatio || 1;
         const parentWidth = this.scrollContainer.clientWidth;
@@ -276,7 +339,6 @@ class Renderer extends EventEmitter {
         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;
         // Set the width of the wrapper
         this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
         // Set additional styles
@@ -284,9 +346,24 @@ class Renderer extends EventEmitter {
         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`;
+        // Clear the canvases
+        this.canvasWrapper.innerHTML = '';
+        this.progressWrapper.innerHTML = '';
         // Render the waveform
-        this.renderPeaks(audioData, width, height, pixelRatio);
+        if (this.options.splitChannels) {
+            // Render a waveform for each channel
+            for (let i = 0; i < audioData.numberOfChannels; i++) {
+                const options = { ...this.options, ...this.options.splitChannels[i] };
+                this.renderWaveform([audioData.getChannelData(i)], options, width);
+            }
+        }
+        else {
+            // Render a single waveform for the first two channels (left and right)
+            const channels = [audioData.getChannelData(0)];
+            if (audioData.numberOfChannels > 1)
+                channels.push(audioData.getChannelData(1));
+            this.renderWaveform(channels, this.options, width);
+        }
         this.audioData = audioData;
         this.emit('render');
     }

package/dist/wavesurfer.d.ts

@@ -1,15 +1,14 @@
 import type { GenericPlugin } from './base-plugin.js';
 import Player from './player.js';
-import { type RendererStyleOptions } from './renderer.js';
 export type WaveSurferOptions = {
     /** HTML element or CSS selector */
     container: HTMLElement | string;
-    /** The height of the waveform in pixels */
-    height?: number;
+    /** The height of the waveform in pixels, or "auto" to fill the container height */
+    height?: number | 'auto';
     /** The color of the waveform */
-    waveColor?: string;
+    waveColor?: string | string[] | CanvasGradient;
     /** The color of the progress mask */
-    progressColor?: string;
+    progressColor?: string | string[] | CanvasGradient;
     /** The color of the playpack cursor */
     cursorColor?: string;
     /** The cursor width */
@@ -22,6 +21,8 @@ export type WaveSurferOptions = {
     barRadius?: number;
     /** A vertical scaling factor for the waveform */
     barHeight?: number;
+    /** Vertical bar alignment */
+    barAlign?: 'top' | 'bottom';
     /** Minimum pixels per second of audio (i.e. zoom level) */
     minPxPerSec?: number;
     /** Stretch the waveform to fill the container, true by default */
@@ -29,7 +30,7 @@ export type WaveSurferOptions = {
     /** Audio URL */
     url?: string;
     /** Pre-computed audio data */
-    peaks?: Float32Array[] | Array<number[]>;
+    peaks?: Array<Float32Array | number[]>;
     /** Pre-computed duration */
     duration?: number;
     /** Use an existing media element instead of creating one */
@@ -48,11 +49,16 @@ export type WaveSurferOptions = {
     autoCenter?: boolean;
     /** Decoding sample rate. Doesn't affect the playback. Defaults to 8000 */
     sampleRate?: number;
+    /** Render each audio channel as a separate waveform */
+    splitChannels?: WaveSurferOptions[];
+    /** Stretch the waveform to the full height */
+    normalize?: boolean;
     /** The list of plugins to initialize on start */
     plugins?: GenericPlugin[];
+    /** Custom render function */
+    renderFunction?: (peaks: Array<Float32Array | number[]>, ctx: CanvasRenderingContext2D) => void;
 };
 declare const defaultOptions: {
-    height: number;
     waveColor: string;
     progressColor: string;
     cursorWidth: number;
@@ -68,8 +74,6 @@ export type WaveSurferEvents = {
     load: [url: string];
     /** When the audio has been decoded */
     decode: [duration: number];
-    /** When the media element has loaded enough to play */
-    canplay: [duration: number];
     /** When the audio is both decoded and can play */
     ready: [duration: number];
     /** When a waveform is drawn */
@@ -87,7 +91,7 @@ export type WaveSurferEvents = {
     /** When the user seeks to a new position */
     seeking: [currentTime: number];
     /** When the user interacts with the waveform (i.g. clicks or drags on it) */
-    interaction: [];
+    interaction: [newTime: number];
     /** When the user clicks on the waveform */
     click: [relativeX: number];
     /** When the user drags the cursor */
@@ -105,17 +109,16 @@ declare class WaveSurfer extends Player<WaveSurferEvents> {
     private timer;
     private plugins;
     private decodedData;
-    private canPlay;
+    private duration;
     protected subscriptions: Array<() => void>;
     /** Create a new WaveSurfer instance */
     static create(options: WaveSurferOptions): WaveSurfer;
     /** Create a new WaveSurfer instance */
     constructor(options: WaveSurferOptions);
-    setOptions(options: Partial<RendererStyleOptions> & Pick<WaveSurferOptions, 'interact' | 'audioRate'>): void;
+    setOptions(options: Partial<WaveSurferOptions>): void;
+    private initTimerEvents;
     private initPlayerEvents;
     private initRendererEvents;
-    private initTimerEvents;
-    private initReadyEvent;
     private initPlugins;
     /** Register a wavesurfer.js plugin */
     registerPlugin<T extends GenericPlugin>(plugin: T): T;