wavesurfer.js 7.0.0-beta.8 → 7.0.0

package/dist/plugins/plugins/envelope.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Envelope is a visual UI for controlling the audio volume and add fade-in and fade-out effects.
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
+export type EnvelopePluginOptions = {
+    fadeInStart?: number;
+    fadeInEnd?: number;
+    fadeOutStart?: number;
+    fadeOutEnd?: number;
+    volume?: number;
+    lineWidth?: string;
+    lineColor?: string;
+    dragPointSize?: number;
+    dragPointFill?: string;
+    dragPointStroke?: string;
+};
+declare const defaultOptions: {
+    fadeInStart: number;
+    fadeOutEnd: number;
+    fadeInEnd: number;
+    fadeOutStart: number;
+    lineWidth: number;
+    lineColor: string;
+    dragPointSize: number;
+    dragPointFill: string;
+    dragPointStroke: string;
+};
+type Options = EnvelopePluginOptions & typeof defaultOptions;
+export type EnvelopePluginEvents = BasePluginEvents & {
+    'fade-in-change': [time: number];
+    'fade-out-change': [time: number];
+    'volume-change': [volume: number];
+};
+declare class EnvelopePlugin extends BasePlugin<EnvelopePluginEvents, EnvelopePluginOptions> {
+    protected options: Options;
+    private polyline;
+    private audioContext;
+    private gainNode;
+    private volume;
+    private isFadingIn;
+    private isFadingOut;
+    private readonly naturalVolumeExponent;
+    constructor(options: EnvelopePluginOptions);
+    static create(options: EnvelopePluginOptions): EnvelopePlugin;
+    destroy(): void;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    private initSvg;
+    private renderPolyline;
+    private initWebAudio;
+    private invertNaturalVolume;
+    private naturalVolume;
+    private setGainValue;
+    private initFadeEffects;
+    /** Get the current audio volume */
+    getCurrentVolume(): number;
+    /**
+     * Set the fade-in start time.
+     * @param time The time (in seconds) to set the fade-in start time to
+     * @param moveFadeInEnd Whether to move the drag point to the new time (default: false)
+     */
+    setStartTime(time: number, moveFadeInEnd?: boolean): void;
+    /** Set the fade-out end time.
+     * @param time The time (in seconds) to set the fade-out end time to
+     * @param moveFadeOutStart Whether to move the drag point to the new time (default: false)
+     */
+    setEndTime(time: number, moveFadeOutStart?: boolean): void;
+    /** Set the fade-in end time.
+     * @param time The time (in seconds) to set the fade-in end time to
+     */
+    setFadeInEnd(time: number): void;
+    /** Set the fade-out start time.
+     * @param time The time (in seconds) to set the fade-out start time to
+     */
+    setFadeOutStart(time: number): void;
+    /** Set the volume of the audio */
+    setVolume(volume: number): void;
+}
+export default EnvelopePlugin;

package/dist/plugins/plugins/hover.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The Hover plugin follows the mouse and shows a timestamp
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
+export type HoverPluginOptions = {
+    lineColor?: string;
+    lineWidth?: string | number;
+    labelColor?: string;
+    labelSize?: string | number;
+    labelBackground?: string;
+};
+declare const defaultOptions: {
+    lineWidth: number;
+    labelSize: number;
+};
+export type HoverPluginEvents = BasePluginEvents & {
+    hover: [relX: number];
+};
+declare class HoverPlugin extends BasePlugin<HoverPluginEvents, HoverPluginOptions> {
+    protected options: HoverPluginOptions & typeof defaultOptions;
+    private wrapper;
+    private label;
+    private unsubscribe;
+    constructor(options?: HoverPluginOptions);
+    static create(options?: HoverPluginOptions): HoverPlugin;
+    private addUnits;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    private formatTime;
+    private onPointerMove;
+    private onPointerLeave;
+    /** Unmount */
+    destroy(): void;
+}
+export default HoverPlugin;

