wavesurfer.js 6.5.1 → 7.0.0-alpha.1

package/dist/player.js

@@ -0,0 +1,40 @@
+class Player {
+    constructor({ media }) {
+        this.isExternalMedia = false;
+        if (media) {
+            this.media = media;
+            this.isExternalMedia = true;
+        }
+        else {
+            this.media = document.createElement('audio');
+        }
+    }
+    on(event, callback) {
+        this.media.addEventListener(event, callback);
+        return () => this.media.removeEventListener(event, callback);
+    }
+    destroy() {
+        if (!this.isExternalMedia) {
+            this.media.remove();
+        }
+    }
+    loadUrl(src) {
+        this.media.src = src;
+    }
+    getCurrentTime() {
+        return this.media.currentTime;
+    }
+    play() {
+        this.media.play();
+    }
+    pause() {
+        this.media.pause();
+    }
+    isPlaying() {
+        return this.media.currentTime > 0 && !this.media.paused && !this.media.ended;
+    }
+    seekTo(time) {
+        this.media.currentTime = time;
+    }
+}
+export default Player;

package/dist/plugins/regions.d.ts

@@ -0,0 +1,48 @@
+import BasePlugin from '../base-plugin.js';
+import { WaveSurferPluginParams } from '../index.js';
+type Region = {
+    startTime: number;
+    endTime: number;
+    title: string;
+    start: number;
+    end: number;
+    element: HTMLElement;
+};
+type RegionsPluginEvents = {
+    'region-created': {
+        region: Region;
+    };
+    'region-updated': {
+        region: Region;
+    };
+    'region-clicked': {
+        region: Region;
+    };
+};
+declare class RegionsPlugin extends BasePlugin<RegionsPluginEvents> {
+    private dragStart;
+    private container;
+    private regions;
+    private createdRegion;
+    private modifiedRegion;
+    private isResizingLeft;
+    private isMoving;
+    /** Create an instance of RegionsPlugin */
+    constructor(params: WaveSurferPluginParams);
+    /** Unmounts the regions */
+    destroy(): void;
+    private initContainer;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private createRegionElement;
+    private createRegion;
+    private addRegion;
+    private updateRegion;
+    private moveRegion;
+    /** Create a region at a given start and end time, with an optional title */
+    addRegionAtTime(startTime: number, endTime: number, title?: string): Region;
+    /** Set the background color of a region */
+    setRegionColor(region: Region, color: string): void;
+}
+export default RegionsPlugin;

package/dist/plugins/regions.js

