- addAudioElement(blob)}
recorderControls={recorderControls}
/>
diff --git a/dist/assets/worker-224792ee.js b/dist/assets/worker-224792ee.js
new file mode 100644
index 000000000..4be75e95e
--- /dev/null
+++ b/dist/assets/worker-224792ee.js
@@ -0,0 +1 @@
+(function(){"use strict";const i="https://unpkg.com/@ffmpeg/core@0.12.9/dist/umd/ffmpeg-core.js";var E;(function(t){t.LOAD="LOAD",t.EXEC="EXEC",t.FFPROBE="FFPROBE",t.WRITE_FILE="WRITE_FILE",t.READ_FILE="READ_FILE",t.DELETE_FILE="DELETE_FILE",t.RENAME="RENAME",t.CREATE_DIR="CREATE_DIR",t.LIST_DIR="LIST_DIR",t.DELETE_DIR="DELETE_DIR",t.ERROR="ERROR",t.DOWNLOAD="DOWNLOAD",t.PROGRESS="PROGRESS",t.LOG="LOG",t.MOUNT="MOUNT",t.UNMOUNT="UNMOUNT"})(E||(E={}));const f=new Error("unknown message type"),a=new Error("ffmpeg is not loaded, call `await ffmpeg.load()` first"),u=new Error("failed to import ffmpeg-core.js");let r;const O=async({coreURL:t,wasmURL:n,workerURL:e})=>{const o=!r;try{t||(t=i),importScripts(t)}catch{if((!t||t===i)&&(t=i.replace("/umd/","/esm/")),self.createFFmpegCore=(await import(t)).default,!self.createFFmpegCore)throw u}const s=t,c=n||t.replace(/.js$/g,".wasm"),p=e||t.replace(/.js$/g,".worker.js");return r=await self.createFFmpegCore({mainScriptUrlOrBlob:`${s}#${btoa(JSON.stringify({wasmURL:c,workerURL:p}))}`}),r.setLogger(R=>self.postMessage({type:E.LOG,data:R})),r.setProgress(R=>self.postMessage({type:E.PROGRESS,data:R})),o},m=({args:t,timeout:n=-1})=>{r.setTimeout(n),r.exec(...t);const e=r.ret;return r.reset(),e},l=({args:t,timeout:n=-1})=>{r.setTimeout(n),r.ffprobe(...t);const e=r.ret;return r.reset(),e},D=({path:t,data:n})=>(r.FS.writeFile(t,n),!0),S=({path:t,encoding:n})=>r.FS.readFile(t,{encoding:n}),I=({path:t})=>(r.FS.unlink(t),!0),L=({oldPath:t,newPath:n})=>(r.FS.rename(t,n),!0),N=({path:t})=>(r.FS.mkdir(t),!0),A=({path:t})=>{const n=r.FS.readdir(t),e=[];for(const o of n){const s=r.FS.stat(`${t}/${o}`),c=r.FS.isDir(s.mode);e.push({name:o,isDir:c})}return e},k=({path:t})=>(r.FS.rmdir(t),!0),w=({fsType:t,options:n,mountPoint:e})=>{const o=t,s=r.FS.filesystems[o];return s?(r.FS.mount(s,n,e),!0):!1},b=({mountPoint:t})=>(r.FS.unmount(t),!0);self.onmessage=async({data:{id:t,type:n,data:e}})=>{const o=[];let s;try{if(n!==E.LOAD&&!r)throw a;switch(n){case E.LOAD:s=await O(e);break;case E.EXEC:s=m(e);break;case E.FFPROBE:s=l(e);break;case E.WRITE_FILE:s=D(e);break;case E.READ_FILE:s=S(e);break;case E.DELETE_FILE:s=I(e);break;case E.RENAME:s=L(e);break;case E.CREATE_DIR:s=N(e);break;case E.LIST_DIR:s=A(e);break;case E.DELETE_DIR:s=k(e);break;case E.MOUNT:s=w(e);break;case E.UNMOUNT:s=b(e);break;default:throw f}}catch(c){self.postMessage({id:t,type:E.ERROR,data:c.toString()});return}s instanceof Uint8Array&&o.push(s.buffer),self.postMessage({id:t,type:n,data:s},o)}})();
diff --git a/dist/components/AudioRecordingComponent.d.ts b/dist/components/AudioRecordingComponent.d.ts
new file mode 100644
index 000000000..b6b949e65
--- /dev/null
+++ b/dist/components/AudioRecordingComponent.d.ts
@@ -0,0 +1,18 @@
+import type { ReactElement } from "react";
+import type { Props } from "./interfaces";
+/**
+ * Usage: https://github.com/samhirtarif/react-audio-recorder#audiorecorder-component
+ *
+ *
+ * @prop `onRecordingComplete` Method that gets called when save recording option is clicked
+ * @prop `recorderControls` Externally initilize hook and pass the returned object to this param, this gives your control over the component from outside the component.
+ * https://github.com/samhirtarif/react-audio-recorder#combine-the-useaudiorecorder-hook-and-the-audiorecorder-component
+ * @prop `audioTrackConstraints`: Takes a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks subset} of `MediaTrackConstraints` that apply to the audio track
+ * @prop `onNotAllowedOrFound`: A method that gets called when the getUserMedia promise is rejected. It receives the DOMException as its input.
+ * @prop `downloadOnSavePress` If set to `true` the file gets downloaded when save recording is pressed. Defaults to `false`
+ * @prop `downloadFileExtension` File extension for the audio filed that gets downloaded. Defaults to `mp3`. Allowed values are `mp3`, `wav` and `webm`
+ * @prop `showVisualizer` Displays a waveform visualization for the audio when set to `true`. Defaults to `false`
+ * @prop `classes` Is an object with attributes representing classes for different parts of the component
+ */
+declare const AudioRecorder: (props: Props) => ReactElement;
+export default AudioRecorder;
diff --git a/dist/components/interfaces.d.ts b/dist/components/interfaces.d.ts
new file mode 100644
index 000000000..9fbd4e979
--- /dev/null
+++ b/dist/components/interfaces.d.ts
@@ -0,0 +1,80 @@
+import type { MediaAudioTrackConstraints, recorderControls } from "../hooks/useAudioRecorder";
+interface StyleProps {
+ /**
+ * Applies passed classes to audio recorder container
+ **/
+ AudioRecorderClass?: string;
+ /**
+ * Applies passed classes to audio recorder start/save option
+ **/
+ AudioRecorderStartSaveClass?: string;
+ /**
+ * Applies passed classes to audio recorder timer
+ **/
+ AudioRecorderTimerClass?: string;
+ /**
+ * Applies passed classes to audio recorder status option
+ **/
+ AudioRecorderStatusClass?: string;
+ /**
+ * Applies passed classes to audio recorder pause/resume option
+ **/
+ AudioRecorderPauseResumeClass?: string;
+ /**
+ * Applies passed classes to audio recorder discard option
+ **/
+ AudioRecorderDiscardClass?: string;
+}
+export interface Props {
+ /**
+ * This gets called when the save button is clicked.
+ * In case the recording is cancelled, the blob is discarded.
+ **/
+ onRecordingComplete?: (blob: Blob) => void;
+ /**
+ * This gets called when the getUserMedia Promise is rejected.
+ * It takes the resultant DOMException as its parameter.
+ **/
+ onNotAllowedOrFound?: (exception: DOMException) => void;
+ /**
+ * Allows calling of hook outside this component. The controls returned by the hook can then be passed to the component using this prop.
+ * This allows for use of hook methods and state outside this component
+ * @sample_usage https://github.com/samhirtarif/react-audio-recorder#combine-the-useaudiorecorder-hook-and-the-audiorecorder-component
+ **/
+ recorderControls?: recorderControls;
+ /**
+ * Takes a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks subset} of
+ * `MediaTrackConstraints` that apply to the audio track
+ *
+ * @Property `deviceId`
+ * @Property `groupId`
+ * @Property `autoGainControl`
+ * @Property `channelCount`
+ * @Property `echoCancellation`
+ * @Property `noiseSuppression`
+ * @Property `sampleRate`
+ * @Property `sampleSize`
+ */
+ audioTrackConstraints?: MediaAudioTrackConstraints;
+ /**
+ * If set to `true` the file gets downloaded when save recording is pressed
+ **/
+ downloadOnSavePress?: boolean;
+ /**
+ * File extension for the audio filed that gets downloaded
+ **/
+ downloadFileExtension?: "mp3" | "wav" | "webm";
+ /**
+ * Displays a waveform visualization for the audio when set to `true`. Defaults to `false`
+ **/
+ showVisualizer?: boolean;
+ /**
+ * The options passed to the HTML MediaRecorder API.
+ **/
+ mediaRecorderOptions?: MediaRecorderOptions;
+ /**
+ * Custom classes to changes styles.
+ **/
+ classes?: StyleProps;
+}
+export {};
diff --git a/dist/hooks/useAudioRecorder.d.ts b/dist/hooks/useAudioRecorder.d.ts
new file mode 100644
index 000000000..9ac4ad376
--- /dev/null
+++ b/dist/hooks/useAudioRecorder.d.ts
@@ -0,0 +1,28 @@
+export interface recorderControls {
+ startRecording: () => void;
+ stopRecording: () => void;
+ togglePauseResume: () => void;
+ recordingBlob?: Blob;
+ isRecording: boolean;
+ isPaused: boolean;
+ recordingTime: number;
+ mediaRecorder?: MediaRecorder;
+}
+export type MediaAudioTrackConstraints = Pick;
+/**
+ * @returns Controls for the recording. Details of returned controls are given below
+ *
+ * @param `audioTrackConstraints`: Takes a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks subset} of `MediaTrackConstraints` that apply to the audio track
+ * @param `onNotAllowedOrFound`: A method that gets called when the getUserMedia promise is rejected. It receives the DOMException as its input.
+ *
+ * @details `startRecording`: Calling this method would result in the recording to start. Sets `isRecording` to true
+ * @details `stopRecording`: This results in a recording in progress being stopped and the resulting audio being present in `recordingBlob`. Sets `isRecording` to false
+ * @details `togglePauseResume`: Calling this method would pause the recording if it is currently running or resume if it is paused. Toggles the value `isPaused`
+ * @details `recordingBlob`: This is the recording blob that is created after `stopRecording` has been called
+ * @details `isRecording`: A boolean value that represents whether a recording is currently in progress
+ * @details `isPaused`: A boolean value that represents whether a recording in progress is paused
+ * @details `recordingTime`: Number of seconds that the recording has gone on. This is updated every second
+ * @details `mediaRecorder`: The current mediaRecorder in use
+ */
+declare const useAudioRecorder: (audioTrackConstraints?: MediaAudioTrackConstraints, onNotAllowedOrFound?: (exception: DOMException) => void, mediaRecorderOptions?: MediaRecorderOptions) => recorderControls;
+export default useAudioRecorder;
diff --git a/dist/index-a790bb40.js b/dist/index-a790bb40.js
new file mode 100644
index 000000000..744e0d09c
--- /dev/null
+++ b/dist/index-a790bb40.js
@@ -0,0 +1,648 @@
+import Ie, { useState as W, useCallback as J, useEffect as Ee, Suspense as Ae } from "react";
+var ae = { exports: {} }, H = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ve;
+function ze() {
+ if (ve)
+ return H;
+ ve = 1;
+ var u = Symbol.for("react.transitional.element"), C = Symbol.for("react.fragment");
+ function I(D, c, l) {
+ var M = null;
+ if (l !== void 0 && (M = "" + l), c.key !== void 0 && (M = "" + c.key), "key" in c) {
+ l = {};
+ for (var L in c)
+ L !== "key" && (l[L] = c[L]);
+ } else
+ l = c;
+ return c = l.ref, {
+ $$typeof: u,
+ type: D,
+ key: M,
+ ref: c !== void 0 ? c : null,
+ props: l
+ };
+ }
+ return H.Fragment = C, H.jsx = I, H.jsxs = I, H;
+}
+var X = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ye;
+function De() {
+ return ye || (ye = 1, process.env.NODE_ENV !== "production" && function() {
+ function u(e) {
+ if (e == null)
+ return null;
+ if (typeof e == "function")
+ return e.$$typeof === Te ? null : e.displayName || e.name || null;
+ if (typeof e == "string")
+ return e;
+ switch (e) {
+ case w:
+ return "Fragment";
+ case b:
+ return "Portal";
+ case E:
+ return "Profiler";
+ case k:
+ return "StrictMode";
+ case $:
+ return "Suspense";
+ case K:
+ return "SuspenseList";
+ }
+ if (typeof e == "object")
+ switch (typeof e.tag == "number" && console.error(
+ "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+ ), e.$$typeof) {
+ case m:
+ return (e.displayName || "Context") + ".Provider";
+ case Y:
+ return (e._context.displayName || "Context") + ".Consumer";
+ case _:
+ var r = e.render;
+ return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+ case q:
+ return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
+ case ee:
+ r = e._payload, e = e._init;
+ try {
+ return u(e(r));
+ } catch {
+ }
+ }
+ return null;
+ }
+ function C(e) {
+ return "" + e;
+ }
+ function I(e) {
+ try {
+ C(e);
+ var r = !1;
+ } catch {
+ r = !0;
+ }
+ if (r) {
+ r = console;
+ var t = r.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+ return t.call(
+ r,
+ "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+ i
+ ), C(e);
+ }
+ }
+ function D() {
+ }
+ function c() {
+ if (U === 0) {
+ se = console.log, ue = console.info, le = console.warn, Me = console.error, ge = console.group, de = console.groupCollapsed, fe = console.groupEnd;
+ var e = {
+ configurable: !0,
+ enumerable: !0,
+ value: D,
+ writable: !0
+ };
+ Object.defineProperties(console, {
+ info: e,
+ log: e,
+ warn: e,
+ error: e,
+ group: e,
+ groupCollapsed: e,
+ groupEnd: e
+ });
+ }
+ U++;
+ }
+ function l() {
+ if (U--, U === 0) {
+ var e = { configurable: !0, enumerable: !0, writable: !0 };
+ Object.defineProperties(console, {
+ log: B({}, e, { value: se }),
+ info: B({}, e, { value: ue }),
+ warn: B({}, e, { value: le }),
+ error: B({}, e, { value: Me }),
+ group: B({}, e, { value: ge }),
+ groupCollapsed: B({}, e, { value: de }),
+ groupEnd: B({}, e, { value: fe })
+ });
+ }
+ 0 > U && console.error(
+ "disabledDepth fell below zero. This is a bug in React. Please file an issue."
+ );
+ }
+ function M(e) {
+ if (te === void 0)
+ try {
+ throw Error();
+ } catch (t) {
+ var r = t.stack.trim().match(/\n( *(at )?)/);
+ te = r && r[1] || "", je = -1 < t.stack.indexOf(`
+ at`) ? " ()" : -1 < t.stack.indexOf("@") ? "@unknown:0:0" : "";
+ }
+ return `
+` + te + e + je;
+ }
+ function L(e, r) {
+ if (!e || oe)
+ return "";
+ var t = ie.get(e);
+ if (t !== void 0)
+ return t;
+ oe = !0, t = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
+ var i = null;
+ i = h.H, h.H = null, c();
+ try {
+ var g = {
+ DetermineComponentFrameRoot: function() {
+ try {
+ if (r) {
+ var O = function() {
+ throw Error();
+ };
+ if (Object.defineProperty(O.prototype, "props", {
+ set: function() {
+ throw Error();
+ }
+ }), typeof Reflect == "object" && Reflect.construct) {
+ try {
+ Reflect.construct(O, []);
+ } catch (z) {
+ var F = z;
+ }
+ Reflect.construct(e, [], O);
+ } else {
+ try {
+ O.call();
+ } catch (z) {
+ F = z;
+ }
+ e.call(O.prototype);
+ }
+ } else {
+ try {
+ throw Error();
+ } catch (z) {
+ F = z;
+ }
+ (O = e()) && typeof O.catch == "function" && O.catch(function() {
+ });
+ }
+ } catch (z) {
+ if (z && F && typeof z.stack == "string")
+ return [z.stack, F.stack];
+ }
+ return [null, null];
+ }
+ };
+ g.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
+ var n = Object.getOwnPropertyDescriptor(
+ g.DetermineComponentFrameRoot,
+ "name"
+ );
+ n && n.configurable && Object.defineProperty(
+ g.DetermineComponentFrameRoot,
+ "name",
+ { value: "DetermineComponentFrameRoot" }
+ );
+ var o = g.DetermineComponentFrameRoot(), A = o[0], Z = o[1];
+ if (A && Z) {
+ var f = A.split(`
+`), P = Z.split(`
+`);
+ for (o = n = 0; n < f.length && !f[n].includes(
+ "DetermineComponentFrameRoot"
+ ); )
+ n++;
+ for (; o < P.length && !P[o].includes(
+ "DetermineComponentFrameRoot"
+ ); )
+ o++;
+ if (n === f.length || o === P.length)
+ for (n = f.length - 1, o = P.length - 1; 1 <= n && 0 <= o && f[n] !== P[o]; )
+ o--;
+ for (; 1 <= n && 0 <= o; n--, o--)
+ if (f[n] !== P[o]) {
+ if (n !== 1 || o !== 1)
+ do
+ if (n--, o--, 0 > o || f[n] !== P[o]) {
+ var G = `
+` + f[n].replace(
+ " at new ",
+ " at "
+ );
+ return e.displayName && G.includes("") && (G = G.replace("", e.displayName)), typeof e == "function" && ie.set(e, G), G;
+ }
+ while (1 <= n && 0 <= o);
+ break;
+ }
+ }
+ } finally {
+ oe = !1, h.H = i, l(), Error.prepareStackTrace = t;
+ }
+ return f = (f = e ? e.displayName || e.name : "") ? M(f) : "", typeof e == "function" && ie.set(e, f), f;
+ }
+ function a(e) {
+ if (e == null)
+ return "";
+ if (typeof e == "function") {
+ var r = e.prototype;
+ return L(
+ e,
+ !(!r || !r.isReactComponent)
+ );
+ }
+ if (typeof e == "string")
+ return M(e);
+ switch (e) {
+ case $:
+ return M("Suspense");
+ case K:
+ return M("SuspenseList");
+ }
+ if (typeof e == "object")
+ switch (e.$$typeof) {
+ case _:
+ return e = L(e.render, !1), e;
+ case q:
+ return a(e.type);
+ case ee:
+ r = e._payload, e = e._init;
+ try {
+ return a(e(r));
+ } catch {
+ }
+ }
+ return "";
+ }
+ function s() {
+ var e = h.A;
+ return e === null ? null : e.getOwner();
+ }
+ function R(e) {
+ if (ce.call(e, "key")) {
+ var r = Object.getOwnPropertyDescriptor(e, "key").get;
+ if (r && r.isReactWarning)
+ return !1;
+ }
+ return e.key !== void 0;
+ }
+ function S(e, r) {
+ function t() {
+ Ne || (Ne = !0, console.error(
+ "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+ r
+ ));
+ }
+ t.isReactWarning = !0, Object.defineProperty(e, "key", {
+ get: t,
+ configurable: !0
+ });
+ }
+ function v() {
+ var e = u(this.type);
+ return we[e] || (we[e] = !0, console.error(
+ "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+ )), e = this.props.ref, e !== void 0 ? e : null;
+ }
+ function d(e, r, t, i, g, n) {
+ return t = n.ref, e = {
+ $$typeof: j,
+ type: e,
+ key: r,
+ props: n,
+ _owner: g
+ }, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
+ enumerable: !1,
+ get: v
+ }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+ configurable: !1,
+ enumerable: !1,
+ writable: !0,
+ value: 0
+ }), Object.defineProperty(e, "_debugInfo", {
+ configurable: !1,
+ enumerable: !1,
+ writable: !0,
+ value: null
+ }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+ }
+ function x(e, r, t, i, g, n) {
+ if (typeof e == "string" || typeof e == "function" || e === w || e === E || e === k || e === $ || e === K || e === Le || typeof e == "object" && e !== null && (e.$$typeof === ee || e.$$typeof === q || e.$$typeof === m || e.$$typeof === Y || e.$$typeof === _ || e.$$typeof === be || e.getModuleId !== void 0)) {
+ var o = r.children;
+ if (o !== void 0)
+ if (i)
+ if (re(o)) {
+ for (i = 0; i < o.length; i++)
+ T(o[i], e);
+ Object.freeze && Object.freeze(o);
+ } else
+ console.error(
+ "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+ );
+ else
+ T(o, e);
+ } else
+ o = "", (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (o += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."), e === null ? i = "null" : re(e) ? i = "array" : e !== void 0 && e.$$typeof === j ? (i = "<" + (u(e.type) || "Unknown") + " />", o = " Did you accidentally export a JSX literal instead of a component?") : i = typeof e, console.error(
+ "React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
+ i,
+ o
+ );
+ if (ce.call(r, "key")) {
+ o = u(e);
+ var A = Object.keys(r).filter(function(f) {
+ return f !== "key";
+ });
+ i = 0 < A.length ? "{key: someKey, " + A.join(": ..., ") + ": ...}" : "{key: someKey}", me[o + i] || (A = 0 < A.length ? "{" + A.join(": ..., ") + ": ...}" : "{}", console.error(
+ `A props object containing a "key" prop is being spread into JSX:
+ let props = %s;
+ <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+ let props = %s;
+ <%s key={someKey} {...props} />`,
+ i,
+ o,
+ A,
+ o
+ ), me[o + i] = !0);
+ }
+ if (o = null, t !== void 0 && (I(t), o = "" + t), R(r) && (I(r.key), o = "" + r.key), "key" in r) {
+ t = {};
+ for (var Z in r)
+ Z !== "key" && (t[Z] = r[Z]);
+ } else
+ t = r;
+ return o && S(
+ t,
+ typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+ ), d(e, o, n, g, s(), t);
+ }
+ function T(e, r) {
+ if (typeof e == "object" && e && e.$$typeof !== Se) {
+ if (re(e))
+ for (var t = 0; t < e.length; t++) {
+ var i = e[t];
+ y(i) && Q(i, r);
+ }
+ else if (y(e))
+ e._store && (e._store.validated = 1);
+ else if (e === null || typeof e != "object" ? t = null : (t = ne && e[ne] || e["@@iterator"], t = typeof t == "function" ? t : null), typeof t == "function" && t !== e.entries && (t = t.call(e), t !== e))
+ for (; !(e = t.next()).done; )
+ y(e.value) && Q(e.value, r);
+ }
+ }
+ function y(e) {
+ return typeof e == "object" && e !== null && e.$$typeof === j;
+ }
+ function Q(e, r) {
+ if (e._store && !e._store.validated && e.key == null && (e._store.validated = 1, r = V(r), !Ce[r])) {
+ Ce[r] = !0;
+ var t = "";
+ e && e._owner != null && e._owner !== s() && (t = null, typeof e._owner.tag == "number" ? t = u(e._owner.type) : typeof e._owner.name == "string" && (t = e._owner.name), t = " It was passed a child from " + t + ".");
+ var i = h.getCurrentStack;
+ h.getCurrentStack = function() {
+ var g = a(e.type);
+ return i && (g += i() || ""), g;
+ }, console.error(
+ 'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
+ r,
+ t
+ ), h.getCurrentStack = i;
+ }
+ }
+ function V(e) {
+ var r = "", t = s();
+ return t && (t = u(t.type)) && (r = `
+
+Check the render method of \`` + t + "`."), r || (e = u(e)) && (r = `
+
+Check the top-level render call using <` + e + ">."), r;
+ }
+ var p = Ie, j = Symbol.for("react.transitional.element"), b = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), k = Symbol.for("react.strict_mode"), E = Symbol.for("react.profiler"), Y = Symbol.for("react.consumer"), m = Symbol.for("react.context"), _ = Symbol.for("react.forward_ref"), $ = Symbol.for("react.suspense"), K = Symbol.for("react.suspense_list"), q = Symbol.for("react.memo"), ee = Symbol.for("react.lazy"), Le = Symbol.for("react.offscreen"), ne = Symbol.iterator, Te = Symbol.for("react.client.reference"), h = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ce = Object.prototype.hasOwnProperty, B = Object.assign, be = Symbol.for("react.client.reference"), re = Array.isArray, U = 0, se, ue, le, Me, ge, de, fe;
+ D.__reactDisabledLog = !0;
+ var te, je, oe = !1, ie = new (typeof WeakMap == "function" ? WeakMap : Map)(), Se = Symbol.for("react.client.reference"), Ne, we = {}, me = {}, Ce = {};
+ X.Fragment = w, X.jsx = function(e, r, t, i, g) {
+ return x(e, r, t, !1, i, g);
+ }, X.jsxs = function(e, r, t, i, g) {
+ return x(e, r, t, !0, i, g);
+ };
+ }()), X;
+}
+process.env.NODE_ENV === "production" ? ae.exports = ze() : ae.exports = De();
+var N = ae.exports;
+const xe = (u, C, I) => {
+ const [D, c] = W(!1), [l, M] = W(!1), [L, a] = W(0), [s, R] = W(), [S, v] = W(), [d, x] = W(), T = J(() => {
+ const j = setInterval(() => {
+ a((b) => b + 1);
+ }, 1e3);
+ v(j);
+ }, [a, v]), y = J(() => {
+ S != null && clearInterval(S), v(void 0);
+ }, [S, v]), Q = J(() => {
+ S == null && navigator.mediaDevices.getUserMedia({ audio: u ?? !0 }).then((j) => {
+ c(!0);
+ const b = new MediaRecorder(
+ j,
+ I
+ );
+ R(b), b.start(), T(), b.addEventListener("dataavailable", (w) => {
+ x(w.data), b.stream.getTracks().forEach((k) => k.stop()), R(void 0);
+ });
+ }).catch((j) => {
+ console.log(j.name, j.message, j.cause), C == null || C(j);
+ });
+ }, [
+ S,
+ c,
+ R,
+ T,
+ x,
+ C,
+ I
+ ]), V = J(() => {
+ s == null || s.stop(), y(), a(0), c(!1), M(!1);
+ }, [
+ s,
+ a,
+ c,
+ M,
+ y
+ ]), p = J(() => {
+ l ? (M(!1), s == null || s.resume(), T()) : (M(!0), y(), s == null || s.pause());
+ }, [s, M, T, y]);
+ return {
+ startRecording: Q,
+ stopRecording: V,
+ togglePauseResume: p,
+ recordingBlob: d,
+ isRecording: D,
+ isPaused: l,
+ recordingTime: L,
+ mediaRecorder: s
+ };
+}, ke = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDQ3MCA0NzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3MCA0NzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCTxnPgoJCTxwYXRoIGQ9Ik0yMzUsMzAyLjI5NmM0Ny4xNzcsMCw4NS40MjMtMzguMjQ1LDg1LjQyMy04NS40MjNWODUuNDIzQzMyMC40MjMsMzguMjQ1LDI4Mi4xNzcsMCwyMzUsMHMtODUuNDIzLDM4LjI0NS04NS40MjMsODUuNDIzCgkJCXYxMzEuNDUxQzE0OS41NzcsMjY0LjA1MSwxODcuODIzLDMwMi4yOTYsMjM1LDMwMi4yOTZ6Ii8+CgkJPHBhdGggZD0iTTM1MC40MjMsMTM2LjE0OHYzMGgxNXY1MC43MjZjMCw3MS45MTUtNTguNTA4LDEzMC40MjMtMTMwLjQyMywxMzAuNDIzcy0xMzAuNDIzLTU4LjUwNy0xMzAuNDIzLTEzMC40MjN2LTUwLjcyNmgxNXYtMzAKCQkJaC00NXY4MC43MjZDNzQuNTc3LDMwMC4yNzMsMTM4LjU1MSwzNjksMjIwLDM3Ni41ODlWNDQwaC05MC40NDR2MzBoMjEwLjg4OXYtMzBIMjUwdi02My40MTEKCQkJYzgxLjQ0OS03LjU4OSwxNDUuNDIzLTc2LjMxNywxNDUuNDIzLTE1OS43MTZ2LTgwLjcyNkgzNTAuNDIzeiIvPgoJPC9nPgo8L3N2Zz4K", Oe = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDcuNjA3IDQ3LjYwNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDcuNjA3IDQ3LjYwNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJPGc+CgkJPHBhdGggZD0iTTE3Ljk5MSw0MC45NzZjMCwzLjY2Mi0yLjk2OSw2LjYzMS02LjYzMSw2LjYzMWwwLDBjLTMuNjYyLDAtNi42MzEtMi45NjktNi42MzEtNi42MzFWNi42MzFDNC43MjksMi45NjksNy42OTgsMCwxMS4zNiwwCgkJCWwwLDBjMy42NjIsMCw2LjYzMSwyLjk2OSw2LjYzMSw2LjYzMVY0MC45NzZ6Ii8+CgkJPHBhdGggZD0iTTQyLjg3Nyw0MC45NzZjMCwzLjY2Mi0yLjk2OSw2LjYzMS02LjYzMSw2LjYzMWwwLDBjLTMuNjYyLDAtNi42MzEtMi45NjktNi42MzEtNi42MzFWNi42MzEKCQkJQzI5LjYxNiwyLjk2OSwzMi41ODUsMCwzNi4yNDYsMGwwLDBjMy42NjIsMCw2LjYzMSwyLjk2OSw2LjYzMSw2LjYzMVY0MC45NzZ6Ii8+Cgk8L2c+Cjwvc3ZnPgo=", Re = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDQ5NC4xNDggNDk0LjE0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDk0LjE0OCA0OTQuMTQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZD0iTTQwNS4yODQsMjAxLjE4OEwxMzAuODA0LDEzLjI4QzExOC4xMjgsNC41OTYsMTA1LjM1NiwwLDk0Ljc0LDBDNzQuMjE2LDAsNjEuNTIsMTYuNDcyLDYxLjUyLDQ0LjA0NHY0MDYuMTI0CgkJCQljMCwyNy41NCwxMi42OCw0My45OCwzMy4xNTYsNDMuOThjMTAuNjMyLDAsMjMuMi00LjYsMzUuOTA0LTEzLjMwOGwyNzQuNjA4LTE4Ny45MDRjMTcuNjYtMTIuMTA0LDI3LjQ0LTI4LjM5MiwyNy40NC00NS44ODQKCQkJCUM0MzIuNjMyLDIyOS41NzIsNDIyLjk2NCwyMTMuMjg4LDQwNS4yODQsMjAxLjE4OHoiLz4KCQk8L2c+Cgk8L2c+Cjwvc3ZnPgo=", pe = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTE3Ljg1IDMuMTVsLTIuOTktM0EuNTA4LjUwOCAwIDAgMCAxNC41IDBIMS40QTEuNDE3IDEuNDE3IDAgMCAwIDAgMS40M3YxNS4xNEExLjQxNyAxLjQxNyAwIDAgMCAxLjQgMThoMTUuMmExLjQxNyAxLjQxNyAwIDAgMCAxLjQtMS40M1YzLjVhLjQ3LjQ3IDAgMCAwLS4xNS0uMzV6TTIgNVYzYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAwIDEgMSAxdjJhMSAxIDAgMCAxLTEgMUgzYTEgMSAwIDAgMS0xLTF6bTcgMTFhNCA0IDAgMSAxIDQtNCA0IDQgMCAwIDEtNCA0eiIvPgo8L3N2Zz4K", Ye = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDYuNzM0IDQ2LjczNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDYuNzM0IDQ2LjczNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik00MS4zNDYsMEg1LjM4OEMyLjQxNywwLDAsMi40MTcsMCw1LjM4OHYzNS45NThjMCwyLjk3MSwyLjQxNyw1LjM4OCw1LjM4OCw1LjM4OGgzNS45NThjMi45NzEsMCw1LjM4OC0yLjQxNyw1LjM4OC01LjM4OAoJCVY1LjM4OEM0Ni43MzMsMi40MTcsNDQuMzE2LDAsNDEuMzQ2LDB6Ii8+CjwvZz4KPC9zdmc+Cg==", he = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTEzNS4yIDE3LjdMMTI4IDMySDMyQzE0LjMgMzIgMCA0Ni4zIDAgNjRTMTQuMyA5NiAzMiA5Nkg0MTZjMTcuNyAwIDMyLTE0LjMgMzItMzJzLTE0LjMtMzItMzItMzJIMzIwbC03LjItMTQuM0MzMDcuNCA2LjggMjk2LjMgMCAyODQuMiAwSDE2My44Yy0xMi4xIDAtMjMuMiA2LjgtMjguNiAxNy43ek00MTYgMTI4SDMyTDUzLjIgNDY3YzEuNiAyNS4zIDIyLjYgNDUgNDcuOSA0NUgzNDYuOWMyNS4zIDAgNDYuMy0xOS43IDQ3LjktNDVMNDE2IDEyOHoiIC8+Cjwvc3ZnPg==";
+const Be = Ie.lazy(async () => {
+ const { LiveAudioVisualizer: u } = await import("./react-audio-visualize.es-831d2fb3.js");
+ return { default: u };
+}), We = ({
+ onRecordingComplete: u,
+ onNotAllowedOrFound: C,
+ recorderControls: I,
+ audioTrackConstraints: D,
+ downloadOnSavePress: c = !1,
+ downloadFileExtension: l = "webm",
+ showVisualizer: M = !1,
+ mediaRecorderOptions: L,
+ classes: a
+}) => {
+ const {
+ startRecording: s,
+ stopRecording: R,
+ togglePauseResume: S,
+ recordingBlob: v,
+ isRecording: d,
+ isPaused: x,
+ recordingTime: T,
+ mediaRecorder: y
+ } = I ?? // eslint-disable-next-line react-hooks/rules-of-hooks
+ xe(
+ D,
+ C,
+ L
+ ), [Q, V] = W(!1), p = (w = !0) => {
+ V(w), R();
+ }, j = async (w) => {
+ const { FFmpeg: k } = await import("./index-cadbd041.js"), E = new k();
+ await E.load();
+ const Y = "input.webm", m = `output.${l}`;
+ await E.writeFile(
+ Y,
+ new Uint8Array(await w.arrayBuffer())
+ ), await E.exec(["-i", Y, m]);
+ const _ = await E.readFile(m);
+ return new Blob([_.buffer], {
+ type: `audio/${l}`
+ });
+ }, b = async (w) => {
+ !crossOriginIsolated && l !== "webm" && console.warn(
+ 'This website is not "cross-origin isolated". Audio will be downloaded in webm format, since mp3/wav encoding requires cross origin isolation. Please visit https://web.dev/cross-origin-isolation-guide/ and https://web.dev/coop-coep/ for information on how to make your website "cross-origin isolated"'
+ );
+ const k = crossOriginIsolated ? await j(w) : w, E = crossOriginIsolated ? l : "webm", Y = URL.createObjectURL(k), m = document.createElement("a");
+ m.style.display = "none", m.href = Y, m.download = `audio.${E}`, document.body.appendChild(m), m.click(), m.remove();
+ };
+ return Ee(() => {
+ Q && v != null && u != null && (u(v), c && b(v));
+ }, [v]), /* @__PURE__ */ N.jsxs(
+ "div",
+ {
+ className: `audio-recorder ${d ? "recording" : ""} ${(a == null ? void 0 : a.AudioRecorderClass) ?? ""}`,
+ "data-testid": "audio_recorder",
+ children: [
+ /* @__PURE__ */ N.jsx(
+ "img",
+ {
+ src: d ? pe : ke,
+ className: `audio-recorder-mic ${(a == null ? void 0 : a.AudioRecorderStartSaveClass) ?? ""}`,
+ onClick: d ? () => p() : s,
+ "data-testid": "ar_mic",
+ title: d ? "Save recording" : "Start recording"
+ }
+ ),
+ d && /* @__PURE__ */ N.jsx(
+ "img",
+ {
+ src: he,
+ className: `audio-recorder-options ${d ? "" : "display-none"} ${(a == null ? void 0 : a.AudioRecorderDiscardClass) ?? ""}`,
+ onClick: () => p(!1),
+ title: "Discard Recording",
+ "data-testid": "ar_cancel"
+ }
+ ),
+ /* @__PURE__ */ N.jsxs(
+ "span",
+ {
+ className: `audio-recorder-timer ${d ? "" : "display-none"} ${(a == null ? void 0 : a.AudioRecorderTimerClass) ?? ""}`,
+ "data-testid": "ar_timer",
+ children: [
+ Math.floor(T / 60),
+ ":",
+ String(T % 60).padStart(2, "0")
+ ]
+ }
+ ),
+ M ? /* @__PURE__ */ N.jsx(
+ "span",
+ {
+ className: `audio-recorder-visualizer ${d ? "" : "display-none"}`,
+ children: y && /* @__PURE__ */ N.jsx(Ae, { fallback: /* @__PURE__ */ N.jsx(N.Fragment, {}), children: /* @__PURE__ */ N.jsx(
+ Be,
+ {
+ mediaRecorder: y,
+ barWidth: 2,
+ gap: 2,
+ width: 140,
+ height: 30,
+ fftSize: 512,
+ maxDecibels: -10,
+ minDecibels: -80,
+ smoothingTimeConstant: 0.4
+ }
+ ) })
+ }
+ ) : /* @__PURE__ */ N.jsxs(
+ "span",
+ {
+ className: `audio-recorder-status ${d ? "" : "display-none"} ${(a == null ? void 0 : a.AudioRecorderStatusClass) ?? ""}`,
+ children: [
+ /* @__PURE__ */ N.jsx("span", { className: "audio-recorder-status-dot" }),
+ "Recording"
+ ]
+ }
+ ),
+ /* @__PURE__ */ N.jsx(
+ "img",
+ {
+ src: x ? Re : Oe,
+ className: `audio-recorder-options ${d ? "" : "display-none"} ${(a == null ? void 0 : a.AudioRecorderPauseResumeClass) ?? ""}`,
+ onClick: S,
+ title: x ? "Resume recording" : "Pause recording",
+ "data-testid": "ar_pause"
+ }
+ ),
+ /* @__PURE__ */ N.jsx(
+ "img",
+ {
+ src: Ye,
+ className: `audio-recorder-options ${d ? "" : "display-none"} ${(a == null ? void 0 : a.AudioRecorderDiscardClass) ?? ""}`,
+ onClick: () => p(!0),
+ title: "Stop Recording",
+ "data-testid": "ar_cancel"
+ }
+ )
+ ]
+ }
+ );
+};
+export {
+ We as A,
+ N as j,
+ xe as u
+};
diff --git a/dist/index-cadbd041.js b/dist/index-cadbd041.js
new file mode 100644
index 000000000..fe7a3f5b8
--- /dev/null
+++ b/dist/index-cadbd041.js
@@ -0,0 +1,263 @@
+var N = Object.defineProperty;
+var m = (E, t, e) => t in E ? N(E, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : E[t] = e;
+var n = (E, t, e) => (m(E, typeof t != "symbol" ? t + "" : t, e), e), u = (E, t, e) => {
+ if (!t.has(E))
+ throw TypeError("Cannot " + e);
+};
+var s = (E, t, e) => (u(E, t, "read from private field"), e ? e.call(E) : t.get(E)), d = (E, t, e) => {
+ if (t.has(E))
+ throw TypeError("Cannot add the same private member more than once");
+ t instanceof WeakSet ? t.add(E) : t.set(E, e);
+}, c = (E, t, e, r) => (u(E, t, "write to private field"), r ? r.call(E, e) : t.set(E, e), e);
+var i;
+(function(E) {
+ E.LOAD = "LOAD", E.EXEC = "EXEC", E.FFPROBE = "FFPROBE", E.WRITE_FILE = "WRITE_FILE", E.READ_FILE = "READ_FILE", E.DELETE_FILE = "DELETE_FILE", E.RENAME = "RENAME", E.CREATE_DIR = "CREATE_DIR", E.LIST_DIR = "LIST_DIR", E.DELETE_DIR = "DELETE_DIR", E.ERROR = "ERROR", E.DOWNLOAD = "DOWNLOAD", E.PROGRESS = "PROGRESS", E.LOG = "LOG", E.MOUNT = "MOUNT", E.UNMOUNT = "UNMOUNT";
+})(i || (i = {}));
+const S = (() => {
+ let E = 0;
+ return () => E++;
+})(), w = new Error("ffmpeg is not loaded, call `await ffmpeg.load()` first"), U = new Error("called FFmpeg.terminate()");
+var a, D, h, O, f, I, R;
+class b {
+ constructor() {
+ d(this, a, null);
+ /**
+ * #resolves and #rejects tracks Promise resolves and rejects to
+ * be called when we receive message from web worker.
+ */
+ d(this, D, {});
+ d(this, h, {});
+ d(this, O, []);
+ d(this, f, []);
+ n(this, "loaded", !1);
+ /**
+ * register worker message event handlers.
+ */
+ d(this, I, () => {
+ s(this, a) && (s(this, a).onmessage = ({ data: { id: t, type: e, data: r } }) => {
+ switch (e) {
+ case i.LOAD:
+ this.loaded = !0, s(this, D)[t](r);
+ break;
+ case i.MOUNT:
+ case i.UNMOUNT:
+ case i.EXEC:
+ case i.FFPROBE:
+ case i.WRITE_FILE:
+ case i.READ_FILE:
+ case i.DELETE_FILE:
+ case i.RENAME:
+ case i.CREATE_DIR:
+ case i.LIST_DIR:
+ case i.DELETE_DIR:
+ s(this, D)[t](r);
+ break;
+ case i.LOG:
+ s(this, O).forEach((o) => o(r));
+ break;
+ case i.PROGRESS:
+ s(this, f).forEach((o) => o(r));
+ break;
+ case i.ERROR:
+ s(this, h)[t](r);
+ break;
+ }
+ delete s(this, D)[t], delete s(this, h)[t];
+ });
+ });
+ /**
+ * Generic function to send messages to web worker.
+ */
+ d(this, R, ({ type: t, data: e }, r = [], o) => s(this, a) ? new Promise((A, L) => {
+ const l = S();
+ s(this, a) && s(this, a).postMessage({ id: l, type: t, data: e }, r), s(this, D)[l] = A, s(this, h)[l] = L, o == null || o.addEventListener("abort", () => {
+ L(new DOMException(`Message # ${l} was aborted`, "AbortError"));
+ }, { once: !0 });
+ }) : Promise.reject(w));
+ /**
+ * Loads ffmpeg-core inside web worker. It is required to call this method first
+ * as it initializes WebAssembly and other essential variables.
+ *
+ * @category FFmpeg
+ * @returns `true` if ffmpeg core is loaded for the first time.
+ */
+ n(this, "load", ({ classWorkerURL: t, ...e } = {}, { signal: r } = {}) => (s(this, a) || (c(this, a, t ? new Worker(new URL(t, import.meta.url), {
+ type: "module"
+ }) : (
+ // We need to duplicated the code here to enable webpack
+ // to bundle worekr.js here.
+ new Worker(new URL("/assets/worker-224792ee.js", self.location), {
+ type: "module"
+ })
+ )), s(this, I).call(this)), s(this, R).call(this, {
+ type: i.LOAD,
+ data: e
+ }, void 0, r)));
+ /**
+ * Execute ffmpeg command.
+ *
+ * @remarks
+ * To avoid common I/O issues, ["-nostdin", "-y"] are prepended to the args
+ * by default.
+ *
+ * @example
+ * ```ts
+ * const ffmpeg = new FFmpeg();
+ * await ffmpeg.load();
+ * await ffmpeg.writeFile("video.avi", ...);
+ * // ffmpeg -i video.avi video.mp4
+ * await ffmpeg.exec(["-i", "video.avi", "video.mp4"]);
+ * const data = ffmpeg.readFile("video.mp4");
+ * ```
+ *
+ * @returns `0` if no error, `!= 0` if timeout (1) or error.
+ * @category FFmpeg
+ */
+ n(this, "exec", (t, e = -1, { signal: r } = {}) => s(this, R).call(this, {
+ type: i.EXEC,
+ data: { args: t, timeout: e }
+ }, void 0, r));
+ /**
+ * Execute ffprobe command.
+ *
+ * @example
+ * ```ts
+ * const ffmpeg = new FFmpeg();
+ * await ffmpeg.load();
+ * await ffmpeg.writeFile("video.avi", ...);
+ * // Getting duration of a video in seconds: ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 video.avi -o output.txt
+ * await ffmpeg.ffprobe(["-v", "error", "-show_entries", "format=duration", "-of", "default=noprint_wrappers=1:nokey=1", "video.avi", "-o", "output.txt"]);
+ * const data = ffmpeg.readFile("output.txt");
+ * ```
+ *
+ * @returns `0` if no error, `!= 0` if timeout (1) or error.
+ * @category FFmpeg
+ */
+ n(this, "ffprobe", (t, e = -1, { signal: r } = {}) => s(this, R).call(this, {
+ type: i.FFPROBE,
+ data: { args: t, timeout: e }
+ }, void 0, r));
+ /**
+ * Terminate all ongoing API calls and terminate web worker.
+ * `FFmpeg.load()` must be called again before calling any other APIs.
+ *
+ * @category FFmpeg
+ */
+ n(this, "terminate", () => {
+ const t = Object.keys(s(this, h));
+ for (const e of t)
+ s(this, h)[e](U), delete s(this, h)[e], delete s(this, D)[e];
+ s(this, a) && (s(this, a).terminate(), c(this, a, null), this.loaded = !1);
+ });
+ /**
+ * Write data to ffmpeg.wasm.
+ *
+ * @example
+ * ```ts
+ * const ffmpeg = new FFmpeg();
+ * await ffmpeg.load();
+ * await ffmpeg.writeFile("video.avi", await fetchFile("../video.avi"));
+ * await ffmpeg.writeFile("text.txt", "hello world");
+ * ```
+ *
+ * @category File System
+ */
+ n(this, "writeFile", (t, e, { signal: r } = {}) => {
+ const o = [];
+ return e instanceof Uint8Array && o.push(e.buffer), s(this, R).call(this, {
+ type: i.WRITE_FILE,
+ data: { path: t, data: e }
+ }, o, r);
+ });
+ n(this, "mount", (t, e, r) => {
+ const o = [];
+ return s(this, R).call(this, {
+ type: i.MOUNT,
+ data: { fsType: t, options: e, mountPoint: r }
+ }, o);
+ });
+ n(this, "unmount", (t) => {
+ const e = [];
+ return s(this, R).call(this, {
+ type: i.UNMOUNT,
+ data: { mountPoint: t }
+ }, e);
+ });
+ /**
+ * Read data from ffmpeg.wasm.
+ *
+ * @example
+ * ```ts
+ * const ffmpeg = new FFmpeg();
+ * await ffmpeg.load();
+ * const data = await ffmpeg.readFile("video.mp4");
+ * ```
+ *
+ * @category File System
+ */
+ n(this, "readFile", (t, e = "binary", { signal: r } = {}) => s(this, R).call(this, {
+ type: i.READ_FILE,
+ data: { path: t, encoding: e }
+ }, void 0, r));
+ /**
+ * Delete a file.
+ *
+ * @category File System
+ */
+ n(this, "deleteFile", (t, { signal: e } = {}) => s(this, R).call(this, {
+ type: i.DELETE_FILE,
+ data: { path: t }
+ }, void 0, e));
+ /**
+ * Rename a file or directory.
+ *
+ * @category File System
+ */
+ n(this, "rename", (t, e, { signal: r } = {}) => s(this, R).call(this, {
+ type: i.RENAME,
+ data: { oldPath: t, newPath: e }
+ }, void 0, r));
+ /**
+ * Create a directory.
+ *
+ * @category File System
+ */
+ n(this, "createDir", (t, { signal: e } = {}) => s(this, R).call(this, {
+ type: i.CREATE_DIR,
+ data: { path: t }
+ }, void 0, e));
+ /**
+ * List directory contents.
+ *
+ * @category File System
+ */
+ n(this, "listDir", (t, { signal: e } = {}) => s(this, R).call(this, {
+ type: i.LIST_DIR,
+ data: { path: t }
+ }, void 0, e));
+ /**
+ * Delete an empty directory.
+ *
+ * @category File System
+ */
+ n(this, "deleteDir", (t, { signal: e } = {}) => s(this, R).call(this, {
+ type: i.DELETE_DIR,
+ data: { path: t }
+ }, void 0, e));
+ }
+ on(t, e) {
+ t === "log" ? s(this, O).push(e) : t === "progress" && s(this, f).push(e);
+ }
+ off(t, e) {
+ t === "log" ? c(this, O, s(this, O).filter((r) => r !== e)) : t === "progress" && c(this, f, s(this, f).filter((r) => r !== e));
+ }
+}
+a = new WeakMap(), D = new WeakMap(), h = new WeakMap(), O = new WeakMap(), f = new WeakMap(), I = new WeakMap(), R = new WeakMap();
+var _;
+(function(E) {
+ E.MEMFS = "MEMFS", E.NODEFS = "NODEFS", E.NODERAWFS = "NODERAWFS", E.IDBFS = "IDBFS", E.WORKERFS = "WORKERFS", E.PROXYFS = "PROXYFS";
+})(_ || (_ = {}));
+export {
+ _ as FFFSType,
+ b as FFmpeg
+};
diff --git a/dist/index.d.ts b/dist/index.d.ts
new file mode 100644
index 000000000..739ad008e
--- /dev/null
+++ b/dist/index.d.ts
@@ -0,0 +1,2 @@
+export { default as AudioRecorder } from "./components/AudioRecordingComponent";
+export { default as useAudioRecorder, type recorderControls, } from "./hooks/useAudioRecorder";
diff --git a/dist/react-audio-visualize.es-831d2fb3.js b/dist/react-audio-visualize.es-831d2fb3.js
new file mode 100644
index 000000000..a2b3381a6
--- /dev/null
+++ b/dist/react-audio-visualize.es-831d2fb3.js
@@ -0,0 +1,210 @@
+import { j as v } from "./index-a790bb40.js";
+import { useState as C, useRef as M, useEffect as A, useCallback as z, forwardRef as E, useImperativeHandle as j } from "react";
+const V = (r, a, g, d) => {
+ let c = a / (g + d), l = Math.floor(r.length / c);
+ c > r.length && (c = r.length, l = 1);
+ const m = [];
+ for (let e = 0; e < c; e++) {
+ let o = 0;
+ for (let s = 0; s < l && e * l + s < r.length; s++)
+ o += r[e * l + s];
+ m.push(o / l);
+ }
+ return m;
+}, k = (r, a, g, d, c, l) => {
+ const m = a.height / 2, e = a.getContext("2d");
+ e && (e.clearRect(0, 0, a.width, a.height), c !== "transparent" && (e.fillStyle = c, e.fillRect(0, 0, a.width, a.height)), r.forEach((o, s) => {
+ e.fillStyle = l;
+ const n = s * (g + d), t = m - o / 2, f = g, p = o || 1;
+ e.beginPath(), e.roundRect ? (e.roundRect(n, t, f, p, 50), e.fill()) : e.fillRect(n, t, f, p);
+ }));
+}, F = ({
+ mediaRecorder: r,
+ width: a = "100%",
+ height: g = "100%",
+ barWidth: d = 2,
+ gap: c = 1,
+ backgroundColor: l = "transparent",
+ barColor: m = "rgb(160, 198, 255)",
+ fftSize: e = 1024,
+ maxDecibels: o = -10,
+ minDecibels: s = -90,
+ smoothingTimeConstant: n = 0.4
+}) => {
+ const [t, f] = C(), [p, y] = C(), [u, R] = C(), i = M(null);
+ A(() => {
+ if (!r.stream)
+ return;
+ const w = new AudioContext(), x = w.createAnalyser();
+ R(x), x.fftSize = e, x.minDecibels = s, x.maxDecibels = o, x.smoothingTimeConstant = n;
+ const D = w.createMediaStreamSource(r.stream);
+ return D.connect(x), f(w), y(D), () => {
+ D.disconnect(), x.disconnect(), w.state !== "closed" && w.close();
+ };
+ }, [r.stream]), A(() => {
+ u && r.state === "recording" && h();
+ }, [u, r.state]);
+ const h = z(() => {
+ if (!u || !t)
+ return;
+ const w = new Uint8Array(u == null ? void 0 : u.frequencyBinCount);
+ r.state === "recording" ? (u == null || u.getByteFrequencyData(w), b(w), requestAnimationFrame(h)) : r.state === "paused" ? b(w) : r.state === "inactive" && t.state !== "closed" && t.close();
+ }, [u, t == null ? void 0 : t.state]);
+ A(() => () => {
+ t && t.state !== "closed" && t.close(), p == null || p.disconnect(), u == null || u.disconnect();
+ }, []);
+ const b = (w) => {
+ if (!i.current)
+ return;
+ const x = V(
+ w,
+ i.current.width,
+ d,
+ c
+ );
+ k(
+ x,
+ i.current,
+ d,
+ c,
+ l,
+ m
+ );
+ };
+ return /* @__PURE__ */ v.jsx(
+ "canvas",
+ {
+ ref: i,
+ width: a,
+ height: g,
+ style: {
+ aspectRatio: "unset"
+ }
+ }
+ );
+}, q = (r, a, g, d, c) => {
+ const l = r.getChannelData(0), m = g / (d + c), e = Math.floor(l.length / m), o = a / 2;
+ let s = [], n = 0;
+ for (let t = 0; t < m; t++) {
+ const f = [];
+ let p = 0;
+ const y = [];
+ let u = 0;
+ for (let h = 0; h < e && t * e + h < r.length; h++) {
+ const b = l[t * e + h];
+ b <= 0 && (f.push(b), p++), b > 0 && (y.push(b), u++);
+ }
+ const R = f.reduce((h, b) => h + b, 0) / p, i = { max: y.reduce((h, b) => h + b, 0) / u, min: R };
+ i.max > n && (n = i.max), Math.abs(i.min) > n && (n = Math.abs(i.min)), s.push(i);
+ }
+ if (o * 0.8 > n * o) {
+ const t = o * 0.8 / n;
+ s = s.map((f) => ({
+ max: f.max * t,
+ min: f.min * t
+ }));
+ }
+ return s;
+}, S = (r, a, g, d, c, l, m, e = 0, o = 1) => {
+ const s = a.height / 2, n = a.getContext("2d");
+ if (!n)
+ return;
+ n.clearRect(0, 0, a.width, a.height), c !== "transparent" && (n.fillStyle = c, n.fillRect(0, 0, a.width, a.height));
+ const t = (e || 0) / o;
+ r.forEach((f, p) => {
+ const y = p / r.length, u = t > y;
+ n.fillStyle = u && m ? m : l;
+ const R = p * (g + d), i = s + f.min, h = g, b = s + f.max - i;
+ n.beginPath(), n.roundRect ? (n.roundRect(R, i, h, b, 50), n.fill()) : n.fillRect(R, i, h, b);
+ });
+}, B = E(
+ ({
+ blob: r,
+ width: a,
+ height: g,
+ barWidth: d = 2,
+ gap: c = 1,
+ currentTime: l,
+ style: m,
+ backgroundColor: e = "transparent",
+ barColor: o = "rgb(184, 184, 184)",
+ barPlayedColor: s = "rgb(160, 198, 255)"
+ }, n) => {
+ const t = M(null), [f, p] = C([]), [y, u] = C(0);
+ return j(
+ n,
+ () => t.current,
+ []
+ ), A(() => {
+ (async () => {
+ if (!t.current)
+ return;
+ if (!r) {
+ const i = Array.from({ length: 100 }, () => ({
+ max: 0,
+ min: 0
+ }));
+ S(
+ i,
+ t.current,
+ d,
+ c,
+ e,
+ o,
+ s
+ );
+ return;
+ }
+ const R = await r.arrayBuffer();
+ await new AudioContext().decodeAudioData(R, (i) => {
+ if (!t.current)
+ return;
+ u(i.duration);
+ const h = q(
+ i,
+ g,
+ a,
+ d,
+ c
+ );
+ p(h), S(
+ h,
+ t.current,
+ d,
+ c,
+ e,
+ o,
+ s
+ );
+ });
+ })();
+ }, [r, t.current]), A(() => {
+ t.current && S(
+ f,
+ t.current,
+ d,
+ c,
+ e,
+ o,
+ s,
+ l,
+ y
+ );
+ }, [l, y]), /* @__PURE__ */ v.jsx(
+ "canvas",
+ {
+ ref: t,
+ width: a,
+ height: g,
+ style: {
+ ...m
+ }
+ }
+ );
+ }
+);
+B.displayName = "AudioVisualizer";
+export {
+ B as AudioVisualizer,
+ F as LiveAudioVisualizer
+};
diff --git a/dist/react-audio-voice-recorder.es.js b/dist/react-audio-voice-recorder.es.js
new file mode 100644
index 000000000..70ee09d38
--- /dev/null
+++ b/dist/react-audio-voice-recorder.es.js
@@ -0,0 +1,7 @@
+(function(){"use strict";(r=>{try{if(typeof window>"u")return;const e=document.createElement("style");e.appendChild(document.createTextNode(r)),document.head.appendChild(e)}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})(".audio-recorder{background-color:#ebebeb;box-shadow:0 2px 5px #bebebe;border-radius:20px;box-sizing:border-box;color:#000;width:40px;display:flex;align-items:center;transition:all .2s ease-in;-webkit-tap-highlight-color:transparent}.audio-recorder-mic{box-sizing:content-box;cursor:pointer;height:16px;color:#000;padding:12px}.audio-recorder .audio-recorder-mic{border-radius:20px}.audio-recorder.recording .audio-recorder-mic{border-radius:0}.audio-recorder-timer,.audio-recorder-status{color:#000;margin-left:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:14px;font-weight:400;line-height:1}.audio-recorder-status{margin-left:15px;display:flex;align-items:baseline;flex-grow:1;animation-name:fading-ar-status;animation-duration:2s;animation-iteration-count:infinite}.audio-recorder-status-dot{background-color:#d00;border-radius:50%;height:10px;width:9px;margin-right:5px}.audio-recorder-options{box-sizing:content-box;height:16px;cursor:pointer;padding:12px 6px 12px 12px}.audio-recorder-options~.audio-recorder-options{padding:12px 12px 12px 6px;border-radius:0 5px 5px 0}.recording{border-radius:12px;width:340px;transition:all .2s ease-out}.display-none{display:none}.audio-recorder-visualizer{margin-left:15px;flex-grow:1;align-self:center;display:flex;align-items:center}@keyframes fading-ar-status{0%{opacity:1}50%{opacity:0}to{opacity:1}}")})();
+import { A as d, u } from "./index-a790bb40.js";
+import "react";
+export {
+ d as AudioRecorder,
+ u as useAudioRecorder
+};
diff --git a/dist/vite-env.d.ts b/dist/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/dist/vite-env.d.ts
@@ -0,0 +1 @@
+/// = {
- title: "AudioRecorder",
- component: AudioRecorder,
-};
-
-const onRecordingComplete: (blob: Blob) => void = (blob: Blob) => {
- alert("Save pressed. On recording complete called with blob");
-};
-
-export const Primary: ComponentStory = () => (
- => {
- const FFmpeg = await import("@ffmpeg/ffmpeg");
- const ffmpeg = FFmpeg.createFFmpeg({ log: false });
+ const { FFmpeg } = await import("@ffmpeg/ffmpeg");
+ const ffmpeg = new FFmpeg();
await ffmpeg.load();
const inputName = "input.webm";
const outputName = `output.${downloadFileExtension}`;
- ffmpeg.FS(
- "writeFile",
+ await ffmpeg.writeFile(
inputName,
new Uint8Array(await webmBlob.arrayBuffer())
);
- await ffmpeg.run("-i", inputName, outputName);
+ await ffmpeg.exec(["-i", inputName, outputName]);
- const outputData = ffmpeg.FS("readFile", outputName);
- const outputBlob = new Blob([outputData.buffer], {
+ const outputData = (await ffmpeg.readFile(outputName)) as Uint8Array;
+ const outputBlob = new Blob([outputData.buffer as BlobPart], {
type: `audio/${downloadFileExtension}`,
});
@@ -115,16 +116,13 @@ const AudioRecorder: (props: Props) => ReactElement = ({
};
useEffect(() => {
- if (
- (shouldSave || recorderControls) &&
- recordingBlob != null &&
- onRecordingComplete != null
- ) {
+ if (shouldSave && recordingBlob != null && onRecordingComplete != null) {
onRecordingComplete(recordingBlob);
if (downloadOnSavePress) {
void downloadBlob(recordingBlob);
}
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [recordingBlob]);
return (
@@ -143,6 +141,17 @@ const AudioRecorder: (props: Props) => ReactElement = ({
data-testid="ar_mic"
title={isRecording ? "Save recording" : "Start recording"}
/>
+ {isRecording && (
+ 
stopAudioRecorder(false)}
+ title="Discard Recording"
+ data-testid="ar_cancel"
+ />
+ )}
ReactElement = ({
data-testid="ar_pause"
/>
stopAudioRecorder(false)}
- title="Discard Recording"
+ onClick={() => stopAudioRecorder(true)}
+ title="Stop Recording"
data-testid="ar_cancel"
/>
diff --git a/src/components/interfaces.ts b/src/components/interfaces.ts
index 998b43597..77cfb990d 100644
--- a/src/components/interfaces.ts
+++ b/src/components/interfaces.ts
@@ -1,4 +1,4 @@
-import {
+import type {
MediaAudioTrackConstraints,
recorderControls,
} from "../hooks/useAudioRecorder";
@@ -40,7 +40,7 @@ export interface Props {
* This gets called when the getUserMedia Promise is rejected.
* It takes the resultant DOMException as its parameter.
**/
- onNotAllowedOrFound?: (exception: DOMException) => any;
+ onNotAllowedOrFound?: (exception: DOMException) => void;
/**
* Allows calling of hook outside this component. The controls returned by the hook can then be passed to the component using this prop.
* This allows for use of hook methods and state outside this component
diff --git a/src/hooks/useAudioRecorder.ts b/src/hooks/useAudioRecorder.ts
index 18db0eab0..8c690ebae 100644
--- a/src/hooks/useAudioRecorder.ts
+++ b/src/hooks/useAudioRecorder.ts
@@ -40,7 +40,7 @@ export type MediaAudioTrackConstraints = Pick<
*/
const useAudioRecorder: (
audioTrackConstraints?: MediaAudioTrackConstraints,
- onNotAllowedOrFound?: (exception: DOMException) => any,
+ onNotAllowedOrFound?: (exception: DOMException) => void,
mediaRecorderOptions?: MediaRecorderOptions
) => recorderControls = (
audioTrackConstraints,
@@ -51,7 +51,7 @@ const useAudioRecorder: (
const [isPaused, setIsPaused] = useState(false);
const [recordingTime, setRecordingTime] = useState(0);
const [mediaRecorder, setMediaRecorder] = useState