package/dist/plugins/plugins/minimap.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Minimap is a tiny copy of the main waveform serving as a navigation tool.
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
+import { type WaveSurferOptions } from '../wavesurfer.js';
+export type MinimapPluginOptions = {
+    overlayColor?: string;
+    insertPosition?: InsertPosition;
+} & WaveSurferOptions;
+declare const defaultOptions: {
+    height: number;
+    overlayColor: string;
+    insertPosition: string;
+};
+export type MinimapPluginEvents = BasePluginEvents & {
+    ready: [];
+    interaction: [];
+};
+declare class MinimapPlugin extends BasePlugin<MinimapPluginEvents, MinimapPluginOptions> {
+    protected options: MinimapPluginOptions & typeof defaultOptions;
+    private minimapWrapper;
+    private miniWavesurfer;
+    private overlay;
+    private container;
+    constructor(options: MinimapPluginOptions);
+    static create(options: MinimapPluginOptions): MinimapPlugin;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    private initMinimapWrapper;
+    private initOverlay;
+    private initMinimap;
+    private getOverlayWidth;
+    private onRedraw;
+    private onScroll;
+    private initWaveSurferEvents;
+    /** Unmount */
+    destroy(): void;
+}
+export default MinimapPlugin;

package/dist/plugins/plugins/record.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Record audio from the microphone, render a waveform and download the audio.
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
+export type RecordPluginOptions = {
+    mimeType?: MediaRecorderOptions['mimeType'];
+    audioBitsPerSecond?: MediaRecorderOptions['audioBitsPerSecond'];
+};
+export type RecordPluginEvents = BasePluginEvents & {
+    startRecording: [];
+    stopRecording: [];
+};
+declare class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
+    private mediaRecorder;
+    private recordedUrl;
+    private savedCursorWidth;
+    private savedInteractive;
+    static create(options?: RecordPluginOptions): RecordPlugin;
+    private preventInteraction;
+    private restoreInteraction;
+    onInit(): void;
+    private loadBlob;
+    render(stream: MediaStream): () => void;
+    private cleanUp;
+    startRecording(): Promise<void>;
+    isRecording(): boolean;
+    stopRecording(): void;
+    getRecordedUrl(): string;
+    destroy(): void;
+}
+export default RecordPlugin;

package/dist/plugins/plugins/regions.d.ts

@@ -0,0 +1,115 @@
+/**
+ * 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 BasePluginEvents } from '../base-plugin.js';
+import EventEmitter from '../event-emitter.js';
+export type RegionsPluginOptions = undefined;
+export type RegionsPluginEvents = BasePluginEvents & {
+    'region-created': [region: Region];
+    'region-updated': [region: Region];
+    'region-clicked': [region: Region, e: MouseEvent];
+    'region-double-clicked': [region: Region, e: MouseEvent];
+};
+export type RegionEvents = {
+    /** Before the region is removed */
+    remove: [];
+    /** When the region's parameters are being updated */
+    update: [];
+    /** When dragging or resizing is finished */
+    'update-end': [];
+    /** On play */
+    play: [];
+    /** On mouse click */
+    click: [event: MouseEvent];
+    /** Double click */
+    dblclick: [event: MouseEvent];
+    /** Mouse over */
+    over: [event: MouseEvent];
+    /** Mouse leave */
+    leave: [event: MouseEvent];
+};
+export type RegionParams = {
+    /** The id of the region, any string */
+    id?: string;
+    /** The start position of the region (in seconds) */
+    start: number;
+    /** The end position of the region (in seconds) */
+    end?: number;
+    /** Allow/dissallow dragging the region */
+    drag?: boolean;
+    /** Allow/dissallow resizing the region */
+    resize?: boolean;
+    /** The color of the region (CSS color) */
+    color?: string;
+    /** Content string or HTML element */
+    content?: string | HTMLElement;
+    /** Min length when resizing (in seconds) */
+    minLength?: number;
+    /** Max length when resizing (in seconds) */
+    maxLength?: number;
+};
+declare class Region extends EventEmitter<RegionEvents> {
+    private totalDuration;
+    element: HTMLElement;
+    id: string;
+    start: number;
+    end: number;
+    drag: boolean;
+    resize: boolean;
+    color: string;
+    content?: HTMLElement;
+    minLength: number;
+    maxLength: number;
+    constructor(params: RegionParams, totalDuration: number);
+    private initElement;
+    private renderPosition;
+    private initMouseEvents;
+    private onStartMoving;
+    private onEndMoving;
+    _onUpdate(dx: number, side?: 'start' | 'end'): void;
+    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 regionsContainer;
+    /** Create an instance of RegionsPlugin */
+    constructor(options?: RegionsPluginOptions);
+    /** Create an instance of RegionsPlugin */
+    static create(options?: RegionsPluginOptions): RegionsPlugin;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    private initRegionsContainer;
+    /** Get all created regions */
+    getRegions(): Region[];
+    private avoidOverlapping;
+    private saveRegion;
+    /** Create a region with given parameters */
+    addRegion(options: RegionParams): Region;
+    /**
+     * Enable creation of regions by dragging on an empty space on the waveform.
+     * Returns a function to disable the drag selection.
+     */
+    enableDragSelection(options: Omit<RegionParams, 'start' | 'end'>): () => void;
+    /** Remove all regions */
+    clearRegions(): void;
+    /** Destroy the plugin and clean up */
+    destroy(): void;
+}
+export default RegionsPlugin;

