@meersagor/wavesurfer-vue 0.0.5 → 0.1.1

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

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

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

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

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