@@ -0,0 +1,183 @@
+import BasePlugin from '../base-plugin.js';
+const MIN_WIDTH = 10;
+class RegionsPlugin extends BasePlugin {
+    /** Create an instance of RegionsPlugin */
+    constructor(params) {
+        super(params);
+        this.dragStart = NaN;
+        this.regions = [];
+        this.createdRegion = null;
+        this.modifiedRegion = null;
+        this.isResizingLeft = false;
+        this.isMoving = false;
+        this.handleMouseDown = (e) => {
+            this.dragStart = e.clientX - this.container.getBoundingClientRect().left;
+        };
+        this.handleMouseMove = (e) => {
+            const dragEnd = e.clientX - this.container.getBoundingClientRect().left;
+            if (this.modifiedRegion && this.isMoving) {
+                this.moveRegion(this.modifiedRegion, dragEnd - this.dragStart);
+                this.dragStart = dragEnd;
+                return;
+            }
+            if (this.modifiedRegion) {
+                this.updateRegion(this.modifiedRegion, this.isResizingLeft ? dragEnd : undefined, this.isResizingLeft ? undefined : dragEnd);
+                return;
+            }
+            if (!isNaN(this.dragStart)) {
+                const dragEnd = e.clientX - this.container.getBoundingClientRect().left;
+                if (dragEnd - this.dragStart >= MIN_WIDTH) {
+                    if (!this.createdRegion) {
+                        this.renderer.getContainer().style.pointerEvents = 'none';
+                        this.createdRegion = this.createRegion(this.dragStart, dragEnd);
+                    }
+                    else {
+                        this.updateRegion(this.createdRegion, this.dragStart, dragEnd);
+                    }
+                }
+            }
+        };
+        this.handleMouseUp = () => {
+            if (this.createdRegion) {
+                this.addRegion(this.createdRegion);
+                this.createdRegion = null;
+            }
+            this.modifiedRegion = null;
+            this.isMoving = false;
+            this.dragStart = NaN;
+            this.renderer.getContainer().style.pointerEvents = '';
+        };
+        this.container = this.initContainer();
+        const unsubscribeReady = this.wavesurfer.on('ready', () => {
+            const wrapper = this.renderer.getContainer();
+            wrapper.appendChild(this.container);
+            unsubscribeReady();
+        });
+        this.subscriptions.push(unsubscribeReady);
+        const wsContainer = this.renderer.getContainer();
+        wsContainer.addEventListener('mousedown', this.handleMouseDown);
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+    }
+    /** Unmounts the regions */
+    destroy() {
+        var _a;
+        this.renderer.getContainer().removeEventListener('mousedown', this.handleMouseDown);
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp, true);
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
+        super.destroy();
+    }
+    initContainer() {
+        const div = document.createElement('div');
+        div.style.position = 'absolute';
+        div.style.top = '0';
+        div.style.left = '0';
+        div.style.width = '100%';
+        div.style.height = '100%';
+        div.style.zIndex = '3';
+        div.style.pointerEvents = 'none';
+        return div;
+    }
+    createRegionElement(start, end, title = '') {
+        const el = document.createElement('div');
+        el.style.position = 'absolute';
+        el.style.left = `${start}px`;
+        el.style.width = `${end - start}px`;
+        el.style.height = '100%';
+        el.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
+        el.style.transition = 'background-color 0.2s ease';
+        el.style.cursor = 'move';
+        el.style.pointerEvents = 'all';
+        el.title = title;
+        const leftHandle = document.createElement('div');
+        leftHandle.style.position = 'absolute';
+        leftHandle.style.left = '0';
+        leftHandle.style.width = '6px';
+        leftHandle.style.height = '100%';
+        leftHandle.style.borderLeft = '2px solid rgba(0, 0, 0, 0.5)';
+        leftHandle.style.cursor = 'ew-resize';
+        leftHandle.style.pointerEvents = 'all';
+        el.appendChild(leftHandle);
+        const rightHandle = document.createElement('div');
+        rightHandle.style.position = 'absolute';
+        rightHandle.style.right = '0';
+        rightHandle.style.width = '6px';
+        rightHandle.style.height = '100%';
+        rightHandle.style.borderRight = '2px solid rgba(0, 0, 0, 0.5)';
+        rightHandle.style.cursor = 'ew-resize';
+        rightHandle.style.pointerEvents = 'all';
+        el.appendChild(rightHandle);
+        leftHandle.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
+            this.isResizingLeft = true;
+            this.isMoving = false;
+        });
+        rightHandle.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
+            this.isResizingLeft = false;
+            this.isMoving = false;
+        });
+        el.addEventListener('mousedown', () => {
+            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
+            this.isMoving = true;
+        });
+        el.addEventListener('click', () => {
+            const region = this.regions.find((r) => r.element === el);
+            if (region) {
+                this.emit('region-clicked', { region });
+            }
+        });
+        this.container.appendChild(el);
+        return el;
+    }
+    createRegion(start, end, title = '') {
+        const duration = this.wavesurfer.getDuration();
+        const width = this.container.clientWidth;
+        return {
+            element: this.createRegionElement(start, end, title),
+            start,
+            end,
+            startTime: (start / width) * duration,
+            endTime: (end / width) * duration,
+            title,
+        };
+    }
+    addRegion(region) {
+        this.regions.push(region);
+        this.emit('region-created', { region });
+    }
+    updateRegion(region, start, end) {
+        if (start != null) {
+            region.start = start !== null && start !== void 0 ? start : region.start;
+            region.element.style.left = `${region.start}px`;
+            region.startTime = (start / this.container.clientWidth) * this.wavesurfer.getDuration();
+        }
+        if (end != null) {
+            region.end = end;
+            region.element.style.width = `${region.end - region.start}px`;
+            region.endTime = (end / this.container.clientWidth) * this.wavesurfer.getDuration();
+        }
+        this.emit('region-updated', { region });
+    }
+    moveRegion(region, delta) {
+        this.updateRegion(region, region.start + delta, region.end + delta);
+    }
+    /** Create a region at a given start and end time, with an optional title */
+    addRegionAtTime(startTime, endTime, title = '') {
+        const duration = this.wavesurfer.getDuration();
+        const width = this.container.clientWidth;
+        const start = (startTime / duration) * width;
+        const end = (endTime / duration) * width;
+        const region = this.createRegion(start, end, title);
+        this.addRegion(region);
+        return region;
+    }
+    /** Set the background color of a region */
+    setRegionColor(region, color) {
+        region.element.style.backgroundColor = color;
+    }
+}
+export default RegionsPlugin;

