wavesurfer.js 7.0.0-alpha.4 → 7.0.0-alpha.41

package/dist/plugins/spectrogram.js

@@ -0,0 +1,165 @@
+import BasePlugin from '../base-plugin.js';
+class SpectrogramPlugin extends BasePlugin {
+    mediaSpectrogramer = null;
+    recordedUrl = '';
+    static create(options) {
+        return new SpectrogramPlugin(options || {});
+    }
+    loadBlob(data) {
+        const blob = new Blob(data, { type: 'audio/webm' });
+        this.recordedUrl = URL.createObjectURL(blob);
+        this.wavesurfer?.load(this.recordedUrl);
+    }
+    // Function to process frequency data
+    processFrequencyData(dataArray, sampleRate) {
+        // Smooth the dataArray using a moving average
+        const windowSize = 5; // Adjust the window size as needed
+        const smoothedDataArray = new Float32Array(dataArray.length);
+        for (let i = 0; i < dataArray.length; i++) {
+            let sum = 0;
+            let count = 0;
+            for (let j = i - Math.floor(windowSize / 2); j <= i + Math.floor(windowSize / 2); j++) {
+                if (j >= 0 && j < dataArray.length) {
+                    sum += dataArray[j];
+                    count++;
+                }
+            }
+            smoothedDataArray[i] = sum / count;
+        }
+        // Find the first two peaks (formants) above a certain threshold
+        const threshold = -70; // Adjust the threshold as needed
+        const formants = [];
+        let prevValue = smoothedDataArray[0];
+        let prevSlope = 0;
+        for (let i = 1; i < smoothedDataArray.length - 1; i++) {
+            const slope = smoothedDataArray[i] - prevValue;
+            if (slope > 0 && prevSlope < 0 && smoothedDataArray[i] > threshold) {
+                formants.push(i);
+                if (formants.length >= 2) {
+                    break;
+                }
+            }
+            prevValue = smoothedDataArray[i];
+            prevSlope = slope;
+        }
+        // Convert the formant indices to frequencies
+        const nyquist = 0.5 * sampleRate;
+        const freqStep = nyquist / dataArray.length;
+        const formantFrequencies = formants.map(index => index * freqStep);
+        // Print the formant frequencies
+        if (formantFrequencies.length >= 2) {
+            return formantFrequencies;
+        }
+    }
+    render(stream) {
+        if (!this.container || !this.wavesurfer)
+            return () => undefined;
+        const canvas = document.createElement('canvas');
+        canvas.width = this.container.clientWidth;
+        canvas.height = this.container.clientHeight;
+        canvas.style.zIndex = '10';
+        this.container.appendChild(canvas);
+        const canvasCtx = canvas.getContext('2d');
+        const audioContext = new AudioContext();
+        const source = audioContext.createMediaStreamSource(stream);
+        const analyser = audioContext.createAnalyser();
+        source.connect(analyser);
+        // An array that will store real-time waveform data
+        const bufferLength = analyser.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+        // An array that will store FFT data
+        const freqArray = new Float32Array(bufferLength);
+        let animationId;
+        const drawWaveform = () => {
+            if (!canvasCtx)
+                return;
+            canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+            analyser.getByteTimeDomainData(dataArray);
+            analyser.getFloatFrequencyData(freqArray);
+            this.processFrequencyData(freqArray, audioContext.sampleRate);
+            canvasCtx.lineWidth = this.options.lineWidth || 2;
+            canvasCtx.strokeStyle = this.options.waveColor || this.wavesurfer?.options.waveColor || '';
+            canvasCtx.beginPath();
+            const sliceWidth = (canvas.width * 1.0) / bufferLength;
+            let x = 0;
+            for (let i = 0; i < bufferLength; i++) {
+                const v = dataArray[i] / 128.0;
+                const y = (v * canvas.height) / 2;
+                if (i === 0) {
+                    canvasCtx.moveTo(x, y);
+                }
+                else {
+                    canvasCtx.lineTo(x, y);
+                }
+                x += sliceWidth;
+            }
+            canvasCtx.lineTo(canvas.width, canvas.height / 2);
+            canvasCtx.stroke();
+            animationId = requestAnimationFrame(drawWaveform);
+        };
+        drawWaveform();
+        return () => {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+            if (source) {
+                source.disconnect();
+                source.mediaStream.getTracks().forEach((track) => track.stop());
+            }
+            if (audioContext) {
+                audioContext.close();
+            }
+            canvas?.remove();
+        };
+    }
+    cleanUp() {
+        this.stopSpectrograming();
+        this.wavesurfer?.empty();
+        if (this.recordedUrl) {
+            URL.revokeObjectURL(this.recordedUrl);
+            this.recordedUrl = '';
+        }
+    }
+    async startSpectrograming() {
+        this.cleanUp();
+        let stream;
+        try {
+            stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        }
+        catch (err) {
+            throw new Error('Error accessing the microphone: ' + err.message);
+        }
+        const onStop = this.render(stream);
+        const mediaSpectrogramer = new MediaSpectrogramer(stream);
+        const recordedChunks = [];
+        mediaSpectrogramer.addEventListener('dataavailable', (event) => {
+            if (event.data.size > 0) {
+                recordedChunks.push(event.data);
+            }
+        });
+        mediaSpectrogramer.addEventListener('stop', () => {
+            onStop();
+            this.loadBlob(recordedChunks);
+            this.emit('stopSpectrograming');
+        });
+        mediaSpectrogramer.start();
+        this.emit('startSpectrograming');
+        this.mediaSpectrogramer = mediaSpectrogramer;
+    }
+    isSpectrograming() {
+        return this.mediaSpectrogramer?.state === 'recording';
+    }
+    stopSpectrograming() {
+        if (this.isSpectrograming()) {
+            this.mediaSpectrogramer?.stop();
+        }
+    }
+    getSpectrogramedUrl() {
+        return this.recordedUrl;
+    }
+    destroy() {
+        super.destroy();
+        this.cleanUp();
+    }
+}
+export default SpectrogramPlugin;