package/dist/plugins/plugins/spectrogram.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Spectrogram plugin
+ *
+ * Render a spectrogram visualisation of the audio.
+ *
+ * @author Pavel Denisov (https://github.com/akreal)
+ * @see https://github.com/wavesurfer-js/wavesurfer.js/pull/337
+ *
+ * @example
+ * // ... initialising wavesurfer with the plugin
+ * var wavesurfer = WaveSurfer.create({
+ *   // wavesurfer options ...
+ *   plugins: [
+ *     SpectrogramPlugin.create({
+ *       // plugin options ...
+ *     })
+ *   ]
+ * });
+ */
+/**
+ * Spectrogram plugin for wavesurfer.
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
+export type SpectrogramPluginOptions = {
+    /** Selector of element or element in which to render */
+    container: string | HTMLElement;
+    /** Number of samples to fetch to FFT. Must be a power of 2. */
+    fftSamples?: number;
+    /** Height of the spectrogram view in CSS pixels */
+    height?: number;
+    /** Set to true to display frequency labels. */
+    labels?: boolean;
+    labelsBackground?: string;
+    labelsColor?: string;
+    labelsHzColor?: string;
+    /** Size of the overlapping window. Must be < fftSamples. Auto deduced from canvas size by default. */
+    noverlap?: number;
+    /** The window function to be used. */
+    windowFunc?: 'bartlett' | 'bartlettHann' | 'blackman' | 'cosine' | 'gauss' | 'hamming' | 'hann' | 'lanczoz' | 'rectangular' | 'triangular';
+    /** Some window functions have this extra value. (Between 0 and 1) */
+    alpha?: number;
+    /** Min frequency to scale spectrogram. */
+    frequencyMin?: number;
+    /** Max frequency to scale spectrogram. Set this to samplerate/2 to draw whole range of spectrogram. */
+    frequencyMax?: number;
+    /**
+     * A 256 long array of 4-element arrays. Each entry should contain a float between 0 and 1 and specify r, g, b, and alpha.
+     * Each entry should contain a float between 0 and 1 and specify r, g, b, and alpha.
+     */
+    colorMap?: number[][];
+};
+export type SpectrogramPluginEvents = BasePluginEvents & {
+    ready: [];
+    click: [relativeX: number];
+};
+declare class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramPluginOptions> {
+    static create(options?: SpectrogramPluginOptions): SpectrogramPlugin;
+    utils: {
+        style: (el: HTMLElement, styles: Record<string, string>) => CSSStyleDeclaration & Record<string, string>;
+    };
+    constructor(options: SpectrogramPluginOptions);
+    onInit(): void;
+    destroy(): void;
+    createWrapper(): void;
+    _wrapperClickHandler(event: any): void;
+    createCanvas(): void;
+    render(): void;
+    drawSpectrogram: (frequenciesData: any) => void;
+    getFrequencies(callback: any): void;
+    loadFrequenciesData(url: any): Promise<void>;
+    freqType(freq: any): string | number;
+    unitType(freq: any): "KHz" | "Hz";
+    loadLabels(bgFill: any, fontSizeFreq: any, fontSizeUnit: any, fontType: any, textColorFreq: any, textColorUnit: any, textAlign: any, container: any): void;
+    resample(oldMatrix: any): Uint8Array[];
+}
+export default SpectrogramPlugin;

