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

package/dist/plugins/record.js

@@ -0,0 +1,125 @@
+/**
+ * Record audio from the microphone, render a waveform and download the audio.
+ */
+import BasePlugin from '../base-plugin.js';
+class RecordPlugin extends BasePlugin {
+    constructor() {
+        super(...arguments);
+        this.mediaRecorder = null;
+        this.recordedUrl = '';
+    }
+    static create(options) {
+        return new RecordPlugin(options || {});
+    }
+    loadBlob(data) {
+        const blob = new Blob(data, { type: 'audio/webm' });
+        this.recordedUrl = URL.createObjectURL(blob);
+        this.wavesurfer?.load(this.recordedUrl);
+    }
+    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);
+        let animationId;
+        const drawWaveform = () => {
+            if (!canvasCtx)
+                return;
+            canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            analyser.getByteTimeDomainData(dataArray);
+            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.stopRecording();
+        this.wavesurfer?.empty();
+        if (this.recordedUrl) {
+            URL.revokeObjectURL(this.recordedUrl);
+            this.recordedUrl = '';
+        }
+    }
+    async startRecording() {
+        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 mediaRecorder = new MediaRecorder(stream);
+        const recordedChunks = [];
+        mediaRecorder.addEventListener('dataavailable', (event) => {
+            if (event.data.size > 0) {
+                recordedChunks.push(event.data);
+            }
+        });
+        mediaRecorder.addEventListener('stop', () => {
+            onStop();
+            this.loadBlob(recordedChunks);
+            this.emit('stopRecording');
+        });
+        mediaRecorder.start();
+        this.emit('startRecording');
+        this.mediaRecorder = mediaRecorder;
+    }
+    isRecording() {
+        return this.mediaRecorder?.state === 'recording';
+    }
+    stopRecording() {
+        if (this.isRecording()) {
+            this.mediaRecorder?.stop();
+        }
+    }
+    getRecordedUrl() {
+        return this.recordedUrl;
+    }
+    destroy() {
+        super.destroy();
+        this.cleanUp();
+    }
+}
+export default RecordPlugin;

package/dist/plugins/record.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.Record=t():e.Record=t()}(WaveSurfer,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var s in r)e.o(r,s)&&!e.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:r[s]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>o});const r=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 r=this.on(e,t),s=this.on(e,(()=>{r(),s()}));return r}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)))}},s=class extends r{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()))}};class i extends s{constructor(){super(...arguments),this.mediaRecorder=null,this.recordedUrl=""}static create(e){return new i(e||{})}loadBlob(e){const t=new Blob(e,{type:"audio/webm"});this.recordedUrl=URL.createObjectURL(t),this.wavesurfer?.load(this.recordedUrl)}render(e){if(!this.container||!this.wavesurfer)return()=>{};const t=document.createElement("canvas");t.width=this.container.clientWidth,t.height=this.container.clientHeight,t.style.zIndex="10",this.container.appendChild(t);const r=t.getContext("2d"),s=new AudioContext,i=s.createMediaStreamSource(e),o=s.createAnalyser();let n;i.connect(o);const c=()=>{if(!r)return;r.clearRect(0,0,t.width,t.height);const e=o.frequencyBinCount,s=new Uint8Array(e);o.getByteTimeDomainData(s),r.lineWidth=this.options.lineWidth||2,r.strokeStyle=this.options.waveColor||this.wavesurfer?.options.waveColor||"",r.beginPath();const i=1*t.width/e;let a=0;for(let o=0;o<e;o++){const e=s[o]/128*t.height/2;0===o?r.moveTo(a,e):r.lineTo(a,e),a+=i}r.lineTo(t.width,t.height/2),r.stroke(),n=requestAnimationFrame(c)};return c(),()=>{n&&cancelAnimationFrame(n),i&&(i.disconnect(),i.mediaStream.getTracks().forEach((e=>e.stop()))),s&&s.close(),t?.remove()}}cleanUp(){this.stopRecording(),this.wavesurfer?.empty(),this.recordedUrl&&(URL.revokeObjectURL(this.recordedUrl),this.recordedUrl="")}async startRecording(){let e;this.cleanUp();try{e=await navigator.mediaDevices.getUserMedia({audio:!0})}catch(e){throw new Error("Error accessing the microphone: "+e.message)}const t=this.render(e),r=new MediaRecorder(e),s=[];r.addEventListener("dataavailable",(e=>{e.data.size>0&&s.push(e.data)})),r.addEventListener("stop",(()=>{t(),this.loadBlob(s),this.emit("stopRecording")})),r.start(),this.emit("startRecording"),this.mediaRecorder=r}isRecording(){return"recording"===this.mediaRecorder?.state}stopRecording(){this.isRecording()&&this.mediaRecorder?.stop()}getRecordedUrl(){return this.recordedUrl}destroy(){super.destroy(),this.cleanUp()}}const o=i;return t.default})()));