package/dist/plugins/timeline.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The Timeline plugin adds timestamps and notches under the waveform.
+ */
+import BasePlugin, { type WaveSurferPluginParams } from '../base-plugin.js';
+export type TimelinePluginOptions = {
+    /** The height of the timeline in pixels, defaults to 20 */
+    height?: number;
+    /** HTML container for the timeline, defaults to wavesufer's container */
+    container?: HTMLElement;
+    /** The duration of the timeline in seconds, defaults to wavesurfer's duration */
+    duration?: number;
+    /** Interval between ticks in seconds */
+    timeInterval?: number;
+    /** Interval between numeric labels */
+    primaryLabelInterval?: number;
+    /** Interval between secondary numeric labels */
+    secondaryLabelInterval?: number;
+};
+declare const defaultOptions: {
+    height: number;
+};
+export type TimelinePluginEvents = {
+    ready: [];
+};
+declare class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOptions> {
+    private timelineWrapper;
+    protected options: TimelinePluginOptions & typeof defaultOptions;
+    constructor(options: TimelinePluginOptions);
+    static create(options: TimelinePluginOptions): TimelinePlugin;
+    /** Called by wavesurfer, don't call manually */
+    init(params: WaveSurferPluginParams): void;
+    /** Unmount */
+    destroy(): void;
+    private initTimelineWrapper;
+    private formatTime;
+    private defaultTimeInterval;
+    private defaultPrimaryLabelInterval;
+    private defaultSecondaryLabelInterval;
+    private initTimeline;
+}
+export default TimelinePlugin;

package/dist/plugins/timeline.js

