@meersagor/wavesurfer-vue 0.1.0 → 0.1.2

package/README.md

@@ -122,7 +122,7 @@ const formatTime = (seconds: number):string => [seconds / 60, seconds % 60].map(
 
 
 
-## useWaveSurferRecorder: composable method Return Types
+## use useWaveSurferRecorder composable method
 
 ```vue
 <script lang="ts" setup>
@@ -145,6 +145,9 @@ const options = computed(() => ({
 const { pauseRecording, startRecording, stopRecording, currentTime, isPauseResume } = useWaveSurferRecorder({
     containerRef,
     options: options.value,
+      recordPluginOptions:{
+        continuousWaveform: true
+      }
 })
 
 const startAudioRecordHandler = () => {
@@ -173,7 +176,7 @@ const stopHandler = async () => {
     </div>
 </template>
 ```
-
+## useWaveSurferRecorder: method Return Types
 ### `waveSurfer`
 
 -   Type: `Ref<WaveSurfer | null>`

package/dist/@meersagor-wavesurfer-vue.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue"),b=require("wavesurfer.js"),R=({containerRef:n,options:e})=>{const t=u.ref(null),i=()=>{n.value&&(t.value=b.create({container:n.value,...e}))},s=()=>{t.value&&(t.value.destroy(),t.value=null)};return u.onMounted(()=>{i()}),u.onUnmounted(()=>{s()}),{waveSurfer:t}},M=n=>{const e=u.ref(!1),t=u.ref(!1),i=u.ref(0),s=u.ref(0),o=()=>{e.value=!1,t.value=!1,i.value=0},r=f=>{e.value=!0,t.value=!1,i.value=0,s.value=f},a=()=>{t.value=!0},l=()=>{t.value=!1},v=()=>{n.value&&(i.value=n.value.getCurrentTime())},c=()=>{e.value=!1,t.value=!1};return u.onMounted(()=>{n.value&&(n.value.on("load",o),n.value.on("ready",r),n.value.on("play",a),n.value.on("pause",l),n.value.on("timeupdate",v),n.value.on("destroy",c))}),u.onUnmounted(()=>{n.value&&n.value.unAll()}),{isReady:e,isPlaying:t,currentTime:i,totalDuration:s}},y=({containerRef:n,options:e})=>{const{waveSurfer:t}=R({containerRef:n,options:e}),{isReady:i,totalDuration:s,isPlaying:o,currentTime:r}=M(t);return{waveSurfer:t,isReady:i,totalDuration:s,isPlaying:o,currentTime:r}},D=["audioprocess","click","dblclick","decode","drag","finish","init","interaction","load","loading","pause","play","ready","redraw","redrawcomplete","scroll","seeking","timeupdate","zoom"],T=u.defineComponent({__name:"WaveSurferPlayer",props:{options:{}},setup(n){const e=n,t=u.ref(null),{waveSurfer:i}=y({containerRef:t,options:e.options}),s=u.getCurrentInstance();return u.onMounted(()=>{D.forEach(o=>{i.value?.on(o,(...r)=>{s?.emit(o,...r)})}),s?.emit("waveSurfer",i.value)}),(o,r)=>(u.openBlock(),u.createElementBlock("div",{ref_key:"containerRef",ref:t},null,512))}});function w(n,e,t,i){return new(t||(t=Promise))(function(s,o){function r(v){try{l(i.next(v))}catch(c){o(c)}}function a(v){try{l(i.throw(v))}catch(c){o(c)}}function l(v){var c;v.done?s(v.value):(c=v.value,c instanceof t?c:new t(function(f){f(c)})).then(r,a)}l((i=i.apply(n,[])).next())})}class S{constructor(){this.listeners={}}on(e,t,i){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),i?.once){const s=()=>{this.un(e,s),this.un(e,t)};return this.on(e,s),s}return()=>this.un(e,t)}un(e,t){var i;(i=this.listeners[e])===null||i===void 0||i.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach(i=>i(...t))}}class O extends S{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())}}class A extends S{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",()=>{requestAnimationFrame(()=>{this.emit("tick")})}),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}}const E=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class W extends O{constructor(e){var t,i,s,o,r,a;super(Object.assign(Object.assign({},e),{audioBitsPerSecond:(t=e.audioBitsPerSecond)!==null&&t!==void 0?t:128e3,scrollingWaveform:(i=e.scrollingWaveform)!==null&&i!==void 0&&i,scrollingWaveformWindow:(s=e.scrollingWaveformWindow)!==null&&s!==void 0?s:5,continuousWaveform:(o=e.continuousWaveform)!==null&&o!==void 0&&o,renderRecordedAudio:(r=e.renderRecordedAudio)===null||r===void 0||r,mediaRecorderTimeslice:(a=e.mediaRecorderTimeslice)!==null&&a!==void 0?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.timer=new A,this.subscriptions.push(this.timer.on("tick",()=>{const l=performance.now()-this.lastStartTime;this.duration=this.isPaused()?this.duration:this.lastDuration+l,this.emit("record-progress",this.duration)}))}static create(e){return new W(e||{})}renderMicStream(e){var t;const i=new AudioContext,s=i.createMediaStreamSource(e),o=i.createAnalyser();s.connect(o),this.options.continuousWaveform&&(o.fftSize=32);const r=o.frequencyBinCount,a=new Float32Array(r);let l=0;this.wavesurfer&&((t=this.originalOptions)!==null&&t!==void 0||(this.originalOptions=Object.assign({},this.wavesurfer.options)),this.wavesurfer.options.interact=!1,this.options.scrollingWaveform&&(this.wavesurfer.options.cursorWidth=0));const v=setInterval(()=>{var c,f,p,g;if(!this.isWaveformPaused){if(o.getFloatTimeDomainData(a),this.options.scrollingWaveform){const d=Math.floor((this.options.scrollingWaveformWindow||0)*i.sampleRate),h=Math.min(d,this.dataWindow?this.dataWindow.length+r:r),m=new Float32Array(d);if(this.dataWindow){const P=Math.max(0,d-this.dataWindow.length);m.set(this.dataWindow.slice(-h+r),P)}m.set(a,d-r),this.dataWindow=m}else if(this.options.continuousWaveform){if(!this.dataWindow){const h=this.options.continuousWaveformDuration?Math.round(100*this.options.continuousWaveformDuration):((f=(c=this.wavesurfer)===null||c===void 0?void 0:c.getWidth())!==null&&f!==void 0?f:0)*window.devicePixelRatio;this.dataWindow=new Float32Array(h)}let d=0;for(let h=0;h<r;h++){const m=Math.abs(a[h]);m>d&&(d=m)}if(l+1>this.dataWindow.length){const h=new Float32Array(2*this.dataWindow.length);h.set(this.dataWindow,0),this.dataWindow=h}this.dataWindow[l]=d,l++}else this.dataWindow=a;if(this.wavesurfer){const d=((g=(p=this.dataWindow)===null||p===void 0?void 0:p.length)!==null&&g!==void 0?g:0)/100;this.wavesurfer.load("",[this.dataWindow],this.options.scrollingWaveform?this.options.scrollingWaveformWindow:d).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(h=>{console.error("Error rendering real-time recording data:",h)})}}},10);return{onDestroy:()=>{clearInterval(v),s?.disconnect(),i?.close()},onEnd:()=>{this.isWaveformPaused=!0,clearInterval(v),this.stopMic()}}}startMic(e){return w(this,void 0,void 0,function*(){let t;try{t=yield navigator.mediaDevices.getUserMedia({audio:!e?.deviceId||{deviceId:e.deviceId}})}catch(o){throw new Error("Error accessing the microphone: "+o.message)}const{onDestroy:i,onEnd:s}=this.renderMicStream(t);return this.subscriptions.push(this.once("destroy",i)),this.subscriptions.push(this.once("record-end",s)),this.stream=t,t})}stopMic(){this.stream&&(this.stream.getTracks().forEach(e=>e.stop()),this.stream=null,this.mediaRecorder=null)}startRecording(e){return w(this,void 0,void 0,function*(){const t=this.stream||(yield this.startMic(e));this.dataWindow=null;const i=this.mediaRecorder||new MediaRecorder(t,{mimeType:this.options.mimeType||E.find(r=>MediaRecorder.isTypeSupported(r)),audioBitsPerSecond:this.options.audioBitsPerSecond});this.mediaRecorder=i,this.stopRecording();const s=[];i.ondataavailable=r=>{r.data.size>0&&s.push(r.data),this.emit("record-data-available",r.data)};const o=r=>{var a;const l=new Blob(s,{type:i.mimeType});this.emit(r,l),this.options.renderRecordedAudio&&(this.applyOriginalOptionsIfNeeded(),(a=this.wavesurfer)===null||a===void 0||a.load(URL.createObjectURL(l)))};i.onpause=()=>o("record-pause"),i.onstop=()=>o("record-end"),i.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 e;return((e=this.mediaRecorder)===null||e===void 0?void 0:e.state)==="recording"}isPaused(){var e;return((e=this.mediaRecorder)===null||e===void 0?void 0:e.state)==="paused"}isActive(){var e;return((e=this.mediaRecorder)===null||e===void 0?void 0:e.state)!=="inactive"}stopRecording(){var e;this.isActive()&&((e=this.mediaRecorder)===null||e===void 0||e.stop(),this.timer.stop())}pauseRecording(){var e,t;this.isRecording()&&(this.isWaveformPaused=!0,(e=this.mediaRecorder)===null||e===void 0||e.requestData(),(t=this.mediaRecorder)===null||t===void 0||t.pause(),this.timer.stop(),this.lastDuration=this.duration)}resumeRecording(){var e;this.isPaused()&&(this.isWaveformPaused=!1,(e=this.mediaRecorder)===null||e===void 0||e.resume(),this.timer.start(),this.lastStartTime=performance.now(),this.emit("record-resume"))}static getAvailableAudioDevices(){return w(this,void 0,void 0,function*(){return navigator.mediaDevices.enumerateDevices().then(e=>e.filter(t=>t.kind==="audioinput"))})}destroy(){this.applyOriginalOptionsIfNeeded(),super.destroy(),this.stopRecording(),this.stopMic()}applyOriginalOptionsIfNeeded(){this.wavesurfer&&this.originalOptions&&(this.wavesurfer.setOptions(this.originalOptions),delete this.originalOptions)}}const I=({containerRef:n,options:e,recordPluginOptions:t})=>{const{waveSurfer:i}=R({containerRef:n,options:e}),s=u.ref(null),o=u.ref(0),r=u.ref(!1),a=u.ref(!1),l=u.computed(()=>[Math.floor(o.value%36e5/6e4),Math.floor(o.value%6e4/1e3)].map(d=>d<10?"0"+d:d).join(":")),v=u.computed(()=>r.value||!a.value),c=()=>{s.value&&s.value?.on("record-progress",d=>{o.value=d})},f=()=>{if(s.value?.isRecording()||s.value?.isPaused()){s.value?.stopRecording(),r.value=!1,a.value=!0;return}s.value?.startRecording(),r.value=!0,a.value=!1,c()},p=()=>new Promise(d=>{let h;(s.value?.isRecording()||s.value?.isPaused())&&(s.value?.stopRecording(),r.value=!1,a.value=!1),s.value?.on("record-end",m=>{h=m,d(h)})}),g=()=>{if(s.value?.isPaused()){s.value?.resumeRecording(),r.value=!0,a.value=!1;return}r.value=!1,a.value=!0,s.value?.pauseRecording()};return u.onMounted(()=>{const d=i.value?.registerPlugin(W.create({renderRecordedAudio:!1,...t}));d&&(s.value=d)}),{waveSurfer:i,waveSurferRecorder:s,currentTime:l,startRecording:f,stopRecording:p,pauseRecording:g,isRecording:r,isPaused:a,isPauseResume:v}};exports.WaveSurferPlayer=T;exports.useWaveSurfer=y;exports.useWaveSurferRecorder=I;

package/dist/@meersagor-wavesurfer-vue.js

@@ -1,120 +1,106 @@
-import { ref as h, onMounted as p, onUnmounted as y, defineComponent as b, getCurrentInstance as A, openBlock as D, createElementBlock as M, computed as w } from "vue";
-import T from "wavesurfer.js";
-const W = ({ containerRef: n, options: e }) => {
-  const t = h(null), i = () => {
-    n.value && (t.value = T.create({
+import { ref as v, onMounted as w, onUnmounted as S, defineComponent as T, getCurrentInstance as M, openBlock as A, createElementBlock as O, computed as y } from "vue";
+import E from "wavesurfer.js";
+const P = ({ containerRef: n, options: e }) => {
+  const t = v(null), i = () => {
+    n.value && (t.value = E.create({
       container: n.value,
       ...e
     }));
-  }, r = () => {
+  }, s = () => {
     t.value && (t.value.destroy(), t.value = null);
   };
-  return p(() => {
+  return w(() => {
     i();
-  }), y(() => {
-    r();
+  }), S(() => {
+    s();
   }), { waveSurfer: t };
-}, O = (n) => {
-  const e = h(!1), t = h(!1), i = h(0), r = h(0), s = () => {
+}, I = (n) => {
+  const e = v(!1), t = v(!1), i = v(0), s = v(0), r = () => {
     e.value = !1, t.value = !1, i.value = 0;
-  }, o = (v) => {
-    e.value = !0, t.value = !1, i.value = 0, r.value = v;
-  }, l = () => {
-    t.value = !0;
+  }, o = (m) => {
+    e.value = !0, t.value = !1, i.value = 0, s.value = m;
   }, a = () => {
+    t.value = !0;
+  }, d = () => {
     t.value = !1;
-  }, u = () => {
+  }, h = () => {
     n.value && (i.value = n.value.getCurrentTime());
-  }, d = () => {
+  }, l = () => {
     e.value = !1, t.value = !1;
   };
-  return p(() => {
-    n.value && (n.value.on("load", s), n.value.on("ready", o), n.value.on("play", l), n.value.on("pause", a), n.value.on("timeupdate", u), n.value.on("destroy", d));
-  }), y(() => {
+  return w(() => {
+    n.value && (n.value.on("load", r), n.value.on("ready", o), n.value.on("play", a), n.value.on("pause", d), n.value.on("timeupdate", h), n.value.on("destroy", l));
+  }), S(() => {
     n.value && n.value.unAll();
   }), {
     isReady: e,
     isPlaying: t,
     currentTime: i,
-    totalDuration: r
+    totalDuration: s
   };
 }, k = ({ containerRef: n, options: e }) => {
-  const { waveSurfer: t } = W({ containerRef: n, options: e }), { isReady: i, totalDuration: r, isPlaying: s, currentTime: o } = O(t);
+  const { waveSurfer: t } = P({ containerRef: n, options: e }), { isReady: i, totalDuration: s, isPlaying: r, currentTime: o } = I(t);
   return {
     waveSurfer: t,
     isReady: i,
-    totalDuration: r,
-    isPlaying: s,
+    totalDuration: s,
+    isPlaying: r,
     currentTime: o
   };
-}, E = ["audioprocess", "click", "dblclick", "decode", "drag", "finish", "init", "interaction", "load", "loading", "pause", "play", "ready", "redraw", "redrawcomplete", "scroll", "seeking", "timeupdate", "zoom"], q = /* @__PURE__ */ b({
+}, x = ["audioprocess", "click", "dblclick", "decode", "drag", "finish", "init", "interaction", "load", "loading", "pause", "play", "ready", "redraw", "redrawcomplete", "scroll", "seeking", "timeupdate", "zoom"], U = /* @__PURE__ */ T({
   __name: "WaveSurferPlayer",
   props: {
     options: {}
   },
   setup(n) {
-    const e = n, t = h(null), { waveSurfer: i } = k({ containerRef: t, options: e.options }), r = A();
-    return p(() => {
-      E.forEach((s) => {
-        i.value?.on(s, (...o) => {
-          r?.emit(s, ...o);
+    const e = n, t = v(null), { waveSurfer: i } = k({ containerRef: t, options: e.options }), s = M();
+    return w(() => {
+      x.forEach((r) => {
+        i.value?.on(r, (...o) => {
+          s?.emit(r, ...o);
         });
-      }), r?.emit("waveSurfer", i.value);
-    }), (s, o) => (D(), M("div", {
+      }), s?.emit("waveSurfer", i.value);
+    }), (r, o) => (A(), O("div", {
       ref_key: "containerRef",
       ref: t
     }, null, 512));
   }
 });
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-function g(n, e, t, i) {
-  return new (t || (t = Promise))(function(r, s) {
-    function o(u) {
+function W(n, e, t, i) {
+  return new (t || (t = Promise))(function(s, r) {
+    function o(h) {
       try {
-        a(i.next(u));
-      } catch (d) {
-        s(d);
+        d(i.next(h));
+      } catch (l) {
+        r(l);
       }
     }
-    function l(u) {
+    function a(h) {
       try {
-        a(i.throw(u));
-      } catch (d) {
-        s(d);
+        d(i.throw(h));
+      } catch (l) {
+        r(l);
       }
     }
-    function a(u) {
-      var d;
-      u.done ? r(u.value) : (d = u.value, d instanceof t ? d : new t(function(v) {
-        v(d);
-      })).then(o, l);
+    function d(h) {
+      var l;
+      h.done ? s(h.value) : (l = h.value, l instanceof t ? l : new t(function(m) {
+        m(l);
+      })).then(o, a);
     }
-    a((i = i.apply(n, e || [])).next());
+    d((i = i.apply(n, [])).next());
   });
 }
-class S {
+class b {
   constructor() {
     this.listeners = {};
   }
   on(e, t, i) {
     if (this.listeners[e] || (this.listeners[e] = /* @__PURE__ */ new Set()), this.listeners[e].add(t), i?.once) {
-      const r = () => {
-        this.un(e, r), this.un(e, t);
+      const s = () => {
+        this.un(e, s), this.un(e, t);
       };
-      return this.on(e, r), r;
+      return this.on(e, s), s;
     }
     return () => this.un(e, t);
   }
@@ -132,7 +118,7 @@ class S {
     this.listeners[e] && this.listeners[e].forEach((i) => i(...t));
   }
 }
-class I extends S {
+class B extends b {
   constructor(e) {
     super(), this.subscriptions = [], this.options = e;
   }
@@ -145,7 +131,7 @@ class I extends S {
     this.emit("destroy"), this.subscriptions.forEach((e) => e());
   }
 }
-class x extends S {
+class _ extends b {
   constructor() {
     super(...arguments), this.unsubscribe = () => {
     };
@@ -164,76 +150,98 @@ class x extends S {
     this.unsubscribe();
   }
 }
-const B = ["audio/webm", "audio/wav", "audio/mpeg", "audio/mp4", "audio/mp3"];
-class R extends I {
+const F = ["audio/webm", "audio/wav", "audio/mpeg", "audio/mp4", "audio/mp3"];
+class R extends B {
   constructor(e) {
-    var t, i, r, s;
-    super(Object.assign(Object.assign({}, e), { audioBitsPerSecond: (t = e.audioBitsPerSecond) !== null && t !== void 0 ? t : 128e3, scrollingWaveform: (i = e.scrollingWaveform) !== null && i !== void 0 && i, scrollingWaveformWindow: (r = e.scrollingWaveformWindow) !== null && r !== void 0 ? r : 5, renderRecordedAudio: (s = e.renderRecordedAudio) === null || s === void 0 || s })), this.stream = null, this.mediaRecorder = null, this.dataWindow = null, this.isWaveformPaused = !1, this.lastStartTime = 0, this.lastDuration = 0, this.duration = 0, this.timer = new x(), this.subscriptions.push(this.timer.on("tick", () => {
-      const o = performance.now() - this.lastStartTime;
-      this.duration = this.isPaused() ? this.duration : this.lastDuration + o, this.emit("record-progress", this.duration);
+    var t, i, s, r, o, a;
+    super(Object.assign(Object.assign({}, e), { audioBitsPerSecond: (t = e.audioBitsPerSecond) !== null && t !== void 0 ? t : 128e3, scrollingWaveform: (i = e.scrollingWaveform) !== null && i !== void 0 && i, scrollingWaveformWindow: (s = e.scrollingWaveformWindow) !== null && s !== void 0 ? s : 5, continuousWaveform: (r = e.continuousWaveform) !== null && r !== void 0 && r, renderRecordedAudio: (o = e.renderRecordedAudio) === null || o === void 0 || o, mediaRecorderTimeslice: (a = e.mediaRecorderTimeslice) !== null && a !== void 0 ? 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.timer = new _(), this.subscriptions.push(this.timer.on("tick", () => {
+      const d = performance.now() - this.lastStartTime;
+      this.duration = this.isPaused() ? this.duration : this.lastDuration + d, this.emit("record-progress", this.duration);
     }));
   }
   static create(e) {
     return new R(e || {});
   }
   renderMicStream(e) {
-    const t = new AudioContext(), i = t.createMediaStreamSource(e), r = t.createAnalyser();
-    i.connect(r);
-    const s = r.frequencyBinCount, o = new Float32Array(s);
-    let l;
-    const a = Math.floor((this.options.scrollingWaveformWindow || 0) * t.sampleRate), u = () => {
-      var d;
-      if (this.isWaveformPaused)
-        return void (l = requestAnimationFrame(u));
-      if (r.getFloatTimeDomainData(o), this.options.scrollingWaveform) {
-        const f = Math.min(a, this.dataWindow ? this.dataWindow.length + s : s), c = new Float32Array(a);
-        if (this.dataWindow) {
-          const m = Math.max(0, a - this.dataWindow.length);
-          c.set(this.dataWindow.slice(-f + s), m);
+    var t;
+    const i = new AudioContext(), s = i.createMediaStreamSource(e), r = i.createAnalyser();
+    s.connect(r), this.options.continuousWaveform && (r.fftSize = 32);
+    const o = r.frequencyBinCount, a = new Float32Array(o);
+    let d = 0;
+    this.wavesurfer && ((t = this.originalOptions) !== null && t !== void 0 || (this.originalOptions = Object.assign({}, this.wavesurfer.options)), this.wavesurfer.options.interact = !1, this.options.scrollingWaveform && (this.wavesurfer.options.cursorWidth = 0));
+    const h = setInterval(() => {
+      var l, m, p, g;
+      if (!this.isWaveformPaused) {
+        if (r.getFloatTimeDomainData(a), this.options.scrollingWaveform) {
+          const u = Math.floor((this.options.scrollingWaveformWindow || 0) * i.sampleRate), c = Math.min(u, this.dataWindow ? this.dataWindow.length + o : o), f = new Float32Array(u);
+          if (this.dataWindow) {
+            const D = Math.max(0, u - this.dataWindow.length);
+            f.set(this.dataWindow.slice(-c + o), D);
+          }
+          f.set(a, u - o), this.dataWindow = f;
+        } else if (this.options.continuousWaveform) {
+          if (!this.dataWindow) {
+            const c = this.options.continuousWaveformDuration ? Math.round(100 * this.options.continuousWaveformDuration) : ((m = (l = this.wavesurfer) === null || l === void 0 ? void 0 : l.getWidth()) !== null && m !== void 0 ? m : 0) * window.devicePixelRatio;
+            this.dataWindow = new Float32Array(c);
+          }
+          let u = 0;
+          for (let c = 0; c < o; c++) {
+            const f = Math.abs(a[c]);
+            f > u && (u = f);
+          }
+          if (d + 1 > this.dataWindow.length) {
+            const c = new Float32Array(2 * this.dataWindow.length);
+            c.set(this.dataWindow, 0), this.dataWindow = c;
+          }
+          this.dataWindow[d] = u, d++;
+        } else this.dataWindow = a;
+        if (this.wavesurfer) {
+          const u = ((g = (p = this.dataWindow) === null || p === void 0 ? void 0 : p.length) !== null && g !== void 0 ? g : 0) / 100;
+          this.wavesurfer.load("", [this.dataWindow], this.options.scrollingWaveform ? this.options.scrollingWaveformWindow : u).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((c) => {
+            console.error("Error rendering real-time recording data:", c);
+          });
         }
-        c.set(o, a - s), this.dataWindow = c;
-      } else
-        this.dataWindow = o;
-      const v = this.options.scrollingWaveformWindow;
-      this.wavesurfer && ((d = this.originalOptions) !== null && d !== void 0 || (this.originalOptions = { cursorWidth: this.wavesurfer.options.cursorWidth, interact: this.wavesurfer.options.interact }), this.wavesurfer.options.cursorWidth = 0, this.wavesurfer.options.interact = !1, this.wavesurfer.load("", [this.dataWindow], v)), l = requestAnimationFrame(u);
-    };
-    return u(), { onDestroy: () => {
-      cancelAnimationFrame(l), i?.disconnect(), t?.close();
+      }
+    }, 10);
+    return { onDestroy: () => {
+      clearInterval(h), s?.disconnect(), i?.close();
     }, onEnd: () => {
-      this.isWaveformPaused = !0, cancelAnimationFrame(l), this.stopMic();
+      this.isWaveformPaused = !0, clearInterval(h), this.stopMic();
     } };
   }
   startMic(e) {
-    return g(this, void 0, void 0, function* () {
+    return W(this, void 0, void 0, function* () {
       let t;
       try {
         t = yield navigator.mediaDevices.getUserMedia({ audio: !e?.deviceId || { deviceId: e.deviceId } });
-      } catch (s) {
-        throw new Error("Error accessing the microphone: " + s.message);
+      } catch (r) {
+        throw new Error("Error accessing the microphone: " + r.message);
       }
-      const { onDestroy: i, onEnd: r } = this.renderMicStream(t);
-      return this.subscriptions.push(this.once("destroy", i)), this.subscriptions.push(this.once("record-end", r)), this.stream = t, t;
+      const { onDestroy: i, onEnd: s } = this.renderMicStream(t);
+      return this.subscriptions.push(this.once("destroy", i)), this.subscriptions.push(this.once("record-end", s)), this.stream = t, t;
     });
   }
   stopMic() {
     this.stream && (this.stream.getTracks().forEach((e) => e.stop()), this.stream = null, this.mediaRecorder = null);
   }
   startRecording(e) {
-    return g(this, void 0, void 0, function* () {
+    return W(this, void 0, void 0, function* () {
       const t = this.stream || (yield this.startMic(e));
       this.dataWindow = null;
-      const i = this.mediaRecorder || new MediaRecorder(t, { mimeType: this.options.mimeType || B.find((o) => MediaRecorder.isTypeSupported(o)), audioBitsPerSecond: this.options.audioBitsPerSecond });
+      const i = this.mediaRecorder || new MediaRecorder(t, { mimeType: this.options.mimeType || F.find((o) => MediaRecorder.isTypeSupported(o)), audioBitsPerSecond: this.options.audioBitsPerSecond });
       this.mediaRecorder = i, this.stopRecording();
-      const r = [];
+      const s = [];
       i.ondataavailable = (o) => {
-        o.data.size > 0 && r.push(o.data);
+        o.data.size > 0 && s.push(o.data), this.emit("record-data-available", o.data);
       };
-      const s = (o) => {
-        var l;
-        const a = new Blob(r, { type: i.mimeType });
-        this.emit(o, a), this.options.renderRecordedAudio && (this.applyOriginalOptionsIfNeeded(), (l = this.wavesurfer) === null || l === void 0 || l.load(URL.createObjectURL(a)));
+      const r = (o) => {
+        var a;
+        const d = new Blob(s, { type: i.mimeType });
+        this.emit(o, d), this.options.renderRecordedAudio && (this.applyOriginalOptionsIfNeeded(), (a = this.wavesurfer) === null || a === void 0 || a.load(URL.createObjectURL(d)));
       };
-      i.onpause = () => s("record-pause"), i.onstop = () => s("record-end"), i.start(), this.lastStartTime = performance.now(), this.lastDuration = 0, this.duration = 0, this.isWaveformPaused = !1, this.timer.start(), this.emit("record-start");
+      i.onpause = () => r("record-pause"), i.onstop = () => r("record-end"), i.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() {
@@ -264,7 +272,7 @@ class R extends I {
     this.isPaused() && (this.isWaveformPaused = !1, (e = this.mediaRecorder) === null || e === void 0 || e.resume(), this.timer.start(), this.lastStartTime = performance.now(), this.emit("record-resume"));
   }
   static getAvailableAudioDevices() {
-    return g(this, void 0, void 0, function* () {
+    return W(this, void 0, void 0, function* () {
       return navigator.mediaDevices.enumerateDevices().then((e) => e.filter((t) => t.kind === "audioinput"));
     });
   }
@@ -272,54 +280,57 @@ class R extends I {
     this.applyOriginalOptionsIfNeeded(), super.destroy(), this.stopRecording(), this.stopMic();
   }
   applyOriginalOptionsIfNeeded() {
-    this.wavesurfer && this.originalOptions && (this.wavesurfer.options.cursorWidth = this.originalOptions.cursorWidth, this.wavesurfer.options.interact = this.originalOptions.interact, delete this.originalOptions);
+    this.wavesurfer && this.originalOptions && (this.wavesurfer.setOptions(this.originalOptions), delete this.originalOptions);
   }
 }
-const C = ({ containerRef: n, options: e }) => {
-  const { waveSurfer: t } = W({ containerRef: n, options: e }), i = h(null), r = h(0), s = h(!1), o = h(!1), l = w(() => [
+const q = ({ containerRef: n, options: e, recordPluginOptions: t }) => {
+  const { waveSurfer: i } = P({ containerRef: n, options: e }), s = v(null), r = v(0), o = v(!1), a = v(!1), d = y(() => [
     Math.floor(r.value % 36e5 / 6e4),
     // minutes
     Math.floor(r.value % 6e4 / 1e3)
     // seconds
-  ].map((c) => c < 10 ? "0" + c : c).join(":")), a = w(() => s.value || !o.value), u = () => {
-    i.value && i.value?.on("record-progress", (c) => {
-      r.value = c;
+  ].map((u) => u < 10 ? "0" + u : u).join(":")), h = y(() => o.value || !a.value), l = () => {
+    s.value && s.value?.on("record-progress", (u) => {
+      r.value = u;
     });
-  }, d = () => {
-    if (i.value?.isRecording() || i.value?.isPaused()) {
-      i.value?.stopRecording(), s.value = !1, o.value = !0;
+  }, m = () => {
+    if (s.value?.isRecording() || s.value?.isPaused()) {
+      s.value?.stopRecording(), o.value = !1, a.value = !0;
       return;
     }
-    i.value?.startRecording(), s.value = !0, o.value = !1, u();
-  }, v = () => new Promise((c) => {
-    let m;
-    (i.value?.isRecording() || i.value?.isPaused()) && (i.value?.stopRecording(), s.value = !1, o.value = !1), i.value?.on("record-end", (P) => {
-      m = P, c(m);
+    s.value?.startRecording(), o.value = !0, a.value = !1, l();
+  }, p = () => new Promise((u) => {
+    let c;
+    (s.value?.isRecording() || s.value?.isPaused()) && (s.value?.stopRecording(), o.value = !1, a.value = !1), s.value?.on("record-end", (f) => {
+      c = f, u(c);
     });
-  }), f = () => {
-    if (i.value?.isPaused()) {
-      i.value?.resumeRecording(), s.value = !0, o.value = !1;
+  }), g = () => {
+    if (s.value?.isPaused()) {
+      s.value?.resumeRecording(), o.value = !0, a.value = !1;
       return;
     }
-    s.value = !1, o.value = !0, i.value?.pauseRecording();
+    o.value = !1, a.value = !0, s.value?.pauseRecording();
   };
-  return p(() => {
-    const c = t.value?.registerPlugin(R.create({ renderRecordedAudio: !1 }));
-    c && (i.value = c);
+  return w(() => {
+    const u = i.value?.registerPlugin(R.create({
+      renderRecordedAudio: !1,
+      ...t
+    }));
+    u && (s.value = u);
   }), {
-    waveSurfer: t,
-    waveSurferRecorder: i,
-    currentTime: l,
-    startRecording: d,
-    stopRecording: v,
-    pauseRecording: f,
-    isRecording: s,
-    isPaused: o,
-    isPauseResume: a
+    waveSurfer: i,
+    waveSurferRecorder: s,
+    currentTime: d,
+    startRecording: m,
+    stopRecording: p,
+    pauseRecording: g,
+    isRecording: o,
+    isPaused: a,
+    isPauseResume: h
   };
 };
 export {
-  q as WaveSurferPlayer,
+  U as WaveSurferPlayer,
   k as useWaveSurfer,
-  C as useWaveSurferRecorder
+  q as useWaveSurferRecorder
 };

package/dist/src/components/WaveSurferPlayer.vue.d.ts

@@ -0,0 +1,7 @@
+import { PartialWaveSurferOptions } from '../types';
+declare const _default: import('vue').DefineComponent<{
+    options: PartialWaveSurferOptions;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    options: PartialWaveSurferOptions;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/{types → src}/composables/useWaveSurfer.d.ts

@@ -1,2 +1,2 @@
-import type { UseWaveSurfer, WaveSurferIns } from '../types';
+import { UseWaveSurfer, WaveSurferIns } from '../types';
 export declare const useWaveSurfer: ({ containerRef, options }: WaveSurferIns) => UseWaveSurfer;