package/dist/plugins/regions.d.ts

@@ -1,48 +1,95 @@
-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;
+/**
+ * Regions are visual overlays on the waveform that can be used to mark segments of audio.
+ * Regions can be clicked on, dragged and resized.
+ * You can set the color and content of each region, as well as their HTML content.
+ */
+import BasePlugin, { type WaveSurferPluginParams } from '../base-plugin.js';
+import EventEmitter from '../event-emitter.js';
+export type RegionsPluginOptions = undefined;
+export type RegionsPluginEvents = {
+    'region-created': [region: Region];
+    'region-updated': [region: Region];
+    'region-clicked': [region: Region, e: MouseEvent];
 };
-type RegionsPluginEvents = {
-    'region-created': {
-        region: Region;
-    };
-    'region-updated': {
-        region: Region;
-    };
-    'region-clicked': {
-        region: Region;
-    };
+export type RegionEvents = {
+    remove: [];
+    update: [];
+    'update-end': [];
+    play: [];
+    click: [event: MouseEvent];
+    dblclick: [event: MouseEvent];
+    over: [event: MouseEvent];
+    leave: [event: MouseEvent];
+};
+export type RegionParams = {
+    id?: string;
+    start: number;
+    end?: number;
+    drag?: boolean;
+    resize?: boolean;
+    color?: string;
+    content?: string | HTMLElement;
 };
-declare class RegionsPlugin extends BasePlugin<RegionsPluginEvents> {
-    private dragStart;
-    private wrapper;
+declare class Region extends EventEmitter<RegionEvents> {
+    private totalDuration;
+    element: HTMLElement;
+    id: string;
+    start: number;
+    end: number;
+    drag: boolean;
+    resize: boolean;
+    color: string;
+    content?: HTMLElement;
+    constructor(params: RegionParams, totalDuration: number);
+    private initElement;
+    private renderPosition;
+    private initMouseEvents;
+    private onStartMoving;
+    private onEndMoving;
+    private onUpdate;
+    private onMove;
+    private onResize;
+    private onEndResizing;
+    _setTotalDuration(totalDuration: number): void;
+    /** Play the region from start to end */
+    play(): void;
+    /** Update the region's options */
+    setOptions(options: {
+        color?: string;
+        drag?: boolean;
+        resize?: boolean;
+        start?: number;
+        end?: number;
+    }): void;
+    /** Remove the region */
+    remove(): void;
+}
+declare class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions> {
     private regions;
-    private createdRegion;
-    private modifiedRegion;
-    private isResizingLeft;
-    private isMoving;
+    private regionsContainer;
+    /** Create an instance of RegionsPlugin */
+    constructor(options?: RegionsPluginOptions);
     /** Create an instance of RegionsPlugin */
-    constructor(params: WaveSurferPluginParams);
-    /** Unmounts the regions */
+    static create(options?: RegionsPluginOptions): RegionsPlugin;
+    /** Called by wavesurfer, don't call manually */
+    init(params: WaveSurferPluginParams): void;
+    private initRegionsContainer;
+    /** Get all created regions */
+    getRegions(): Region[];
+    private avoidOverlapping;
+    private saveRegion;
+    /** Create a region with given parameters */
+    addRegion(options: RegionParams): Region;
+    /** The same as addRegion but with spread params */
+    add(start: number, end: number, content?: string, color?: string): Region;
+    /**
+     * Enable creation of regions by dragging on an empty space on the waveform.
+     * Returns a function to disable the drag selection.
+     */
+    enableDragSelection(options: RegionParams): () => void;
+    /** Remove all regions */
+    clearRegions(): void;
+    /** Destroy the plugin and clean up */
     destroy(): void;
-    private initWrapper;
-    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 */
-    add(startTime: number, endTime: number, title?: string): Region;
-    /** Set the background color of a region */
-    setRegionColor(region: Region, color: string): void;
 }
 export default RegionsPlugin;