wavesurfer.js 7.12.2 → 7.12.3

package/dist/plugins/record.js

@@ -1 +1,319 @@
-function i(i,t,e,s){return new(e||(e=Promise))((function(r,o){function n(i){try{d(s.next(i))}catch(i){o(i)}}function a(i){try{d(s.throw(i))}catch(i){o(i)}}function d(i){var t;i.done?r(i.value):(t=i.value,t instanceof e?t:new e((function(i){i(t)}))).then(n,a)}d((s=s.apply(i,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{constructor(){this.listeners={}}on(i,t,e){if(this.listeners[i]||(this.listeners[i]=new Set),null==e?void 0:e.once){const e=(...s)=>{this.un(i,e),t(...s)};return this.listeners[i].add(e),()=>this.un(i,e)}return this.listeners[i].add(t),()=>this.un(i,t)}un(i,t){var e;null===(e=this.listeners[i])||void 0===e||e.delete(t)}once(i,t){return this.on(i,t,{once:!0})}unAll(){this.listeners={}}emit(i,...t){this.listeners[i]&&this.listeners[i].forEach((i=>i(...t)))}}class e extends t{constructor(i){super(),this.subscriptions=[],this.isDestroyed=!1,this.options=i}onInit(){}_init(i){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=i,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((i=>i())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}}class s extends t{constructor(){super(...arguments),this.animationFrameId=null,this.isRunning=!1}start(){if(this.isRunning)return;this.isRunning=!0;const i=()=>{this.isRunning&&(this.emit("tick"),this.animationFrameId=requestAnimationFrame(i))};i()}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}destroy(){this.stop()}}const r=100,o=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class n extends e{constructor(i){var t,e,r,o,n,a;super(Object.assign(Object.assign({},i),{audioBitsPerSecond:null!==(t=i.audioBitsPerSecond)&&void 0!==t?t:128e3,scrollingWaveform:null!==(e=i.scrollingWaveform)&&void 0!==e&&e,scrollingWaveformWindow:null!==(r=i.scrollingWaveformWindow)&&void 0!==r?r:5,continuousWaveform:null!==(o=i.continuousWaveform)&&void 0!==o&&o,renderRecordedAudio:null===(n=i.renderRecordedAudio)||void 0===n||n,mediaRecorderTimeslice:null!==(a=i.mediaRecorderTimeslice)&&void 0!==a?a:void 0})),this.stream=null,this.mediaRecorder=null,this.dataWindow=null,this.isWaveformPaused=!1,this.lastStartTime=0,this.lastDuration=0,this.duration=0,this.micStream=null,this.recordedBlobUrl=null,this.timer=new s,this.subscriptions.push(this.timer.on("tick",(()=>{const i=performance.now()-this.lastStartTime;this.duration=this.isPaused()?this.duration:this.lastDuration+i,this.emit("record-progress",this.duration)})))}static create(i){return new n(i||{})}renderMicStream(i){var t;const e=new AudioContext,s=e.createMediaStreamSource(i),o=e.createAnalyser();s.connect(o),(this.options.continuousWaveform||this.options.scrollingWaveform)&&(o.fftSize=32);const n=o.frequencyBinCount,a=new Float32Array(n);let d=0;this.wavesurfer&&(null!==(t=this.originalOptions)&&void 0!==t||(this.originalOptions=Object.assign({},this.wavesurfer.options)),this.wavesurfer.options.interact=!1,this.options.scrollingWaveform&&(this.wavesurfer.options.cursorWidth=0,this.wavesurfer.options.normalize=!0,this.wavesurfer.options.maxPeak=1));const h=setInterval((()=>{var i,t,e,s;if(!this.isWaveformPaused){if(o.getFloatTimeDomainData(a),this.options.scrollingWaveform){const i=Math.floor((this.options.scrollingWaveformWindow||0)*r);let t=0;for(let i=0;i<n;i++){const e=Math.abs(a[i]);e>t&&(t=e)}this.dataWindow||(this.dataWindow=new Float32Array(i));const e=new Float32Array(i);if(this.dataWindow&&this.dataWindow.length>0){const t=i-1,s=this.dataWindow.slice(-t);e.set(s,0)}e[i-1]=t,this.dataWindow=e}else if(this.options.continuousWaveform){if(!this.dataWindow){const e=this.options.continuousWaveformDuration?Math.round(this.options.continuousWaveformDuration*r):(null!==(t=null===(i=this.wavesurfer)||void 0===i?void 0:i.getWidth())&&void 0!==t?t:0)*window.devicePixelRatio;this.dataWindow=new Float32Array(e)}let e=0;for(let i=0;i<n;i++){const t=Math.abs(a[i]);t>e&&(e=t)}if(d+1>this.dataWindow.length){const i=new Float32Array(2*this.dataWindow.length);i.set(this.dataWindow,0),this.dataWindow=i}this.dataWindow[d]=e,d++}else this.dataWindow=a;if(this.wavesurfer){const i=(null!==(s=null===(e=this.dataWindow)||void 0===e?void 0:e.length)&&void 0!==s?s:0)/r;this.wavesurfer.load("",[this.dataWindow],this.options.scrollingWaveform?this.options.scrollingWaveformWindow:i).then((()=>{this.wavesurfer&&this.options.continuousWaveform&&(this.wavesurfer.setTime(this.getDuration()/1e3),this.wavesurfer.options.minPxPerSec||this.wavesurfer.setOptions({minPxPerSec:this.wavesurfer.getWidth()/this.wavesurfer.getDuration()}))})).catch((i=>{console.error("Error rendering real-time recording data:",i)}))}}}),10);return{onDestroy:()=>{clearInterval(h),null==s||s.disconnect(),null==e||e.close()},onEnd:()=>{this.isWaveformPaused=!0,this.stopMic()}}}startMic(t){return i(this,void 0,void 0,(function*(){let i;this.micStream&&this.stopMic();try{i=yield navigator.mediaDevices.getUserMedia({audio:null==t||t})}catch(i){throw new Error("Error accessing the microphone: "+i.message)}const e=this.renderMicStream(i);return this.micStream=e,this.unsubscribeDestroy=this.once("destroy",e.onDestroy),this.unsubscribeRecordEnd=this.once("record-end",e.onEnd),this.stream=i,i}))}stopMic(){var i,t,e;null===(i=this.micStream)||void 0===i||i.onDestroy(),null===(t=this.unsubscribeDestroy)||void 0===t||t.call(this),null===(e=this.unsubscribeRecordEnd)||void 0===e||e.call(this),this.micStream=null,this.unsubscribeDestroy=void 0,this.unsubscribeRecordEnd=void 0,this.stream&&(this.stream.getTracks().forEach((i=>i.stop())),this.stream=null,this.mediaRecorder=null)}startRecording(t){return i(this,void 0,void 0,(function*(){const i=this.stream||(yield this.startMic(t));this.dataWindow=null;const e=this.mediaRecorder||new MediaRecorder(i,{mimeType:this.options.mimeType||o.find((i=>MediaRecorder.isTypeSupported(i))),audioBitsPerSecond:this.options.audioBitsPerSecond});this.mediaRecorder=e,this.stopRecording();const s=[];e.ondataavailable=i=>{i.data.size>0&&s.push(i.data),this.emit("record-data-available",i.data)};const r=i=>{var t;const r=new Blob(s,{type:e.mimeType});this.emit(i,r),this.options.renderRecordedAudio&&(this.applyOriginalOptionsIfNeeded(),this.recordedBlobUrl&&URL.revokeObjectURL(this.recordedBlobUrl),this.recordedBlobUrl=URL.createObjectURL(r),null===(t=this.wavesurfer)||void 0===t||t.load(this.recordedBlobUrl))};e.onpause=()=>r("record-pause"),e.onstop=()=>r("record-end"),e.start(this.options.mediaRecorderTimeslice),this.lastStartTime=performance.now(),this.lastDuration=0,this.duration=0,this.isWaveformPaused=!1,this.timer.start(),this.emit("record-start")}))}getDuration(){return this.duration}isRecording(){var i;return"recording"===(null===(i=this.mediaRecorder)||void 0===i?void 0:i.state)}isPaused(){var i;return"paused"===(null===(i=this.mediaRecorder)||void 0===i?void 0:i.state)}isActive(){var i;return"inactive"!==(null===(i=this.mediaRecorder)||void 0===i?void 0:i.state)}stopRecording(){var i;this.isActive()&&(null===(i=this.mediaRecorder)||void 0===i||i.stop(),this.timer.stop())}pauseRecording(){var i,t;this.isRecording()&&(this.isWaveformPaused=!0,null===(i=this.mediaRecorder)||void 0===i||i.requestData(),null===(t=this.mediaRecorder)||void 0===t||t.pause(),this.timer.stop(),this.lastDuration=this.duration)}resumeRecording(){var i;this.isPaused()&&(this.isWaveformPaused=!1,null===(i=this.mediaRecorder)||void 0===i||i.resume(),this.timer.start(),this.lastStartTime=performance.now(),this.emit("record-resume"))}static getAvailableAudioDevices(){return i(this,void 0,void 0,(function*(){return navigator.mediaDevices.enumerateDevices().then((i=>i.filter((i=>"audioinput"===i.kind))))}))}destroy(){this.applyOriginalOptionsIfNeeded(),super.destroy(),this.stopRecording(),this.stopMic(),this.recordedBlobUrl&&(URL.revokeObjectURL(this.recordedBlobUrl),this.recordedBlobUrl=null)}applyOriginalOptionsIfNeeded(){this.wavesurfer&&this.originalOptions&&(this.wavesurfer.setOptions(this.originalOptions),delete this.originalOptions)}}export{n as default};
+/**
+ * Record audio from the microphone with a real-time waveform preview
+ */
+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';
+import Timer from '../timer.js';
+const DEFAULT_BITS_PER_SECOND = 128000;
+const DEFAULT_SCROLLING_WAVEFORM_WINDOW = 5;
+const FPS = 100;
+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 {
+    /** Create an instance of the Record plugin */
+    constructor(options) {
+        var _a, _b, _c, _d, _e, _f;
+        super(Object.assign(Object.assign({}, options), { audioBitsPerSecond: (_a = options.audioBitsPerSecond) !== null && _a !== void 0 ? _a : DEFAULT_BITS_PER_SECOND, scrollingWaveform: (_b = options.scrollingWaveform) !== null && _b !== void 0 ? _b : false, scrollingWaveformWindow: (_c = options.scrollingWaveformWindow) !== null && _c !== void 0 ? _c : DEFAULT_SCROLLING_WAVEFORM_WINDOW, continuousWaveform: (_d = options.continuousWaveform) !== null && _d !== void 0 ? _d : false, renderRecordedAudio: (_e = options.renderRecordedAudio) !== null && _e !== void 0 ? _e : true, mediaRecorderTimeslice: (_f = options.mediaRecorderTimeslice) !== null && _f !== void 0 ? _f : undefined }));
+        this.stream = null;
+        this.mediaRecorder = null;
+        this.dataWindow = null;
+        this.isWaveformPaused = false;
+        this.lastStartTime = 0;
+        this.lastDuration = 0;
+        this.duration = 0;
+        this.micStream = null;
+        this.recordedBlobUrl = null;
+        this.timer = new Timer();
+        this.subscriptions.push(this.timer.on('tick', () => {
+            const currentTime = performance.now() - this.lastStartTime;
+            this.duration = this.isPaused() ? this.duration : this.lastDuration + currentTime;
+            this.emit('record-progress', this.duration);
+        }));
+    }
+    /** Create an instance of the Record plugin */
+    static create(options) {
+        return new RecordPlugin(options || {});
+    }
+    renderMicStream(stream) {
+        var _a;
+        const audioContext = new AudioContext();
+        const source = audioContext.createMediaStreamSource(stream);
+        const analyser = audioContext.createAnalyser();
+        source.connect(analyser);
+        // Use smaller FFT size for more responsive peak detection
+        if (this.options.continuousWaveform || this.options.scrollingWaveform) {
+            analyser.fftSize = 32;
+        }
+        const bufferLength = analyser.frequencyBinCount;
+        const dataArray = new Float32Array(bufferLength);
+        let sampleIdx = 0;
+        if (this.wavesurfer) {
+            (_a = this.originalOptions) !== null && _a !== void 0 ? _a : (this.originalOptions = Object.assign({}, this.wavesurfer.options));
+            this.wavesurfer.options.interact = false;
+            if (this.options.scrollingWaveform) {
+                this.wavesurfer.options.cursorWidth = 0;
+                // Use fixed max peak in scrolling mode to prevent "dancing" waveform
+                this.wavesurfer.options.normalize = true;
+                this.wavesurfer.options.maxPeak = 1;
+            }
+        }
+        const drawWaveform = () => {
+            var _a, _b, _c, _d;
+            if (this.isWaveformPaused)
+                return;
+            analyser.getFloatTimeDomainData(dataArray);
+            if (this.options.scrollingWaveform) {
+                // Scrolling waveform - use peak values for smooth rendering
+                const windowSize = Math.floor((this.options.scrollingWaveformWindow || 0) * FPS);
+                // Calculate peak value from the current buffer
+                let maxValue = 0;
+                for (let i = 0; i < bufferLength; i++) {
+                    const value = Math.abs(dataArray[i]);
+                    if (value > maxValue) {
+                        maxValue = value;
+                    }
+                }
+                if (!this.dataWindow) {
+                    this.dataWindow = new Float32Array(windowSize);
+                }
+                const tempArray = new Float32Array(windowSize);
+                if (this.dataWindow && this.dataWindow.length > 0) {
+                    // Shift old data to the left, dropping the oldest sample
+                    const keepLength = windowSize - 1;
+                    const oldData = this.dataWindow.slice(-keepLength);
+                    tempArray.set(oldData, 0);
+                }
+                // Add new peak value at the end
+                tempArray[windowSize - 1] = maxValue;
+                this.dataWindow = tempArray;
+            }
+            else if (this.options.continuousWaveform) {
+                // Continuous waveform
+                if (!this.dataWindow) {
+                    const size = this.options.continuousWaveformDuration
+                        ? Math.round(this.options.continuousWaveformDuration * FPS)
+                        : ((_b = (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getWidth()) !== null && _b !== void 0 ? _b : 0) * window.devicePixelRatio;
+                    this.dataWindow = new Float32Array(size);
+                }
+                let maxValue = 0;
+                for (let i = 0; i < bufferLength; i++) {
+                    const value = Math.abs(dataArray[i]);
+                    if (value > maxValue) {
+                        maxValue = value;
+                    }
+                }
+                if (sampleIdx + 1 > this.dataWindow.length) {
+                    const tempArray = new Float32Array(this.dataWindow.length * 2);
+                    tempArray.set(this.dataWindow, 0);
+                    this.dataWindow = tempArray;
+                }
+                this.dataWindow[sampleIdx] = maxValue;
+                sampleIdx++;
+            }
+            else {
+                this.dataWindow = dataArray;
+            }
+            // Render the waveform
+            if (this.wavesurfer) {
+                const totalDuration = ((_d = (_c = this.dataWindow) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) / FPS;
+                this.wavesurfer
+                    .load('', [this.dataWindow], this.options.scrollingWaveform ? this.options.scrollingWaveformWindow : totalDuration)
+                    .then(() => {
+                    if (this.wavesurfer && this.options.continuousWaveform) {
+                        this.wavesurfer.setTime(this.getDuration() / 1000);
+                        if (!this.wavesurfer.options.minPxPerSec) {
+                            this.wavesurfer.setOptions({
+                                minPxPerSec: this.wavesurfer.getWidth() / this.wavesurfer.getDuration(),
+                            });
+                        }
+                    }
+                })
+                    .catch((err) => {
+                    console.error('Error rendering real-time recording data:', err);
+                });
+            }
+        };
+        const intervalId = setInterval(drawWaveform, 1000 / FPS);
+        const cleanup = () => {
+            clearInterval(intervalId);
+            source === null || source === void 0 ? void 0 : source.disconnect();
+            audioContext === null || audioContext === void 0 ? void 0 : audioContext.close();
+        };
+        return {
+            onDestroy: cleanup,
+            onEnd: () => {
+                this.isWaveformPaused = true;
+                this.stopMic();
+            },
+        };
+    }
+    /** Request access to the microphone and start monitoring incoming audio */
+    startMic(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Stop previous mic stream if exists to clean up AudioContext
+            if (this.micStream) {
+                this.stopMic();
+            }
+            let stream;
+            try {
+                stream = yield navigator.mediaDevices.getUserMedia({
+                    audio: options !== null && options !== void 0 ? options : true,
+                });
+            }
+            catch (err) {
+                throw new Error('Error accessing the microphone: ' + err.message);
+            }
+            const micStream = this.renderMicStream(stream);
+            this.micStream = micStream;
+            this.unsubscribeDestroy = this.once('destroy', micStream.onDestroy);
+            this.unsubscribeRecordEnd = this.once('record-end', micStream.onEnd);
+            this.stream = stream;
+            return stream;
+        });
+    }
+    /** Stop monitoring incoming audio */
+    stopMic() {
+        var _a, _b, _c;
+        (_a = this.micStream) === null || _a === void 0 ? void 0 : _a.onDestroy();
+        (_b = this.unsubscribeDestroy) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribeRecordEnd) === null || _c === void 0 ? void 0 : _c.call(this);
+        this.micStream = null;
+        this.unsubscribeDestroy = undefined;
+        this.unsubscribeRecordEnd = undefined;
+        if (!this.stream)
+            return;
+        this.stream.getTracks().forEach((track) => track.stop());
+        this.stream = null;
+        this.mediaRecorder = null;
+    }
+    /** Start recording audio from the microphone */
+    startRecording(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const stream = this.stream || (yield this.startMic(options));
+            this.dataWindow = null;
+            const mediaRecorder = this.mediaRecorder ||
+                new MediaRecorder(stream, {
+                    mimeType: this.options.mimeType || findSupportedMimeType(),
+                    audioBitsPerSecond: this.options.audioBitsPerSecond,
+                });
+            this.mediaRecorder = mediaRecorder;
+            this.stopRecording();
+            const recordedChunks = [];
+            mediaRecorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    recordedChunks.push(event.data);
+                }
+                this.emit('record-data-available', event.data);
+            };
+            const emitWithBlob = (ev) => {
+                var _a;
+                const blob = new Blob(recordedChunks, { type: mediaRecorder.mimeType });
+                this.emit(ev, blob);
+                if (this.options.renderRecordedAudio) {
+                    this.applyOriginalOptionsIfNeeded();
+                    // Revoke previous blob URL before creating a new one
+                    if (this.recordedBlobUrl) {
+                        URL.revokeObjectURL(this.recordedBlobUrl);
+                    }
+                    this.recordedBlobUrl = URL.createObjectURL(blob);
+                    (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.load(this.recordedBlobUrl);
+                }
+            };
+            mediaRecorder.onpause = () => emitWithBlob('record-pause');
+            mediaRecorder.onstop = () => emitWithBlob('record-end');
+            mediaRecorder.start(this.options.mediaRecorderTimeslice);
+            this.lastStartTime = performance.now();
+            this.lastDuration = 0;
+            this.duration = 0;
+            this.isWaveformPaused = false;
+            this.timer.start();
+            this.emit('record-start');
+        });
+    }
+    /** Get the duration of the recording */
+    getDuration() {
+        return this.duration;
+    }
+    /** Check if the audio is being recorded */
+    isRecording() {
+        var _a;
+        return ((_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.state) === 'recording';
+    }
+    isPaused() {
+        var _a;
+        return ((_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.state) === 'paused';
+    }
+    isActive() {
+        var _a;
+        return ((_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.state) !== 'inactive';
+    }
+    /** Stop the recording */
+    stopRecording() {
+        var _a;
+        if (this.isActive()) {
+            (_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.stop();
+            this.timer.stop();
+        }
+    }
+    /** Pause the recording */
+    pauseRecording() {
+        var _a, _b;
+        if (this.isRecording()) {
+            this.isWaveformPaused = true;
+            (_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.requestData();
+            (_b = this.mediaRecorder) === null || _b === void 0 ? void 0 : _b.pause();
+            this.timer.stop();
+            this.lastDuration = this.duration;
+        }
+    }
+    /** Resume the recording */
+    resumeRecording() {
+        var _a;
+        if (this.isPaused()) {
+            this.isWaveformPaused = false;
+            (_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.resume();
+            this.timer.start();
+            this.lastStartTime = performance.now();
+            this.emit('record-resume');
+        }
+    }
+    /** Get a list of available audio devices
+     * You can use this to get the device ID of the microphone to use with the startMic and startRecording methods
+     * Will return an empty array if the browser doesn't support the MediaDevices API or if the user has not granted access to the microphone
+     * You can ask for permission to the microphone by calling startMic
+     */
+    static getAvailableAudioDevices() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return navigator.mediaDevices
+                .enumerateDevices()
+                .then((devices) => devices.filter((device) => device.kind === 'audioinput'));
+        });
+    }
+    /** Destroy the plugin */
+    destroy() {
+        this.applyOriginalOptionsIfNeeded();
+        super.destroy();
+        this.stopRecording();
+        this.stopMic();
+        // Revoke blob URL to free memory
+        if (this.recordedBlobUrl) {
+            URL.revokeObjectURL(this.recordedBlobUrl);
+            this.recordedBlobUrl = null;
+        }
+    }
+    applyOriginalOptionsIfNeeded() {
+        if (this.wavesurfer && this.originalOptions) {
+            this.wavesurfer.setOptions(this.originalOptions);
+            delete this.originalOptions;
+        }
+    }
+}
+export default RecordPlugin;

package/dist/plugins/regions.d.ts

@@ -36,6 +36,8 @@ export type RegionEvents = {
     update: [side?: UpdateSide];
     /** When dragging or resizing is finished */
     'update-end': [side?: UpdateSide];
+    /** When the region needs to be re-rendered */
+    render: [];
     /** On play */
     play: [end?: number];
     /** On mouse click */