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

package/dist/renderer.js

@@ -1,28 +1,81 @@
-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 { makeDraggable } from './draggable.js';
 import EventEmitter from './event-emitter.js';
 class Renderer extends EventEmitter {
     constructor(options) {
         super();
-        this.timeout = null;
+        this.timeouts = [];
+        this.isScrolling = false;
+        this.audioData = null;
+        this.resizeObserver = null;
+        this.isDragging = false;
         this.options = options;
-        let container = null;
-        if (typeof this.options.container === 'string') {
-            container = document.querySelector(this.options.container);
+        let parent;
+        if (typeof options.container === 'string') {
+            parent = document.querySelector(options.container);
         }
-        else if (this.options.container instanceof HTMLElement) {
-            container = this.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();
+        parent.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
+        const delay = this.createDelay(100);
+        this.resizeObserver = new ResizeObserver(() => {
+            delay(() => this.reRender());
+        });
+        this.resizeObserver.observe(this.scrollContainer);
+    }
+    initDrag() {
+        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');
         const shadow = div.attachShadow({ mode: 'open' });
         shadow.innerHTML = `
@@ -36,204 +89,347 @@ 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 {
+          min-height: ${this.getHeight()}px;
+        }
+        :host .canvases > div {
+          position: relative;
+        }
         :host canvas {
           display: block;
-          height: ${this.options.height}px;
-          min-width: 100%;
+          position: absolute;
+          top: 0;
           image-rendering: pixelated;
         }
         :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 .progress > div {
+          position: relative;
         }
         :host .cursor {
+          pointer-events: none;
           position: absolute;
-          z-index: 3;
+          z-index: 5;
           top: 0;
           left: 0;
           height: 100%;
-          border-right: 1px solid ${this.options.cursorColor || this.options.progressColor};
-          margin-left: -1px;
+          border-radius: 2px;
         }
       </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" part="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();
+    }
+    getWrapper() {
+        return this.wrapper;
     }
-    getContainer() {
-        return this.scrollContainer.querySelector('.wrapper');
+    getScroll() {
+        return this.scrollContainer.scrollLeft;
     }
     destroy() {
         this.container.remove();
+        this.resizeObserver?.disconnect();
     }
-    delay(fn, delayMs = 100) {
-        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;
     }
-    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;
-                    }
-                }
-                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);
-                });
+    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 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;
             }
-            if (end < len) {
-                yield this.delay(() => {
-                    draw(end, len);
-                });
+        }
+        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;
             }
-            // Redraw the progress mask
-            this.delay(() => {
-                this.createProgressMask();
-            });
-        });
+            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();
     }
-    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);
+    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.options.progressColor;
+        progressCtx.fillStyle = this.convertColorValues(options.progressColor);
         // This rectangle acts as a mask thanks to the composition method
-        progressCtx.fillRect(0, 0, this.progressCanvas.width, this.progressCanvas.height);
+        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);
+        // 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;
+            }
+        }
+        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) {
-        // 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);
-        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);
-    }
-    zoom(audioData, minPxPerSec) {
+        // 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;
+        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;
+        // 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`;
+        // Clear the canvases
+        this.canvasWrapper.innerHTML = '';
+        this.progressWrapper.innerHTML = '';
+        // Render the waveform
+        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');
+    }
+    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;