package/dist/plugins/plugins/timeline.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The Timeline plugin adds timestamps and notches under the waveform.
+ */
+import BasePlugin, { type BasePluginEvents } 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;
+    /** Pass 'beforebegin' to insert the timeline on top of the waveform */
+    insertPosition?: InsertPosition;
+    /** 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;
+    /** Custom inline style to apply to the container */
+    style?: Partial<CSSStyleDeclaration> | string;
+    /** Turn the time into a suitable label for the time. */
+    formatTimeCallback?: (seconds: number) => string;
+};
+declare const defaultOptions: {
+    height: number;
+    formatTimeCallback: (seconds: number) => string;
+};
+export type TimelinePluginEvents = BasePluginEvents & {
+    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 */
+    onInit(): void;
+    /** Unmount */
+    destroy(): void;
+    private initTimelineWrapper;
+    private defaultTimeInterval;
+    private defaultPrimaryLabelInterval;
+    private defaultSecondaryLabelInterval;
+    private initTimeline;
+}
+export default TimelinePlugin;

package/dist/plugins/record.cjs

@@ -0,0 +1 @@
+"use strict";function e(e,t,r,s){return new(r||(r=Promise))((function(i,o){function n(e){try{d(s.next(e))}catch(e){o(e)}}function a(e){try{d(s.throw(e))}catch(e){o(e)}}function d(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(n,a)}d((s=s.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{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)))}}class r extends t{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class i extends r{constructor(){super(...arguments),this.mediaRecorder=null,this.recordedUrl="",this.savedCursorWidth=1,this.savedInteractive=!0}static create(e){return new i(e||{})}preventInteraction(){this.wavesurfer&&(this.savedCursorWidth=this.wavesurfer.options.cursorWidth||1,this.savedInteractive=this.wavesurfer.options.interact||!0,this.wavesurfer.options.cursorWidth=0,this.wavesurfer.options.interact=!1)}restoreInteraction(){this.wavesurfer&&(this.wavesurfer.options.cursorWidth=this.savedCursorWidth,this.wavesurfer.options.interact=this.savedInteractive)}onInit(){this.preventInteraction()}loadBlob(e,t){var r;const s=new Blob(e,{type:t});this.recordedUrl=URL.createObjectURL(s),this.restoreInteraction(),null===(r=this.wavesurfer)||void 0===r||r.load(this.recordedUrl)}render(e){const t=new AudioContext({sampleRate:8e3}),r=t.createMediaStreamSource(e),s=t.createAnalyser();r.connect(s);const i=s.frequencyBinCount,o=new Float32Array(i),n=i/t.sampleRate;let a;const d=()=>{var e;s.getFloatTimeDomainData(o),null===(e=this.wavesurfer)||void 0===e||e.load("",[o],n),a=requestAnimationFrame(d)};return d(),()=>{a&&cancelAnimationFrame(a),r&&(r.disconnect(),r.mediaStream.getTracks().forEach((e=>e.stop()))),t&&t.close()}}cleanUp(){var e;this.stopRecording(),null===(e=this.wavesurfer)||void 0===e||e.empty(),this.recordedUrl&&(URL.revokeObjectURL(this.recordedUrl),this.recordedUrl="")}startRecording(){return e(this,void 0,void 0,(function*(){let e;this.preventInteraction(),this.cleanUp();try{e=yield 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,{mimeType:this.options.mimeType||s.find((e=>MediaRecorder.isTypeSupported(e))),audioBitsPerSecond:this.options.audioBitsPerSecond}),i=[];r.addEventListener("dataavailable",(e=>{e.data.size>0&&i.push(e.data)})),r.addEventListener("stop",(()=>{t(),this.loadBlob(i,r.mimeType),this.emit("stopRecording")})),r.start(),this.emit("startRecording"),this.mediaRecorder=r}))}isRecording(){var e;return"recording"===(null===(e=this.mediaRecorder)||void 0===e?void 0:e.state)}stopRecording(){var e;this.isRecording()&&(null===(e=this.mediaRecorder)||void 0===e||e.stop())}getRecordedUrl(){return this.recordedUrl}destroy(){super.destroy(),this.cleanUp()}}module.exports=i;

package/dist/plugins/record.d.ts

@@ -1,19 +1,24 @@
 /**
  * Record audio from the microphone, render a waveform and download the audio.
  */
-import BasePlugin from '../base-plugin.js';
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
 export type RecordPluginOptions = {
-    realtimeWaveColor?: string;
-    lineWidth?: number;
+    mimeType?: MediaRecorderOptions['mimeType'];
+    audioBitsPerSecond?: MediaRecorderOptions['audioBitsPerSecond'];
 };
-export type RecordPluginEvents = {
+export type RecordPluginEvents = BasePluginEvents & {
     startRecording: [];
     stopRecording: [];
 };
 declare class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
     private mediaRecorder;
     private recordedUrl;
+    private savedCursorWidth;
+    private savedInteractive;
     static create(options?: RecordPluginOptions): RecordPlugin;
+    private preventInteraction;
+    private restoreInteraction;
+    onInit(): void;
     private loadBlob;
     render(stream: MediaStream): () => void;
     private cleanUp;

package/dist/plugins/record.esm.js

@@ -0,0 +1 @@
+function e(e,t,r,s){return new(r||(r=Promise))((function(i,n){function o(e){try{d(s.next(e))}catch(e){n(e)}}function a(e){try{d(s.throw(e))}catch(e){n(e)}}function d(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(o,a)}d((s=s.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{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)))}}class r extends t{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class i extends r{constructor(){super(...arguments),this.mediaRecorder=null,this.recordedUrl="",this.savedCursorWidth=1,this.savedInteractive=!0}static create(e){return new i(e||{})}preventInteraction(){this.wavesurfer&&(this.savedCursorWidth=this.wavesurfer.options.cursorWidth||1,this.savedInteractive=this.wavesurfer.options.interact||!0,this.wavesurfer.options.cursorWidth=0,this.wavesurfer.options.interact=!1)}restoreInteraction(){this.wavesurfer&&(this.wavesurfer.options.cursorWidth=this.savedCursorWidth,this.wavesurfer.options.interact=this.savedInteractive)}onInit(){this.preventInteraction()}loadBlob(e,t){var r;const s=new Blob(e,{type:t});this.recordedUrl=URL.createObjectURL(s),this.restoreInteraction(),null===(r=this.wavesurfer)||void 0===r||r.load(this.recordedUrl)}render(e){const t=new AudioContext({sampleRate:8e3}),r=t.createMediaStreamSource(e),s=t.createAnalyser();r.connect(s);const i=s.frequencyBinCount,n=new Float32Array(i),o=i/t.sampleRate;let a;const d=()=>{var e;s.getFloatTimeDomainData(n),null===(e=this.wavesurfer)||void 0===e||e.load("",[n],o),a=requestAnimationFrame(d)};return d(),()=>{a&&cancelAnimationFrame(a),r&&(r.disconnect(),r.mediaStream.getTracks().forEach((e=>e.stop()))),t&&t.close()}}cleanUp(){var e;this.stopRecording(),null===(e=this.wavesurfer)||void 0===e||e.empty(),this.recordedUrl&&(URL.revokeObjectURL(this.recordedUrl),this.recordedUrl="")}startRecording(){return e(this,void 0,void 0,(function*(){let e;this.preventInteraction(),this.cleanUp();try{e=yield 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,{mimeType:this.options.mimeType||s.find((e=>MediaRecorder.isTypeSupported(e))),audioBitsPerSecond:this.options.audioBitsPerSecond}),i=[];r.addEventListener("dataavailable",(e=>{e.data.size>0&&i.push(e.data)})),r.addEventListener("stop",(()=>{t(),this.loadBlob(i,r.mimeType),this.emit("stopRecording")})),r.start(),this.emit("startRecording"),this.mediaRecorder=r}))}isRecording(){var e;return"recording"===(null===(e=this.mediaRecorder)||void 0===e?void 0:e.state)}stopRecording(){var e;this.isRecording()&&(null===(e=this.mediaRecorder)||void 0===e||e.stop())}getRecordedUrl(){return this.recordedUrl}destroy(){super.destroy(),this.cleanUp()}}export{i as default};

package/dist/plugins/record.js

@@ -1,62 +1,66 @@
 /**
  * Record audio from the microphone, render a waveform and download the audio.
  */
+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 BasePlugin from '../base-plugin.js';
+const MIME_TYPES = ['audio/webm', 'audio/wav', 'audio/mpeg', 'audio/mp4', 'audio/mp3'];
+const findSupportedMimeType = () => MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType));
 class RecordPlugin extends BasePlugin {
     constructor() {
         super(...arguments);
         this.mediaRecorder = null;
         this.recordedUrl = '';
+        this.savedCursorWidth = 1;
+        this.savedInteractive = true;
     }
     static create(options) {
         return new RecordPlugin(options || {});
     }
-    loadBlob(data) {
-        const blob = new Blob(data, { type: 'audio/webm' });
+    preventInteraction() {
+        if (this.wavesurfer) {
+            this.savedCursorWidth = this.wavesurfer.options.cursorWidth || 1;
+            this.savedInteractive = this.wavesurfer.options.interact || true;
+            this.wavesurfer.options.cursorWidth = 0;
+            this.wavesurfer.options.interact = false;
+        }
+    }
+    restoreInteraction() {
+        if (this.wavesurfer) {
+            this.wavesurfer.options.cursorWidth = this.savedCursorWidth;
+            this.wavesurfer.options.interact = this.savedInteractive;
+        }
+    }
+    onInit() {
+        this.preventInteraction();
+    }
+    loadBlob(data, type) {
+        var _a;
+        const blob = new Blob(data, { type });
         this.recordedUrl = URL.createObjectURL(blob);
-        this.wavesurfer?.load(this.recordedUrl);
+        this.restoreInteraction();
+        (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.load(this.recordedUrl);
     }
     render(stream) {
-        if (!this.wavesurfer)
-            return () => undefined;
-        const container = this.wavesurfer.getWrapper();
-        const canvas = document.createElement('canvas');
-        canvas.width = container.clientWidth;
-        canvas.height = container.clientHeight;
-        canvas.style.zIndex = '10';
-        container.appendChild(canvas);
-        const canvasCtx = canvas.getContext('2d');
-        const audioContext = new AudioContext();
+        const audioContext = new AudioContext({ sampleRate: 8000 });
         const source = audioContext.createMediaStreamSource(stream);
         const analyser = audioContext.createAnalyser();
         source.connect(analyser);
+        const bufferLength = analyser.frequencyBinCount;
+        const dataArray = new Float32Array(bufferLength);
+        const sampleDuration = bufferLength / audioContext.sampleRate;
         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;
-            const color = this.options.realtimeWaveColor || this.wavesurfer?.options.waveColor || '';
-            canvasCtx.strokeStyle = Array.isArray(color) ? color[0] : color;
-            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();
+            var _a;
+            analyser.getFloatTimeDomainData(dataArray);
+            (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.load('', [dataArray], sampleDuration);
             animationId = requestAnimationFrame(drawWaveform);
         };
         drawWaveform();
@@ -71,49 +75,57 @@ class RecordPlugin extends BasePlugin {
             if (audioContext) {
                 audioContext.close();
             }
-            canvas?.remove();
         };
     }
     cleanUp() {
+        var _a;
         this.stopRecording();
-        this.wavesurfer?.empty();
+        (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.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);
+    startRecording() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.preventInteraction();
+            this.cleanUp();
+            let stream;
+            try {
+                stream = yield 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, {
+                mimeType: this.options.mimeType || findSupportedMimeType(),
+                audioBitsPerSecond: this.options.audioBitsPerSecond,
+            });
+            const recordedChunks = [];
+            mediaRecorder.addEventListener('dataavailable', (event) => {
+                if (event.data.size > 0) {
+                    recordedChunks.push(event.data);
+                }
+            });
+            mediaRecorder.addEventListener('stop', () => {
+                onStop();
+                this.loadBlob(recordedChunks, mediaRecorder.mimeType);
+                this.emit('stopRecording');
+            });
+            mediaRecorder.start();
+            this.emit('startRecording');
+            this.mediaRecorder = mediaRecorder;
         });
-        mediaRecorder.addEventListener('stop', () => {
-            onStop();
-            this.loadBlob(recordedChunks);
-            this.emit('stopRecording');
-        });
-        mediaRecorder.start();
-        this.emit('startRecording');
-        this.mediaRecorder = mediaRecorder;
     }
     isRecording() {
-        return this.mediaRecorder?.state === 'recording';
+        var _a;
+        return ((_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.state) === 'recording';
     }
     stopRecording() {
+        var _a;
         if (this.isRecording()) {
-            this.mediaRecorder?.stop();
+            (_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.stop();
         }
     }
     getRecordedUrl() {