@@ -0,0 +1,135 @@
+/**
+ * The Timeline plugin adds timestamps and notches under the waveform.
+ */
+import BasePlugin from '../base-plugin.js';
+const defaultOptions = {
+    height: 20,
+};
+class TimelinePlugin extends BasePlugin {
+    constructor(options) {
+        super(options);
+        this.options = Object.assign({}, defaultOptions, options);
+        this.timelineWrapper = this.initTimelineWrapper();
+    }
+    static create(options) {
+        return new TimelinePlugin(options);
+    }
+    /** Called by wavesurfer, don't call manually */
+    init(params) {
+        super.init(params);
+        if (!this.wavesurfer || !this.wrapper) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        const container = this.options.container ?? this.wrapper;
+        container.appendChild(this.timelineWrapper);
+        if (this.options.duration) {
+            this.initTimeline(this.options.duration);
+        }
+        else {
+            this.subscriptions.push(this.wavesurfer.on('decode', (duration) => {
+                this.initTimeline(duration);
+            }));
+        }
+    }
+    /** Unmount */
+    destroy() {
+        this.timelineWrapper.remove();
+        super.destroy();
+    }
+    initTimelineWrapper() {
+        return document.createElement('div');
+    }
+    formatTime(seconds) {
+        if (seconds / 60 > 1) {
+            // calculate minutes and seconds from seconds count
+            const minutes = Math.round(seconds / 60);
+            seconds = Math.round(seconds % 60);
+            const paddedSeconds = `${seconds < 10 ? '0' : ''}${seconds}`;
+            return `${minutes}:${paddedSeconds}`;
+        }
+        const rounded = Math.round(seconds * 1000) / 1000;
+        return `${rounded}`;
+    }
+    // Return how many seconds should be between each notch
+    defaultTimeInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 1;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 5;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 15;
+        }
+        return Math.ceil(0.5 / pxPerSec) * 60;
+    }
+    // Return the cadence of notches that get labels in the primary color.
+    defaultPrimaryLabelInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 10;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 6;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 4;
+        }
+        return 4;
+    }
+    // Return the cadence of notches that get labels in the secondary color.
+    defaultSecondaryLabelInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 5;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 2;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 2;
+        }
+        return 2;
+    }
+    initTimeline(duration) {
+        const pxPerSec = this.timelineWrapper.scrollWidth / duration;
+        const timeInterval = this.options.timeInterval ?? this.defaultTimeInterval(pxPerSec);
+        const primaryLabelInterval = this.options.primaryLabelInterval ?? this.defaultPrimaryLabelInterval(pxPerSec);
+        const secondaryLabelInterval = this.options.secondaryLabelInterval ?? this.defaultSecondaryLabelInterval(pxPerSec);
+        const timeline = document.createElement('div');
+        timeline.setAttribute('style', `
+      height: ${this.options.height}px;
+      overflow: hidden;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      font-size: ${this.options.height / 2}px;
+      white-space: nowrap;
+    `);
+        const notchEl = document.createElement('div');
+        notchEl.setAttribute('style', `
+      width: 1px;
+      height: 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      overflow: visible;
+      border-left: 1px solid currentColor;
+      opacity: 0.25;
+    `);
+        for (let i = 0; i < duration; i += timeInterval) {
+            const notch = notchEl.cloneNode();
+            const isPrimary = i % primaryLabelInterval === 0;
+            const isSecondary = i % secondaryLabelInterval === 0;
+            if (isPrimary || isSecondary) {
+                notch.style.height = '100%';
+                notch.style.textIndent = '3px';
+                notch.textContent = this.formatTime(i);
+                if (isPrimary)
+                    notch.style.opacity = '1';
+            }
+            timeline.appendChild(notch);
+        }
+        this.timelineWrapper.appendChild(timeline);
+        this.emit('ready');
+    }
+}
+export default TimelinePlugin;

