@meersagor/wavesurfer-vue 0.0.5 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,67 +1,66 @@
1
- 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";
2
- import I from "wavesurfer.js";
3
- const A = ({ containerRef: n, options: e }) => {
4
- const t = v(null), i = () => {
5
- n.value && (t.value = I.create({
1
+ 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";
2
+ import T from "wavesurfer.js";
3
+ const W = ({ containerRef: n, options: e }) => {
4
+ const t = h(null), i = () => {
5
+ n.value && (t.value = T.create({
6
6
  container: n.value,
7
7
  ...e
8
8
  }));
9
- }, s = () => {
9
+ }, r = () => {
10
10
  t.value && (t.value.destroy(), t.value = null);
11
11
  };
12
- return g(() => {
12
+ return p(() => {
13
13
  i();
14
- }), b(() => {
15
- s();
14
+ }), y(() => {
15
+ r();
16
16
  }), { waveSurfer: t };
17
- }, x = (n) => {
18
- const e = v(!1), t = v(!1), i = v(0), s = v(0), r = () => {
17
+ }, O = (n) => {
18
+ const e = h(!1), t = h(!1), i = h(0), r = h(0), s = () => {
19
19
  e.value = !1, t.value = !1, i.value = 0;
20
- }, o = (p) => {
21
- e.value = !0, t.value = !1, i.value = 0, s.value = p;
22
- }, u = () => {
20
+ }, o = (v) => {
21
+ e.value = !0, t.value = !1, i.value = 0, r.value = v;
22
+ }, l = () => {
23
23
  t.value = !0;
24
- }, d = () => {
24
+ }, a = () => {
25
25
  t.value = !1;
26
- }, l = () => {
26
+ }, u = () => {
27
27
  n.value && (i.value = n.value.getCurrentTime());
28
- }, c = () => {
28
+ }, d = () => {
29
29
  e.value = !1, t.value = !1;
30
30
  };
31
- return g(() => {
32
- 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));
33
- }), b(() => {
31
+ return p(() => {
32
+ 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));
33
+ }), y(() => {
34
34
  n.value && n.value.unAll();
35
35
  }), {
36
36
  isReady: e,
37
37
  isPlaying: t,
38
38
  currentTime: i,
39
- totalDuration: s
39
+ totalDuration: r
40
40
  };
41
- }, B = ({ containerRef: n, options: e }) => {
42
- const { waveSurfer: t } = A({ containerRef: n, options: e }), { isReady: i, totalDuration: s, isPlaying: r, currentTime: o } = x(t);
41
+ }, k = ({ containerRef: n, options: e }) => {
42
+ const { waveSurfer: t } = W({ containerRef: n, options: e }), { isReady: i, totalDuration: r, isPlaying: s, currentTime: o } = O(t);
43
43
  return {
44
44
  waveSurfer: t,
45
45
  isReady: i,
46
- totalDuration: s,
47
- isPlaying: r,
46
+ totalDuration: r,
47
+ isPlaying: s,
48
48
  currentTime: o
49
49
  };
50
- }, F = ["audioprocess", "click", "dblclick", "decode", "drag", "finish", "init", "interaction", "load", "loading", "pause", "play", "ready", "redraw", "redrawcomplete", "scroll", "seeking", "timeupdate", "zoom"], L = /* @__PURE__ */ T({
50
+ }, E = ["audioprocess", "click", "dblclick", "decode", "drag", "finish", "init", "interaction", "load", "loading", "pause", "play", "ready", "redraw", "redrawcomplete", "scroll", "seeking", "timeupdate", "zoom"], q = /* @__PURE__ */ b({
51
51
  __name: "WaveSurferPlayer",
52
52
  props: {
53
53
  options: {}
54
54
  },
55
55
  setup(n) {
56
- const e = n, t = v(null), { waveSurfer: i } = B({ containerRef: t, options: e.options }), s = O();
57
- return g(() => {
58
- F.forEach((r) => {
59
- var o;
60
- (o = i.value) == null || o.on(r, (...u) => {
61
- s == null || s.emit(r, ...u);
56
+ const e = n, t = h(null), { waveSurfer: i } = k({ containerRef: t, options: e.options }), r = A();
57
+ return p(() => {
58
+ E.forEach((s) => {
59
+ i.value?.on(s, (...o) => {
60
+ r?.emit(s, ...o);
62
61
  });
63
- }), s == null || s.emit("waveSurfer", i.value);
64
- }), (r, o) => (k(), E("div", {
62
+ }), r?.emit("waveSurfer", i.value);
63
+ }), (s, o) => (D(), M("div", {
65
64
  ref_key: "containerRef",
66
65
  ref: t
67
66
  }, null, 512));
@@ -81,41 +80,41 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
81
80
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
82
81
  PERFORMANCE OF THIS SOFTWARE.
83
82
  ***************************************************************************** */
84
- function w(n, e, t, i) {
85
- return new (t || (t = Promise))(function(s, r) {
86
- function o(l) {
83
+ function g(n, e, t, i) {
84
+ return new (t || (t = Promise))(function(r, s) {
85
+ function o(u) {
87
86
  try {
88
- d(i.next(l));
89
- } catch (c) {
90
- r(c);
87
+ a(i.next(u));
88
+ } catch (d) {
89
+ s(d);
91
90
  }
92
91
  }
93
- function u(l) {
92
+ function l(u) {
94
93
  try {
95
- d(i.throw(l));
96
- } catch (c) {
97
- r(c);
94
+ a(i.throw(u));
95
+ } catch (d) {
96
+ s(d);
98
97
  }
99
98
  }
100
- function d(l) {
101
- var c;
102
- l.done ? s(l.value) : (c = l.value, c instanceof t ? c : new t(function(p) {
103
- p(c);
104
- })).then(o, u);
99
+ function a(u) {
100
+ var d;
101
+ u.done ? r(u.value) : (d = u.value, d instanceof t ? d : new t(function(v) {
102
+ v(d);
103
+ })).then(o, l);
105
104
  }
106
- d((i = i.apply(n, e || [])).next());
105
+ a((i = i.apply(n, e || [])).next());
107
106
  });
108
107
  }
109
- class D {
108
+ class S {
110
109
  constructor() {
111
110
  this.listeners = {};
112
111
  }
113
112
  on(e, t, i) {
114
- if (this.listeners[e] || (this.listeners[e] = /* @__PURE__ */ new Set()), this.listeners[e].add(t), i == null ? void 0 : i.once) {
115
- const s = () => {
116
- this.un(e, s), this.un(e, t);
113
+ if (this.listeners[e] || (this.listeners[e] = /* @__PURE__ */ new Set()), this.listeners[e].add(t), i?.once) {
114
+ const r = () => {
115
+ this.un(e, r), this.un(e, t);
117
116
  };
118
- return this.on(e, s), s;
117
+ return this.on(e, r), r;
119
118
  }
120
119
  return () => this.un(e, t);
121
120
  }
@@ -133,7 +132,7 @@ class D {
133
132
  this.listeners[e] && this.listeners[e].forEach((i) => i(...t));
134
133
  }
135
134
  }
136
- class _ extends D {
135
+ class I extends S {
137
136
  constructor(e) {
138
137
  super(), this.subscriptions = [], this.options = e;
139
138
  }
@@ -146,7 +145,7 @@ class _ extends D {
146
145
  this.emit("destroy"), this.subscriptions.forEach((e) => e());
147
146
  }
148
147
  }
149
- class q extends D {
148
+ class x extends S {
150
149
  constructor() {
151
150
  super(...arguments), this.unsubscribe = () => {
152
151
  };
@@ -165,76 +164,76 @@ class q extends D {
165
164
  this.unsubscribe();
166
165
  }
167
166
  }
168
- const C = ["audio/webm", "audio/wav", "audio/mpeg", "audio/mp4", "audio/mp3"];
169
- class y extends _ {
167
+ const B = ["audio/webm", "audio/wav", "audio/mpeg", "audio/mp4", "audio/mp3"];
168
+ class R extends I {
170
169
  constructor(e) {
171
- var t, i, s, r;
172
- 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", () => {
170
+ var t, i, r, s;
171
+ 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", () => {
173
172
  const o = performance.now() - this.lastStartTime;
174
173
  this.duration = this.isPaused() ? this.duration : this.lastDuration + o, this.emit("record-progress", this.duration);
175
174
  }));
176
175
  }
177
176
  static create(e) {
178
- return new y(e || {});
177
+ return new R(e || {});
179
178
  }
180
179
  renderMicStream(e) {
181
- const t = new AudioContext(), i = t.createMediaStreamSource(e), s = t.createAnalyser();
182
- i.connect(s);
183
- const r = s.frequencyBinCount, o = new Float32Array(r);
184
- let u;
185
- const d = Math.floor((this.options.scrollingWaveformWindow || 0) * t.sampleRate), l = () => {
186
- var c;
180
+ const t = new AudioContext(), i = t.createMediaStreamSource(e), r = t.createAnalyser();
181
+ i.connect(r);
182
+ const s = r.frequencyBinCount, o = new Float32Array(s);
183
+ let l;
184
+ const a = Math.floor((this.options.scrollingWaveformWindow || 0) * t.sampleRate), u = () => {
185
+ var d;
187
186
  if (this.isWaveformPaused)
188
- return void (u = requestAnimationFrame(l));
189
- if (s.getFloatTimeDomainData(o), this.options.scrollingWaveform) {
190
- const R = Math.min(d, this.dataWindow ? this.dataWindow.length + r : r), a = new Float32Array(d);
187
+ return void (l = requestAnimationFrame(u));
188
+ if (r.getFloatTimeDomainData(o), this.options.scrollingWaveform) {
189
+ const f = Math.min(a, this.dataWindow ? this.dataWindow.length + s : s), c = new Float32Array(a);
191
190
  if (this.dataWindow) {
192
- const h = Math.max(0, d - this.dataWindow.length);
193
- a.set(this.dataWindow.slice(-R + r), h);
191
+ const m = Math.max(0, a - this.dataWindow.length);
192
+ c.set(this.dataWindow.slice(-f + s), m);
194
193
  }
195
- a.set(o, d - r), this.dataWindow = a;
194
+ c.set(o, a - s), this.dataWindow = c;
196
195
  } else
197
196
  this.dataWindow = o;
198
- const p = this.options.scrollingWaveformWindow;
199
- 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);
197
+ const v = this.options.scrollingWaveformWindow;
198
+ 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);
200
199
  };
201
- return l(), { onDestroy: () => {
202
- cancelAnimationFrame(u), i == null || i.disconnect(), t == null || t.close();
200
+ return u(), { onDestroy: () => {
201
+ cancelAnimationFrame(l), i?.disconnect(), t?.close();
203
202
  }, onEnd: () => {
204
- this.isWaveformPaused = !0, cancelAnimationFrame(u), this.stopMic();
203
+ this.isWaveformPaused = !0, cancelAnimationFrame(l), this.stopMic();
205
204
  } };
206
205
  }
207
206
  startMic(e) {
208
- return w(this, void 0, void 0, function* () {
207
+ return g(this, void 0, void 0, function* () {
209
208
  let t;
210
209
  try {
211
- t = yield navigator.mediaDevices.getUserMedia({ audio: !(e != null && e.deviceId) || { deviceId: e.deviceId } });
212
- } catch (r) {
213
- throw new Error("Error accessing the microphone: " + r.message);
210
+ t = yield navigator.mediaDevices.getUserMedia({ audio: !e?.deviceId || { deviceId: e.deviceId } });
211
+ } catch (s) {
212
+ throw new Error("Error accessing the microphone: " + s.message);
214
213
  }
215
- const { onDestroy: i, onEnd: s } = this.renderMicStream(t);
216
- return this.subscriptions.push(this.once("destroy", i)), this.subscriptions.push(this.once("record-end", s)), this.stream = t, t;
214
+ const { onDestroy: i, onEnd: r } = this.renderMicStream(t);
215
+ return this.subscriptions.push(this.once("destroy", i)), this.subscriptions.push(this.once("record-end", r)), this.stream = t, t;
217
216
  });
218
217
  }
219
218
  stopMic() {
220
219
  this.stream && (this.stream.getTracks().forEach((e) => e.stop()), this.stream = null, this.mediaRecorder = null);
221
220
  }
222
221
  startRecording(e) {
223
- return w(this, void 0, void 0, function* () {
222
+ return g(this, void 0, void 0, function* () {
224
223
  const t = this.stream || (yield this.startMic(e));
225
224
  this.dataWindow = null;
226
- const i = this.mediaRecorder || new MediaRecorder(t, { mimeType: this.options.mimeType || C.find((o) => MediaRecorder.isTypeSupported(o)), audioBitsPerSecond: this.options.audioBitsPerSecond });
225
+ const i = this.mediaRecorder || new MediaRecorder(t, { mimeType: this.options.mimeType || B.find((o) => MediaRecorder.isTypeSupported(o)), audioBitsPerSecond: this.options.audioBitsPerSecond });
227
226
  this.mediaRecorder = i, this.stopRecording();
228
- const s = [];
227
+ const r = [];
229
228
  i.ondataavailable = (o) => {
230
- o.data.size > 0 && s.push(o.data);
229
+ o.data.size > 0 && r.push(o.data);
231
230
  };
232
- const r = (o) => {
233
- var u;
234
- const d = new Blob(s, { type: i.mimeType });
235
- this.emit(o, d), this.options.renderRecordedAudio && (this.applyOriginalOptionsIfNeeded(), (u = this.wavesurfer) === null || u === void 0 || u.load(URL.createObjectURL(d)));
231
+ const s = (o) => {
232
+ var l;
233
+ const a = new Blob(r, { type: i.mimeType });
234
+ this.emit(o, a), this.options.renderRecordedAudio && (this.applyOriginalOptionsIfNeeded(), (l = this.wavesurfer) === null || l === void 0 || l.load(URL.createObjectURL(a)));
236
235
  };
237
- 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");
236
+ 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");
238
237
  });
239
238
  }
240
239
  getDuration() {
@@ -265,7 +264,7 @@ class y extends _ {
265
264
  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"));
266
265
  }
267
266
  static getAvailableAudioDevices() {
268
- return w(this, void 0, void 0, function* () {
267
+ return g(this, void 0, void 0, function* () {
269
268
  return navigator.mediaDevices.enumerateDevices().then((e) => e.filter((t) => t.kind === "audioinput"));
270
269
  });
271
270
  }
@@ -276,56 +275,51 @@ class y extends _ {
276
275
  this.wavesurfer && this.originalOptions && (this.wavesurfer.options.cursorWidth = this.originalOptions.cursorWidth, this.wavesurfer.options.interact = this.originalOptions.interact, delete this.originalOptions);
277
276
  }
278
277
  }
279
- const z = ({ containerRef: n, options: e }) => {
280
- const { waveSurfer: t } = A({ containerRef: n, options: e }), i = v(null), s = v(0), r = v(!1), o = v(!1), u = P(() => [
281
- Math.floor(s.value % 36e5 / 6e4),
278
+ const C = ({ containerRef: n, options: e }) => {
279
+ const { waveSurfer: t } = W({ containerRef: n, options: e }), i = h(null), r = h(0), s = h(!1), o = h(!1), l = w(() => [
280
+ Math.floor(r.value % 36e5 / 6e4),
282
281
  // minutes
283
- Math.floor(s.value % 6e4 / 1e3)
282
+ Math.floor(r.value % 6e4 / 1e3)
284
283
  // seconds
285
- ].map((a) => a < 10 ? "0" + a : a).join(":")), d = P(() => r.value || !o.value), l = () => {
286
- var a;
287
- i.value && ((a = i.value) == null || a.on("record-progress", (h) => {
288
- s.value = h;
289
- }));
290
- }, c = () => {
291
- var a, h, m, f;
292
- if ((a = i.value) != null && a.isRecording() || (h = i.value) != null && h.isPaused()) {
293
- (m = i.value) == null || m.stopRecording(), r.value = !1, o.value = !0;
284
+ ].map((c) => c < 10 ? "0" + c : c).join(":")), a = w(() => s.value || !o.value), u = () => {
285
+ i.value && i.value?.on("record-progress", (c) => {
286
+ r.value = c;
287
+ });
288
+ }, d = () => {
289
+ if (i.value?.isRecording() || i.value?.isPaused()) {
290
+ i.value?.stopRecording(), s.value = !1, o.value = !0;
294
291
  return;
295
292
  }
296
- (f = i.value) == null || f.startRecording(), r.value = !0, o.value = !1, l();
297
- }, p = () => new Promise((a) => {
298
- var m, f, W, S;
299
- let h;
300
- ((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) => {
301
- h = M, a(h);
293
+ i.value?.startRecording(), s.value = !0, o.value = !1, u();
294
+ }, v = () => new Promise((c) => {
295
+ let m;
296
+ (i.value?.isRecording() || i.value?.isPaused()) && (i.value?.stopRecording(), s.value = !1, o.value = !1), i.value?.on("record-end", (P) => {
297
+ m = P, c(m);
302
298
  });
303
- }), R = () => {
304
- var a, h, m;
305
- if ((a = i.value) != null && a.isPaused()) {
306
- (h = i.value) == null || h.resumeRecording(), r.value = !0, o.value = !1;
299
+ }), f = () => {
300
+ if (i.value?.isPaused()) {
301
+ i.value?.resumeRecording(), s.value = !0, o.value = !1;
307
302
  return;
308
303
  }
309
- r.value = !1, o.value = !0, (m = i.value) == null || m.pauseRecording();
304
+ s.value = !1, o.value = !0, i.value?.pauseRecording();
310
305
  };
311
- return g(() => {
312
- var h;
313
- const a = (h = t.value) == null ? void 0 : h.registerPlugin(y.create({ renderRecordedAudio: !1 }));
314
- a && (i.value = a);
306
+ return p(() => {
307
+ const c = t.value?.registerPlugin(R.create({ renderRecordedAudio: !1 }));
308
+ c && (i.value = c);
315
309
  }), {
316
310
  waveSurfer: t,
317
311
  waveSurferRecorder: i,
318
- currentTime: u,
319
- startRecording: c,
320
- stopRecording: p,
321
- pauseRecording: R,
322
- isRecording: r,
312
+ currentTime: l,
313
+ startRecording: d,
314
+ stopRecording: v,
315
+ pauseRecording: f,
316
+ isRecording: s,
323
317
  isPaused: o,
324
- isPauseResume: d
318
+ isPauseResume: a
325
319
  };
326
320
  };
327
321
  export {
328
- L as WaveSurferPlayer,
329
- B as useWaveSurfer,
330
- z as useWaveSurferRecorder
322
+ q as WaveSurferPlayer,
323
+ k as useWaveSurfer,
324
+ C as useWaveSurferRecorder
331
325
  };
@@ -1,4 +1,4 @@
1
- (function(f,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("wavesurfer.js")):typeof define=="function"&&define.amd?define(["exports","vue","wavesurfer.js"],n):(f=typeof globalThis<"u"?globalThis:f||self,n(f["@meersagor/wavesurfer-vue"]={},f.Vue,f.WaveSurfer))})(this,function(f,n,A){"use strict";const W=({containerRef:a,options:e})=>{const t=n.ref(null),i=()=>{a.value&&(t.value=A.create({container:a.value,...e}))},s=()=>{t.value&&(t.value.destroy(),t.value=null)};return n.onMounted(()=>{i()}),n.onUnmounted(()=>{s()}),{waveSurfer:t}},T=a=>{const e=n.ref(!1),t=n.ref(!1),i=n.ref(0),s=n.ref(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},d=()=>{t.value=!0},c=()=>{t.value=!1},l=()=>{a.value&&(i.value=a.value.getCurrentTime())},h=()=>{e.value=!1,t.value=!1};return n.onMounted(()=>{a.value&&(a.value.on("load",r),a.value.on("ready",o),a.value.on("play",d),a.value.on("pause",c),a.value.on("timeupdate",l),a.value.on("destroy",h))}),n.onUnmounted(()=>{a.value&&a.value.unAll()}),{isReady:e,isPlaying:t,currentTime:i,totalDuration:s}},S=({containerRef:a,options:e})=>{const{waveSurfer:t}=W({containerRef:a,options:e}),{isReady:i,totalDuration:s,isPlaying:r,currentTime:o}=T(t);return{waveSurfer:t,isReady:i,totalDuration:s,isPlaying:r,currentTime:o}},D=["audioprocess","click","dblclick","decode","drag","finish","init","interaction","load","loading","pause","play","ready","redraw","redrawcomplete","scroll","seeking","timeupdate","zoom"],O=n.defineComponent({__name:"WaveSurferPlayer",props:{options:{}},setup(a){const e=a,t=n.ref(null),{waveSurfer:i}=S({containerRef:t,options:e.options}),s=n.getCurrentInstance();return n.onMounted(()=>{D.forEach(r=>{var o;(o=i.value)==null||o.on(r,(...d)=>{s==null||s.emit(r,...d)})}),s==null||s.emit("waveSurfer",i.value)}),(r,o)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"containerRef",ref:t},null,512))}});/*! *****************************************************************************
1
+ (function(v,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("wavesurfer.js")):typeof define=="function"&&define.amd?define(["exports","vue","wavesurfer.js"],o):(v=typeof globalThis<"u"?globalThis:v||self,o(v["@meersagor/wavesurfer-vue"]={},v.Vue,v.WaveSurfer))})(this,function(v,o,S){"use strict";const R=({containerRef:a,options:e})=>{const t=o.ref(null),i=()=>{a.value&&(t.value=S.create({container:a.value,...e}))},r=()=>{t.value&&(t.value.destroy(),t.value=null)};return o.onMounted(()=>{i()}),o.onUnmounted(()=>{r()}),{waveSurfer:t}},P=a=>{const e=o.ref(!1),t=o.ref(!1),i=o.ref(0),r=o.ref(0),s=()=>{e.value=!1,t.value=!1,i.value=0},n=f=>{e.value=!0,t.value=!1,i.value=0,r.value=f},l=()=>{t.value=!0},u=()=>{t.value=!1},d=()=>{a.value&&(i.value=a.value.getCurrentTime())},c=()=>{e.value=!1,t.value=!1};return o.onMounted(()=>{a.value&&(a.value.on("load",s),a.value.on("ready",n),a.value.on("play",l),a.value.on("pause",u),a.value.on("timeupdate",d),a.value.on("destroy",c))}),o.onUnmounted(()=>{a.value&&a.value.unAll()}),{isReady:e,isPlaying:t,currentTime:i,totalDuration:r}},w=({containerRef:a,options:e})=>{const{waveSurfer:t}=R({containerRef:a,options:e}),{isReady:i,totalDuration:r,isPlaying:s,currentTime:n}=P(t);return{waveSurfer:t,isReady:i,totalDuration:r,isPlaying:s,currentTime:n}},b=["audioprocess","click","dblclick","decode","drag","finish","init","interaction","load","loading","pause","play","ready","redraw","redrawcomplete","scroll","seeking","timeupdate","zoom"],M=o.defineComponent({__name:"WaveSurferPlayer",props:{options:{}},setup(a){const e=a,t=o.ref(null),{waveSurfer:i}=w({containerRef:t,options:e.options}),r=o.getCurrentInstance();return o.onMounted(()=>{b.forEach(s=>{i.value?.on(s,(...n)=>{r?.emit(s,...n)})}),r?.emit("waveSurfer",i.value)}),(s,n)=>(o.openBlock(),o.createElementBlock("div",{ref_key:"containerRef",ref:t},null,512))}});/*! *****************************************************************************
2
2
  Copyright (c) Microsoft Corporation.
3
3
 
4
4
  Permission to use, copy, modify, and/or distribute this software for any
@@ -11,4 +11,4 @@
11
11
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
12
12
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
13
13
  PERFORMANCE OF THIS SOFTWARE.
14
- ***************************************************************************** */function y(a,e,t,i){return new(t||(t=Promise))(function(s,r){function o(l){try{c(i.next(l))}catch(h){r(h)}}function d(l){try{c(i.throw(l))}catch(h){r(h)}}function c(l){var h;l.done?s(l.value):(h=l.value,h instanceof t?h:new t(function(p){p(h)})).then(o,d)}c((i=i.apply(a,e||[])).next())})}class P{constructor(){this.listeners={}}on(e,t,i){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),i==null?void 0: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 k extends P{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 E extends P{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 I=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class R extends k{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 E,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)}))}static create(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 d;const c=Math.floor((this.options.scrollingWaveformWindow||0)*t.sampleRate),l=()=>{var h;if(this.isWaveformPaused)return void(d=requestAnimationFrame(l));if(s.getFloatTimeDomainData(o),this.options.scrollingWaveform){const w=Math.min(c,this.dataWindow?this.dataWindow.length+r:r),u=new Float32Array(c);if(this.dataWindow){const v=Math.max(0,c-this.dataWindow.length);u.set(this.dataWindow.slice(-w+r),v)}u.set(o,c-r),this.dataWindow=u}else this.dataWindow=o;const p=this.options.scrollingWaveformWindow;this.wavesurfer&&((h=this.originalOptions)!==null&&h!==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)),d=requestAnimationFrame(l)};return l(),{onDestroy:()=>{cancelAnimationFrame(d),i==null||i.disconnect(),t==null||t.close()},onEnd:()=>{this.isWaveformPaused=!0,cancelAnimationFrame(d),this.stopMic()}}}startMic(e){return y(this,void 0,void 0,function*(){let t;try{t=yield navigator.mediaDevices.getUserMedia({audio:!(e!=null&&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})}stopMic(){this.stream&&(this.stream.getTracks().forEach(e=>e.stop()),this.stream=null,this.mediaRecorder=null)}startRecording(e){return y(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||I.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 r=o=>{var d;const c=new Blob(s,{type:i.mimeType});this.emit(o,c),this.options.renderRecordedAudio&&(this.applyOriginalOptionsIfNeeded(),(d=this.wavesurfer)===null||d===void 0||d.load(URL.createObjectURL(c)))};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")})}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 y(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.options.cursorWidth=this.originalOptions.cursorWidth,this.wavesurfer.options.interact=this.originalOptions.interact,delete this.originalOptions)}}const j=({containerRef:a,options:e})=>{const{waveSurfer:t}=W({containerRef:a,options:e}),i=n.ref(null),s=n.ref(0),r=n.ref(!1),o=n.ref(!1),d=n.computed(()=>[Math.floor(s.value%36e5/6e4),Math.floor(s.value%6e4/1e3)].map(u=>u<10?"0"+u:u).join(":")),c=n.computed(()=>r.value||!o.value),l=()=>{var u;i.value&&((u=i.value)==null||u.on("record-progress",v=>{s.value=v}))},h=()=>{var u,v,m,g;if((u=i.value)!=null&&u.isRecording()||(v=i.value)!=null&&v.isPaused()){(m=i.value)==null||m.stopRecording(),r.value=!1,o.value=!0;return}(g=i.value)==null||g.startRecording(),r.value=!0,o.value=!1,l()},p=()=>new Promise(u=>{var m,g,b,M;let v;((m=i.value)!=null&&m.isRecording()||(g=i.value)!=null&&g.isPaused())&&((b=i.value)==null||b.stopRecording(),r.value=!1,o.value=!1),(M=i.value)==null||M.on("record-end",x=>{v=x,u(v)})}),w=()=>{var u,v,m;if((u=i.value)!=null&&u.isPaused()){(v=i.value)==null||v.resumeRecording(),r.value=!0,o.value=!1;return}r.value=!1,o.value=!0,(m=i.value)==null||m.pauseRecording()};return n.onMounted(()=>{var v;const u=(v=t.value)==null?void 0:v.registerPlugin(R.create({renderRecordedAudio:!1}));u&&(i.value=u)}),{waveSurfer:t,waveSurferRecorder:i,currentTime:d,startRecording:h,stopRecording:p,pauseRecording:w,isRecording:r,isPaused:o,isPauseResume:c}};f.WaveSurferPlayer=O,f.useWaveSurfer=S,f.useWaveSurferRecorder=j,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
14
+ ***************************************************************************** */function p(a,e,t,i){return new(t||(t=Promise))(function(r,s){function n(d){try{u(i.next(d))}catch(c){s(c)}}function l(d){try{u(i.throw(d))}catch(c){s(c)}}function u(d){var c;d.done?r(d.value):(c=d.value,c instanceof t?c:new t(function(f){f(c)})).then(n,l)}u((i=i.apply(a,e||[])).next())})}class W{constructor(){this.listeners={}}on(e,t,i){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),i?.once){const r=()=>{this.un(e,r),this.un(e,t)};return this.on(e,r),r}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 A extends W{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 T extends W{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 D=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class g extends A{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 T,this.subscriptions.push(this.timer.on("tick",()=>{const n=performance.now()-this.lastStartTime;this.duration=this.isPaused()?this.duration:this.lastDuration+n,this.emit("record-progress",this.duration)}))}static create(e){return new g(e||{})}renderMicStream(e){const t=new AudioContext,i=t.createMediaStreamSource(e),r=t.createAnalyser();i.connect(r);const s=r.frequencyBinCount,n=new Float32Array(s);let l;const u=Math.floor((this.options.scrollingWaveformWindow||0)*t.sampleRate),d=()=>{var c;if(this.isWaveformPaused)return void(l=requestAnimationFrame(d));if(r.getFloatTimeDomainData(n),this.options.scrollingWaveform){const y=Math.min(u,this.dataWindow?this.dataWindow.length+s:s),h=new Float32Array(u);if(this.dataWindow){const m=Math.max(0,u-this.dataWindow.length);h.set(this.dataWindow.slice(-y+s),m)}h.set(n,u-s),this.dataWindow=h}else this.dataWindow=n;const f=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],f)),l=requestAnimationFrame(d)};return d(),{onDestroy:()=>{cancelAnimationFrame(l),i?.disconnect(),t?.close()},onEnd:()=>{this.isWaveformPaused=!0,cancelAnimationFrame(l),this.stopMic()}}}startMic(e){return p(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)}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})}stopMic(){this.stream&&(this.stream.getTracks().forEach(e=>e.stop()),this.stream=null,this.mediaRecorder=null)}startRecording(e){return p(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||D.find(n=>MediaRecorder.isTypeSupported(n)),audioBitsPerSecond:this.options.audioBitsPerSecond});this.mediaRecorder=i,this.stopRecording();const r=[];i.ondataavailable=n=>{n.data.size>0&&r.push(n.data)};const s=n=>{var l;const u=new Blob(r,{type:i.mimeType});this.emit(n,u),this.options.renderRecordedAudio&&(this.applyOriginalOptionsIfNeeded(),(l=this.wavesurfer)===null||l===void 0||l.load(URL.createObjectURL(u)))};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")})}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 p(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.options.cursorWidth=this.originalOptions.cursorWidth,this.wavesurfer.options.interact=this.originalOptions.interact,delete this.originalOptions)}}const O=({containerRef:a,options:e})=>{const{waveSurfer:t}=R({containerRef:a,options:e}),i=o.ref(null),r=o.ref(0),s=o.ref(!1),n=o.ref(!1),l=o.computed(()=>[Math.floor(r.value%36e5/6e4),Math.floor(r.value%6e4/1e3)].map(h=>h<10?"0"+h:h).join(":")),u=o.computed(()=>s.value||!n.value),d=()=>{i.value&&i.value?.on("record-progress",h=>{r.value=h})},c=()=>{if(i.value?.isRecording()||i.value?.isPaused()){i.value?.stopRecording(),s.value=!1,n.value=!0;return}i.value?.startRecording(),s.value=!0,n.value=!1,d()},f=()=>new Promise(h=>{let m;(i.value?.isRecording()||i.value?.isPaused())&&(i.value?.stopRecording(),s.value=!1,n.value=!1),i.value?.on("record-end",k=>{m=k,h(m)})}),y=()=>{if(i.value?.isPaused()){i.value?.resumeRecording(),s.value=!0,n.value=!1;return}s.value=!1,n.value=!0,i.value?.pauseRecording()};return o.onMounted(()=>{const h=t.value?.registerPlugin(g.create({renderRecordedAudio:!1}));h&&(i.value=h)}),{waveSurfer:t,waveSurferRecorder:i,currentTime:l,startRecording:c,stopRecording:f,pauseRecording:y,isRecording:s,isPaused:n,isPauseResume:u}};v.WaveSurferPlayer=M,v.useWaveSurfer=w,v.useWaveSurferRecorder=O,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});
@@ -0,0 +1,16 @@
1
+ import type { PartialWaveSurferOptions } from '../types';
2
+ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
3
+ options: PartialWaveSurferOptions;
4
+ }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
5
+ options: PartialWaveSurferOptions;
6
+ }>>>, {}, {}>;
7
+ export default _default;
8
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
9
+ type __VLS_TypePropsToRuntimeProps<T> = {
10
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
11
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
12
+ } : {
13
+ type: import('vue').PropType<T[K]>;
14
+ required: true;
15
+ };
16
+ };
@@ -1 +1,2 @@
1
+ import type { UseWaveSurfer, WaveSurferIns } from '../types';
1
2
  export declare const useWaveSurfer: ({ containerRef, options }: WaveSurferIns) => UseWaveSurfer;