package/dist/renderer.d.ts

@@ -0,0 +1,34 @@
+import EventEmitter from './event-emitter.js';
+type RendererOptions = {
+    container: HTMLElement | string | null;
+    height: number;
+    waveColor: string;
+    progressColor: string;
+    minPxPerSec: number;
+    barWidth?: number;
+    barGap?: number;
+    barRadius?: number;
+};
+type RendererEvents = {
+    click: {
+        relativeX: number;
+    };
+};
+declare class Renderer extends EventEmitter<RendererEvents> {
+    private options;
+    private container;
+    private shadowRoot;
+    private mainCanvas;
+    private progressCanvas;
+    private cursor;
+    private ctx;
+    constructor(options: RendererOptions);
+    destroy(): void;
+    private renderLinePeaks;
+    private renderBarPeaks;
+    render(channelData: Float32Array[], duration: number, minPxPerSec?: number): void;
+    private createProgressMask;
+    renderProgress(progress: number, autoCenter?: boolean): void;
+    getContainer(): HTMLElement;
+}
+export default Renderer;

package/dist/renderer.js

@@ -0,0 +1,193 @@
+import EventEmitter from './event-emitter.js';
+class Renderer extends EventEmitter {
+    constructor(options) {
+        super();
+        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;
+        }
+        if (!container) {
+            throw new Error('Container not found');
+        }
+        const div = document.createElement('div');
+        const shadow = div.attachShadow({ mode: 'open' });
+        shadow.innerHTML = `
+      <style>
+        :host .scroll {
+          overflow-x: auto;
+          overflow-y: visible;
+          user-select: none;
+          width: 100%;
+          height: ${this.options.height}px;
+          position: relative;
+        }
+        :host .wrapper {
+          position: relative;
+          width: fit-content;
+          min-width: 100%;
+          height: 100%;
+          z-index: 2;
+        }
+        :host canvas {
+          display: block;
+          height: 100%;
+          min-width: 100%;
+          image-rendering: pixelated;
+        }
+        :host .progress {
+          position: absolute;
+          z-index: 2;
+          top: 0;
+          left: 0;
+          height: 100%;
+          pointer-events: none;
+          clip-path: inset(100%);
+        }
+        :host .cursor {
+          position: absolute;
+          z-index: 3;
+          top: 0;
+          left: 0;
+          height: 100%;
+          border-right: 1px solid ${this.options.progressColor};
+        }
+      </style>
+
+      <div class="scroll">
+        <div class="wrapper">
+          <canvas></canvas>
+          <canvas class="progress"></canvas>
+          <div class="cursor"></div>
+        </div>
+      </div>
+    `;
+        this.container = div;
+        this.shadowRoot = shadow;
+        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 });
+        });
+    }
+    destroy() {
+        this.container.remove();
+    }
+    renderLinePeaks(channelData, width, height) {
+        const { ctx } = this;
+        ctx.clearRect(0, 0, width, height);
+        ctx.beginPath();
+        ctx.moveTo(0, height / 2);
+        // Channel 0 is left, 1 is right
+        const leftChannel = channelData[0];
+        const isMono = channelData.length === 1;
+        const rightChannel = isMono ? leftChannel : channelData[1];
+        // Draw left channel in the top half of the canvas
+        let prevX = -1;
+        let prevY = 0;
+        for (let i = 0, len = leftChannel.length; i < len; i++) {
+            const x = Math.round((i / leftChannel.length) * width);
+            const y = Math.round(((1 - leftChannel[i]) * height) / 2);
+            if (x !== prevX || y > prevY) {
+                ctx.lineTo(x, y);
+                prevX = x;
+                prevY = y;
+            }
+        }
+        // Draw right channel in the bottom half of the canvas
+        prevX = -1;
+        prevY = 0;
+        for (let i = rightChannel.length - 1; i >= 0; i--) {
+            const x = Math.round((i / rightChannel.length) * width);
+            const y = Math.round(((1 + rightChannel[i]) * height) / 2);
+            if (x !== prevX || (isMono ? y < -prevY : y > prevY)) {
+                ctx.lineTo(x, y);
+                prevX = x;
+                prevY = y;
+            }
+        }
+        ctx.strokeStyle = ctx.fillStyle = this.options.waveColor;
+        ctx.stroke();
+        ctx.fill();
+    }
+    renderBarPeaks(channelData, width, height) {
+        var _a, _b;
+        const { devicePixelRatio } = window;
+        const { ctx } = this;
+        ctx.clearRect(0, 0, width, height);
+        const barWidthOption = this.options.barWidth || 1;
+        const barWidth = barWidthOption * devicePixelRatio;
+        const barGap = ((_a = this.options.barGap) !== null && _a !== void 0 ? _a : barWidthOption / 2) * devicePixelRatio;
+        const barRadius = (_b = this.options.barRadius) !== null && _b !== void 0 ? _b : 0;
+        const leftChannel = channelData[0];
+        const isMono = channelData.length === 1;
+        const rightChannel = isMono ? leftChannel : channelData[1];
+        const barCount = Math.floor(width / (barWidth + barGap));
+        const leftChannelBars = new Float32Array(barCount);
+        const rightChannelBars = new Float32Array(barCount);
+        const barIndexScale = barCount / leftChannel.length;
+        const leftChannelLength = leftChannel.length;
+        for (let i = 0; i < leftChannelLength; i++) {
+            const barIndex = Math.round(i * barIndexScale);
+            leftChannelBars[barIndex] = Math.max(leftChannelBars[barIndex], leftChannel[i]);
+            rightChannelBars[barIndex] = (isMono ? Math.min : Math.max)(rightChannelBars[barIndex], rightChannel[i]);
+        }
+        ctx.beginPath();
+        for (let i = 0; i < barCount; i++) {
+            const leftBarHeight = Math.max(1, Math.round((leftChannelBars[i] * height) / 2));
+            const rightBarHeight = Math.max(1, Math.round(Math.abs(rightChannelBars[i] * height) / 2));
+            ctx.roundRect(i * (barWidth + barGap), height / 2 - leftBarHeight, barWidth, leftBarHeight + rightBarHeight, barRadius);
+        }
+        ctx.fillStyle = this.options.waveColor;
+        ctx.fill();
+    }
+    render(channelData, duration, minPxPerSec = this.options.minPxPerSec) {
+        const { devicePixelRatio } = window;
+        const width = Math.max(this.container.clientWidth * devicePixelRatio, duration * minPxPerSec);
+        const { height } = this.options;
+        this.mainCanvas.width = width;
+        this.mainCanvas.height = height;
+        this.mainCanvas.style.width = Math.round(width / devicePixelRatio) + 'px';
+        const renderingFn = this.options.barWidth ? this.renderBarPeaks : this.renderLinePeaks;
+        renderingFn.call(this, channelData, width, height);
+        this.createProgressMask();
+    }
+    createProgressMask() {
+        const progressCtx = this.progressCanvas.getContext('2d', { desynchronized: true });
+        if (!progressCtx) {
+            throw new Error('Failed to get canvas context');
+        }
+        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;
+        progressCtx.drawImage(this.mainCanvas, 0, 0);
+        progressCtx.globalCompositeOperation = 'source-in';
+        progressCtx.fillStyle = this.options.progressColor;
+        progressCtx.fillRect(0, 0, this.progressCanvas.width, this.progressCanvas.height);
+    }
+    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.container.scrollLeft = fullWidth * progress - center;
+            }
+        }
+    }
+    getContainer() {
+        return this.shadowRoot.querySelector('.scroll');
+    }
+}
+export default Renderer;