package/dist/plugins/timeline.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Timeline=t():e.Timeline=t()}(WaveSurfer,(()=>(()=>{"use strict";var e={284:(e,t,i)=>{i.d(t,{Z:()=>s});var n=i(139);class r extends n.Z{constructor(e){super(),this.subscriptions=[],this.options=e}init(e){this.wavesurfer=e.wavesurfer,this.container=e.container,this.wrapper=e.wrapper}destroy(){this.subscriptions.forEach((e=>e()))}}const s=r},139:(e,t,i)=>{i.d(t,{Z:()=>n});const n=class{constructor(){this.listeners={}}on(e,t){return this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),()=>this.un(e,t)}once(e,t){const i=this.on(e,t),n=this.on(e,(()=>{i(),n()}));return i}un(e,t){this.listeners[e]&&(t?this.listeners[e].delete(t):delete this.listeners[e])}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}}},t={};function i(n){var r=t[n];if(void 0!==r)return r.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,i),s.exports}i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{i.d(n,{default:()=>s});var e=i(284);const t={height:20};class r extends e.Z{constructor(e){super(e),this.options=Object.assign({},t,e),this.timelineWrapper=this.initTimelineWrapper()}static create(e){return new r(e)}init(e){if(super.init(e),!this.wavesurfer||!this.wrapper)throw Error("WaveSurfer is not initialized");(this.options.container??this.wrapper).appendChild(this.timelineWrapper),this.options.duration?this.initTimeline(this.options.duration):this.subscriptions.push(this.wavesurfer.on("decode",(e=>{this.initTimeline(e)})))}destroy(){this.timelineWrapper.remove(),super.destroy()}initTimelineWrapper(){return document.createElement("div")}formatTime(e){return e/60>1?`${Math.round(e/60)}:${(e=Math.round(e%60))<10?"0":""}${e}`:""+Math.round(1e3*e)/1e3}defaultTimeInterval(e){return e>=25?1:5*e>=25?5:15*e>=25?15:60*Math.ceil(.5/e)}defaultPrimaryLabelInterval(e){return e>=25?10:5*e>=25?6:4}defaultSecondaryLabelInterval(e){return e>=25?5:2}initTimeline(e){const t=this.timelineWrapper.scrollWidth/e,i=this.options.timeInterval??this.defaultTimeInterval(t),n=this.options.primaryLabelInterval??this.defaultPrimaryLabelInterval(t),r=this.options.secondaryLabelInterval??this.defaultSecondaryLabelInterval(t),s=document.createElement("div");s.setAttribute("style",`\n      height: ${this.options.height}px;\n      overflow: hidden;\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-end;\n      font-size: ${this.options.height/2}px;\n      white-space: nowrap;\n    `);const o=document.createElement("div");o.setAttribute("style","\n      width: 1px;\n      height: 50%;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-end;\n      overflow: visible;\n      border-left: 1px solid currentColor;\n      opacity: 0.25;\n    ");for(let t=0;t<e;t+=i){const e=o.cloneNode(),i=t%n==0;(i||t%r==0)&&(e.style.height="100%",e.style.textIndent="3px",e.textContent=this.formatTime(t),i&&(e.style.opacity="1")),s.appendChild(e)}this.timelineWrapper.appendChild(s),this.emit("ready")}}const s=r})(),n.default})()));

package/dist/renderer.d.ts

@@ -1,36 +1,50 @@
 import EventEmitter from './event-emitter.js';
-type RendererOptions = {
+type RendererRequiredParams = {
     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;
 };
 type RendererEvents = {
-    click: {
-        relativeX: number;
-    };
+    click: [relativeX: number];
 };
+type ChannelData = Float32Array[] | Array<number[]>;
 declare class Renderer extends EventEmitter<RendererEvents> {
+    private static MAX_CANVAS_WIDTH;
     private options;
     private container;
     private scrollContainer;
-    private mainCanvas;
-    private progressCanvas;
-    private cursor;
-    private ctx;
+    private wrapper;
+    private canvasWrapper;
+    private progressWrapper;
     private timeout;
-    constructor(options: RendererOptions);
+    private isScrolling;
+    private channelData;
+    private duration;
+    private resizeObserver;
+    constructor(params: RendererRequiredParams, options: RendererStyleOptions);
+    private initHtml;
+    setOptions(options: RendererStyleOptions): void;
     getContainer(): HTMLElement;
+    getWrapper(): HTMLElement;
     destroy(): void;
     private delay;
     private renderPeaks;
-    private createProgressMask;
-    render(channelData: Float32Array[], duration: number): void;
-    zoom(channelData: Float32Array[], duration: number, minPxPerSec: number): void;
+    render(channelData: ChannelData, duration: number): void;
+    reRender(): void;
+    zoom(minPxPerSec: number): void;
     renderProgress(progress: number, autoCenter?: boolean): void;
 }
 export default Renderer;