package/dist/timer.d.ts

@@ -0,0 +1,10 @@
+import EventEmitter from './event-emitter.js';
+type TimerEvents = {
+    tick: void;
+};
+declare class Timer extends EventEmitter<TimerEvents> {
+    private unsubscribe;
+    constructor();
+    destroy(): void;
+}
+export default Timer;

package/dist/timer.js

@@ -0,0 +1,17 @@
+import EventEmitter from './event-emitter.js';
+class Timer extends EventEmitter {
+    constructor() {
+        super();
+        this.unsubscribe = () => undefined;
+        this.unsubscribe = this.on('tick', () => {
+            requestAnimationFrame(() => {
+                this.emit('tick');
+            });
+        });
+        this.emit('tick');
+    }
+    destroy() {
+        this.unsubscribe();
+    }
+}
+export default Timer;

package/examples/bars.js

@@ -0,0 +1,19 @@
+import WaveSurfer from '/dist/index.js'
+
+const wavesurfer = WaveSurfer.create({
+  container: document.body,
+  waveColor: 'rgb(200, 0, 200)',
+  progressColor: 'rgb(100, 0, 100)',
+  url: 'https://wavesurfer-js.org/example/media/demo.wav',
+
+  // Set a bar width
+  barWidth: 2,
+  // Optionally, specify the spacing between bars
+  barGap: 1,
+  // And the bar radius
+  barRadius: 2,
+})
+
+wavesurfer.on('seek', function () {
+  wavesurfer.play()
+})

package/examples/basic.js

@@ -0,0 +1,8 @@
+import WaveSurfer from '/dist/index.js'
+
+const wavesurfer = WaveSurfer.create({
+  container: document.body,
+  waveColor: 'rgb(200, 0, 200)',
+  progressColor: 'rgb(100, 0, 100)',
+  url: 'https://wavesurfer-js.org/example/media/demo.wav'
+})

package/examples/gradient.js

@@ -0,0 +1,28 @@
+import WaveSurfer from '/dist/index.js'
+
+// Create a canvas gradient
+const ctx = document.createElement('canvas').getContext('2d')
+const gradient = ctx.createLinearGradient(0, 0, 0, 150)
+gradient.addColorStop(0, 'rgb(200, 0, 200)')
+gradient.addColorStop(0.7, 'rgb(100, 0, 100)')
+gradient.addColorStop(1, 'rgb(0, 0, 0)')
+
+// Default style with a gradient
+WaveSurfer.create({
+  container: document.body,
+  waveColor: gradient,
+  height: 200,
+  progressColor: 'rgba(0, 0, 100, 0.5)',
+  url: 'https://wavesurfer-js.org/example/media/demo.wav'
+})
+
+
+// SoundCloud-style bars
+WaveSurfer.create({
+  container: document.body,
+  waveColor: gradient,
+  height: 200,
+  barWidth: 2,
+  progressColor: 'rgba(0, 0, 100, 0.5)',
+  url: 'https://wavesurfer-js.org/example/media/demo.wav'
+})

package/examples/regions.js

@@ -0,0 +1,63 @@
+import WaveSurfer from '/dist/index.js'
+import RegionsPlugin from '/dist/plugins/regions.js'
+
+// Create an instance of WaveSurfer
+const ws = WaveSurfer.create({
+  container: document.body,
+  waveColor: 'rgb(200, 0, 200)',
+  progressColor: 'rgb(100, 0, 100)',
+  url: 'https://wavesurfer-js.org/example/media/demo.wav'
+})
+
+// Initialize the Regions plugin
+const wsRegions = ws.registerPlugin(RegionsPlugin)
+
+// Give regions a random color when they are created
+const random = (min, max) => Math.random() * (max - min) + min
+wsRegions.on('region-created', ({ region }) => {
+  wsRegions.setRegionColor(region, `rgba(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)}, 0.5)`)
+})
+
+// Create some regions at specific time ranges
+ws.on('ready', () => {
+  wsRegions.addRegionAtTime(4, 7, 'First region')
+  wsRegions.addRegionAtTime(9, 10, 'Middle region')
+  wsRegions.addRegionAtTime(12, 17, 'Last region')
+})
+
+// Loop a region on click
+let loop = true
+let activeRegion = null
+
+wsRegions.on('region-clicked', ({ region }) => {
+  ws.seekTo(region.startTime)
+  ws.play()
+  activeRegion = region
+})
+
+// Track the time
+ws.on('audioprocess', ({ currentTime }) => {
+  // When the end of the region is reached
+  if (activeRegion && ws.isPlaying() && (currentTime >= activeRegion.endTime)) {
+    if (loop) {
+      // If looping, jump to the start of the region
+      ws.seekTo(activeRegion.startTime)
+    } else {
+      // Otherwise, stop playing
+      ws.pause()
+      ws.seekTo(activeRegion.endTime)
+      activeRegion = null
+    }
+  }
+})
+
+// Toggle looping with a checkbox
+const p = document.createElement('p')
+p.innerHTML = `
+  <label>
+    <input type="checkbox" checked="${loop}" style="vertical-align: text-top" />
+    Loop regions on click
+  </label>
+`
+document.body.appendChild(p)
+document.querySelector('input').onclick = (e) => { loop = e.target.checked }

package/examples/video.js

@@ -0,0 +1,19 @@
+import WaveSurfer from '/dist/index.js'
+
+// Create a video element and add it to the DOM.
+// The video can also be defined in HTML, in which case we just get it by a selector.
+const video = document.createElement('video')
+video.crossOrigin = 'anonymous'
+video.controls = true
+video.style.width = '100%'
+video.src = 'https://wavesurfer-js.org/example/media/nasa.mp4'
+document.body.appendChild(video)
+
+// Initialize wavesurfer.js
+const ws = WaveSurfer.create({
+  container: document.body,
+  waveColor: 'rgb(200, 0, 200)',
+  progressColor: 'rgb(100, 0, 100)',
+  // Pass the video element in the `media` param
+  media: document.querySelector('video'),
+})