react-audio-voice-recorder - npm Package Compare versions

Comparing version 1.0.11 to 1.1.0

dist/components/AudioRecordingComponent.d.ts

@@ -10,2 +10,4 @@ import { ReactElement } from "react";
  * https://github.com/samhirtarif/react-audio-recorder#combine-the-useaudiorecorder-hook-and-the-audiorecorder-component
+ * @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 `classes` Is an object with attributes representing classes for different parts of the component
@@ -12,0 +14,0 @@ */

dist/components/interfaces.d.ts

@@ -41,2 +41,10 @@ import { recorderControls } from "../hooks/useAudioRecorder";
     /**
+     * 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";
+    /**
      * Custom classes to changes styles.
@@ -43,0 +51,0 @@ **/

dist/react-audio-voice-recorder.es.js

 (function(){"use strict";(r=>{try{if(typeof window>"u")return;var e=document.createElement("style");e.appendChild(document.createTextNode(r)),document.head.appendChild(e)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})(".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}.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:300px;transition:all .2s ease-out}.display-none{display:none}@keyframes fading-ar-status{0%{opacity:1}50%{opacity:0}to{opacity:1}}")})();
-import N, { useState as t, useCallback as l, useEffect as A } from "react";
-const S = () => {
-  const [a, g] = t(!1), [M, u] = t(!1), [o, w] = t(0), [I, D] = t(), [i, c] = t(), [z, r] = t(), d = () => {
-    const e = setInterval(() => {
-      w((L) => L + 1);
+import N, { useState as t, useCallback as Q, useEffect as Y } from "react";
+const b = () => {
+  const [d, g] = t(!1), [o, u] = t(!1), [M, a] = t(0), [e, j] = t(), [L, I] = t(), [w, z] = t(), n = () => {
+    const i = setInterval(() => {
+      a((D) => D + 1);
     }, 1e3);
-    c(e);
-  }, j = () => {
-    i != null && clearInterval(i), c(void 0);
+    I(i);
+  }, r = () => {
+    L != null && clearInterval(L), I(void 0);
   };
   return {
-    startRecording: l(() => {
-      i == null && navigator.mediaDevices.getUserMedia({ audio: !0 }).then((e) => {
+    startRecording: Q(() => {
+      L == null && navigator.mediaDevices.getUserMedia({ audio: !0 }).then((i) => {
         g(!0);
-        const L = new MediaRecorder(e);
-        D(L), L.start(), d(), L.addEventListener("dataavailable", (C) => {
-          r(C.data), L.stream.getTracks().forEach((T) => T.stop()), D(null);
+        const D = new MediaRecorder(i);
+        j(D), D.start(), n(), D.addEventListener("dataavailable", (s) => {
+          z(s.data), D.stream.getTracks().forEach((y) => y.stop()), j(null);
         });
-      }).catch((e) => console.log(e));
-    }, [i]),
+      }).catch((i) => console.log(i));
+    }, [L]),
     stopRecording: () => {
-      I == null || I.stop(), j(), w(0), g(!1), u(!1);
+      e == null || e.stop(), r(), a(0), g(!1), u(!1);
     },
     togglePauseResume: () => {
-      M ? (u(!1), I == null || I.resume(), d()) : (u(!0), j(), I == null || I.pause());
+      o ? (u(!1), e == null || e.resume(), n()) : (u(!0), r(), e == null || e.pause());
     },
-    recordingBlob: z,
-    isRecording: a,
-    isPaused: M,
-    recordingTime: o
+    recordingBlob: w,
+    isRecording: d,
+    isPaused: o,
+    recordingTime: M
   };
-}, m = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ3MCA0NzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3MCA0NzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCgk8Zz4NCgkJPHBhdGggZD0iTTIzNSwzMDIuMjk2YzQ3LjE3NywwLDg1LjQyMy0zOC4yNDUsODUuNDIzLTg1LjQyM1Y4NS40MjNDMzIwLjQyMywzOC4yNDUsMjgyLjE3NywwLDIzNSwwcy04NS40MjMsMzguMjQ1LTg1LjQyMyw4NS40MjMNCgkJCXYxMzEuNDUxQzE0OS41NzcsMjY0LjA1MSwxODcuODIzLDMwMi4yOTYsMjM1LDMwMi4yOTZ6Ii8+DQoJCTxwYXRoIGQ9Ik0zNTAuNDIzLDEzNi4xNDh2MzBoMTV2NTAuNzI2YzAsNzEuOTE1LTU4LjUwOCwxMzAuNDIzLTEzMC40MjMsMTMwLjQyM3MtMTMwLjQyMy01OC41MDctMTMwLjQyMy0xMzAuNDIzdi01MC43MjZoMTV2LTMwDQoJCQloLTQ1djgwLjcyNkM3NC41NzcsMzAwLjI3MywxMzguNTUxLDM2OSwyMjAsMzc2LjU4OVY0NDBoLTkwLjQ0NHYzMGgyMTAuODg5di0zMEgyNTB2LTYzLjQxMQ0KCQkJYzgxLjQ0OS03LjU4OSwxNDUuNDIzLTc2LjMxNywxNDUuNDIzLTE1OS43MTZ2LTgwLjcyNkgzNTAuNDIzeiIvPg0KCTwvZz4NCjwvc3ZnPg0K", E = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDcuNjA3IDQ3LjYwNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDcuNjA3IDQ3LjYwNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTcuOTkxLDQwLjk3NmMwLDMuNjYyLTIuOTY5LDYuNjMxLTYuNjMxLDYuNjMxbDAsMGMtMy42NjIsMC02LjYzMS0yLjk2OS02LjYzMS02LjYzMVY2LjYzMUM0LjcyOSwyLjk2OSw3LjY5OCwwLDExLjM2LDANCgkJCWwwLDBjMy42NjIsMCw2LjYzMSwyLjk2OSw2LjYzMSw2LjYzMVY0MC45NzZ6Ii8+DQoJCTxwYXRoIGQ9Ik00Mi44NzcsNDAuOTc2YzAsMy42NjItMi45NjksNi42MzEtNi42MzEsNi42MzFsMCwwYy0zLjY2MiwwLTYuNjMxLTIuOTY5LTYuNjMxLTYuNjMxVjYuNjMxDQoJCQlDMjkuNjE2LDIuOTY5LDMyLjU4NSwwLDM2LjI0NiwwbDAsMGMzLjY2MiwwLDYuNjMxLDIuOTY5LDYuNjMxLDYuNjMxVjQwLjk3NnoiLz4NCgk8L2c+DQo8L3N2Zz4NCg==", Q = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ5NC4xNDggNDk0LjE0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDk0LjE0OCA0OTQuMTQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTQwNS4yODQsMjAxLjE4OEwxMzAuODA0LDEzLjI4QzExOC4xMjgsNC41OTYsMTA1LjM1NiwwLDk0Ljc0LDBDNzQuMjE2LDAsNjEuNTIsMTYuNDcyLDYxLjUyLDQ0LjA0NHY0MDYuMTI0DQoJCQkJYzAsMjcuNTQsMTIuNjgsNDMuOTgsMzMuMTU2LDQzLjk4YzEwLjYzMiwwLDIzLjItNC42LDM1LjkwNC0xMy4zMDhsMjc0LjYwOC0xODcuOTA0YzE3LjY2LTEyLjEwNCwyNy40NC0yOC4zOTIsMjcuNDQtNDUuODg0DQoJCQkJQzQzMi42MzIsMjI5LjU3Miw0MjIuOTY0LDIxMy4yODgsNDA1LjI4NCwyMDEuMTg4eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9zdmc+DQo=", Y = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xNy44NSAzLjE1bC0yLjk5LTNBLjUwOC41MDggMCAwIDAgMTQuNSAwSDEuNEExLjQxNyAxLjQxNyAwIDAgMCAwIDEuNDN2MTUuMTRBMS40MTcgMS40MTcgMCAwIDAgMS40IDE4aDE1LjJhMS40MTcgMS40MTcgMCAwIDAgMS40LTEuNDNWMy41YS40Ny40NyAwIDAgMC0uMTUtLjM1ek0yIDVWM2ExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMCAxIDEgMXYyYTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xem03IDExYTQgNCAwIDEgMSA0LTQgNCA0IDAgMCAxLTQgNHoiLz4NCjwvc3ZnPg0K", x = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDYuNzM0IDQ2LjczNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDYuNzM0IDQ2LjczNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTQxLjM0NiwwSDUuMzg4QzIuNDE3LDAsMCwyLjQxNywwLDUuMzg4djM1Ljk1OGMwLDIuOTcxLDIuNDE3LDUuMzg4LDUuMzg4LDUuMzg4aDM1Ljk1OGMyLjk3MSwwLDUuMzg4LTIuNDE3LDUuMzg4LTUuMzg4DQoJCVY1LjM4OEM0Ni43MzMsMi40MTcsNDQuMzE2LDAsNDEuMzQ2LDB6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==";
-const Z = ({
-  onRecordingComplete: a,
+}, x = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ3MCA0NzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3MCA0NzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCgk8Zz4NCgkJPHBhdGggZD0iTTIzNSwzMDIuMjk2YzQ3LjE3NywwLDg1LjQyMy0zOC4yNDUsODUuNDIzLTg1LjQyM1Y4NS40MjNDMzIwLjQyMywzOC4yNDUsMjgyLjE3NywwLDIzNSwwcy04NS40MjMsMzguMjQ1LTg1LjQyMyw4NS40MjMNCgkJCXYxMzEuNDUxQzE0OS41NzcsMjY0LjA1MSwxODcuODIzLDMwMi4yOTYsMjM1LDMwMi4yOTZ6Ii8+DQoJCTxwYXRoIGQ9Ik0zNTAuNDIzLDEzNi4xNDh2MzBoMTV2NTAuNzI2YzAsNzEuOTE1LTU4LjUwOCwxMzAuNDIzLTEzMC40MjMsMTMwLjQyM3MtMTMwLjQyMy01OC41MDctMTMwLjQyMy0xMzAuNDIzdi01MC43MjZoMTV2LTMwDQoJCQloLTQ1djgwLjcyNkM3NC41NzcsMzAwLjI3MywxMzguNTUxLDM2OSwyMjAsMzc2LjU4OVY0NDBoLTkwLjQ0NHYzMGgyMTAuODg5di0zMEgyNTB2LTYzLjQxMQ0KCQkJYzgxLjQ0OS03LjU4OSwxNDUuNDIzLTc2LjMxNywxNDUuNDIzLTE1OS43MTZ2LTgwLjcyNkgzNTAuNDIzeiIvPg0KCTwvZz4NCjwvc3ZnPg0K", k = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDcuNjA3IDQ3LjYwNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDcuNjA3IDQ3LjYwNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTcuOTkxLDQwLjk3NmMwLDMuNjYyLTIuOTY5LDYuNjMxLTYuNjMxLDYuNjMxbDAsMGMtMy42NjIsMC02LjYzMS0yLjk2OS02LjYzMS02LjYzMVY2LjYzMUM0LjcyOSwyLjk2OSw3LjY5OCwwLDExLjM2LDANCgkJCWwwLDBjMy42NjIsMCw2LjYzMSwyLjk2OSw2LjYzMSw2LjYzMVY0MC45NzZ6Ii8+DQoJCTxwYXRoIGQ9Ik00Mi44NzcsNDAuOTc2YzAsMy42NjItMi45NjksNi42MzEtNi42MzEsNi42MzFsMCwwYy0zLjY2MiwwLTYuNjMxLTIuOTY5LTYuNjMxLTYuNjMxVjYuNjMxDQoJCQlDMjkuNjE2LDIuOTY5LDMyLjU4NSwwLDM2LjI0NiwwbDAsMGMzLjY2MiwwLDYuNjMxLDIuOTY5LDYuNjMxLDYuNjMxVjQwLjk3NnoiLz4NCgk8L2c+DQo8L3N2Zz4NCg==", Z = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ5NC4xNDggNDk0LjE0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDk0LjE0OCA0OTQuMTQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTQwNS4yODQsMjAxLjE4OEwxMzAuODA0LDEzLjI4QzExOC4xMjgsNC41OTYsMTA1LjM1NiwwLDk0Ljc0LDBDNzQuMjE2LDAsNjEuNTIsMTYuNDcyLDYxLjUyLDQ0LjA0NHY0MDYuMTI0DQoJCQkJYzAsMjcuNTQsMTIuNjgsNDMuOTgsMzMuMTU2LDQzLjk4YzEwLjYzMiwwLDIzLjItNC42LDM1LjkwNC0xMy4zMDhsMjc0LjYwOC0xODcuOTA0YzE3LjY2LTEyLjEwNCwyNy40NC0yOC4zOTIsMjcuNDQtNDUuODg0DQoJCQkJQzQzMi42MzIsMjI5LjU3Miw0MjIuOTY0LDIxMy4yODgsNDA1LjI4NCwyMDEuMTg4eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9zdmc+DQo=", O = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xNy44NSAzLjE1bC0yLjk5LTNBLjUwOC41MDggMCAwIDAgMTQuNSAwSDEuNEExLjQxNyAxLjQxNyAwIDAgMCAwIDEuNDN2MTUuMTRBMS40MTcgMS40MTcgMCAwIDAgMS40IDE4aDE1LjJhMS40MTcgMS40MTcgMCAwIDAgMS40LTEuNDNWMy41YS40Ny40NyAwIDAgMC0uMTUtLjM1ek0yIDVWM2ExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMCAxIDEgMXYyYTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xem03IDExYTQgNCAwIDEgMSA0LTQgNCA0IDAgMCAxLTQgNHoiLz4NCjwvc3ZnPg0K", P = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDYuNzM0IDQ2LjczNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDYuNzM0IDQ2LjczNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTQxLjM0NiwwSDUuMzg4QzIuNDE3LDAsMCwyLjQxNywwLDUuMzg4djM1Ljk1OGMwLDIuOTcxLDIuNDE3LDUuMzg4LDUuMzg4LDUuMzg4aDM1Ljk1OGMyLjk3MSwwLDUuMzg4LTIuNDE3LDUuMzg4LTUuMzg4DQoJCVY1LjM4OEM0Ni43MzMsMi40MTcsNDQuMzE2LDAsNDEuMzQ2LDB6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==";
+const G = ({
+  onRecordingComplete: d,
   recorderControls: g,
+  downloadOnSavePress: o = !1,
+  downloadFileExtension: u = "mp3",
   classes: M
 }) => {
-  var j, n, s, y, e, L;
+  var l, i, D, s, y, m;
   const {
-    startRecording: u,
-    stopRecording: o,
-    togglePauseResume: w,
-    recordingBlob: I,
-    isRecording: D,
-    isPaused: i,
-    recordingTime: c
-  } = g != null ? g : S(), [z, r] = t(!1), d = (C = !0) => {
-    r(C), o();
+    startRecording: a,
+    stopRecording: e,
+    togglePauseResume: j,
+    recordingBlob: L,
+    isRecording: I,
+    isPaused: w,
+    recordingTime: z
+  } = g != null ? g : b(), [n, r] = t(!1), C = (T = !0) => {
+    r(T), e();
+  }, A = (T) => {
+    const S = new Blob([T], { type: `audio/${u}` }), E = URL.createObjectURL(S), c = document.createElement("a");
+    c.style.display = "none", c.href = E, c.download = `audio.${u}`, document.body.appendChild(c), c.click();
   };
-  return A(() => {
-    (z || g) && I != null && a != null && a(I);
-  }, [I]), /* @__PURE__ */ N.createElement("div", {
-    className: `audio-recorder ${D ? "recording" : ""} ${(j = M == null ? void 0 : M.AudioRecorderClass) != null ? j : ""}`,
+  return Y(() => {
+    (n || g) && L != null && d != null && d(L), o && L != null && A(L);
+  }, [L]), /* @__PURE__ */ N.createElement("div", {
+    className: `audio-recorder ${I ? "recording" : ""} ${(l = M == null ? void 0 : M.AudioRecorderClass) != null ? l : ""}`,
     "data-testid": "audio_recorder"
   }, /* @__PURE__ */ N.createElement("img", {
-    src: D ? Y : m,
-    className: `audio-recorder-mic ${(n = M == null ? void 0 : M.AudioRecorderStartSaveClass) != null ? n : ""}`,
-    onClick: D ? () => d() : u,
+    src: I ? O : x,
+    className: `audio-recorder-mic ${(i = M == null ? void 0 : M.AudioRecorderStartSaveClass) != null ? i : ""}`,
+    onClick: I ? () => C() : a,
     "data-testid": "ar_mic",
-    title: D ? "Save recording" : "Start recording"
+    title: I ? "Save recording" : "Start recording"
   }), /* @__PURE__ */ N.createElement("span", {
-    className: `audio-recorder-timer ${D ? "" : "display-none"} ${(s = M == null ? void 0 : M.AudioRecorderTimerClass) != null ? s : ""}`,
+    className: `audio-recorder-timer ${I ? "" : "display-none"} ${(D = M == null ? void 0 : M.AudioRecorderTimerClass) != null ? D : ""}`,
     "data-testid": "ar_timer"
-  }, Math.floor(c / 60), ":", String(c % 60).padStart(2, "0")), /* @__PURE__ */ N.createElement("span", {
-    className: `audio-recorder-status ${D ? "" : "display-none"} ${(y = M == null ? void 0 : M.AudioRecorderStatusClass) != null ? y : ""}`
+  }, Math.floor(z / 60), ":", String(z % 60).padStart(2, "0")), /* @__PURE__ */ N.createElement("span", {
+    className: `audio-recorder-status ${I ? "" : "display-none"} ${(s = M == null ? void 0 : M.AudioRecorderStatusClass) != null ? s : ""}`
   }, /* @__PURE__ */ N.createElement("span", {
     className: "audio-recorder-status-dot"
   }), "Recording"), /* @__PURE__ */ N.createElement("img", {
-    src: i ? Q : E,
-    className: `audio-recorder-options ${D ? "" : "display-none"} ${(e = M == null ? void 0 : M.AudioRecorderPauseResumeClass) != null ? e : ""}`,
-    onClick: w,
-    title: i ? "Resume recording" : "Pause recording",
+    src: w ? Z : k,
+    className: `audio-recorder-options ${I ? "" : "display-none"} ${(y = M == null ? void 0 : M.AudioRecorderPauseResumeClass) != null ? y : ""}`,
+    onClick: j,
+    title: w ? "Resume recording" : "Pause recording",
     "data-testid": "ar_pause"
   }), /* @__PURE__ */ N.createElement("img", {
-    src: x,
-    className: `audio-recorder-options ${D ? "" : "display-none"} ${(L = M == null ? void 0 : M.AudioRecorderDiscardClass) != null ? L : ""}`,
-    onClick: () => d(!1),
+    src: P,
+    className: `audio-recorder-options ${I ? "" : "display-none"} ${(m = M == null ? void 0 : M.AudioRecorderDiscardClass) != null ? m : ""}`,
+    onClick: () => C(!1),
     title: "Discard Recording",
@@ -84,4 +89,4 @@ "data-testid": "ar_cancel"
 export {
-  Z as AudioRecorder,
-  S as useAudioRecorder
+  G as AudioRecorder,
+  b as useAudioRecorder
 };

dist/react-audio-voice-recorder.umd.js

 (function(){"use strict";(r=>{try{if(typeof window>"u")return;var e=document.createElement("style");e.appendChild(document.createTextNode(r)),document.head.appendChild(e)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})(".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}.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:300px;transition:all .2s ease-out}.display-none{display:none}@keyframes fading-ar-status{0%{opacity:1}50%{opacity:0}to{opacity:1}}")})();
-(function(D,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(D=typeof globalThis<"u"?globalThis:D||self,e(D.AudioRecorder={},D.React))})(this,function(D,e){"use strict";const g=(u=>u&&typeof u=="object"&&"default"in u?u:{default:u})(e),C=()=>{const[u,d]=e.useState(!1),[M,c]=e.useState(!1),[n,w]=e.useState(0),[i,t]=e.useState(),[N,o]=e.useState(),[r,s]=e.useState(),a=()=>{const L=setInterval(()=>{w(I=>I+1)},1e3);o(L)},j=()=>{N!=null&&clearInterval(N),o(void 0)};return{startRecording:e.useCallback(()=>{N==null&&navigator.mediaDevices.getUserMedia({audio:!0}).then(L=>{d(!0);const I=new MediaRecorder(L);t(I),I.start(),a(),I.addEventListener("dataavailable",T=>{s(T.data),I.stream.getTracks().forEach(x=>x.stop()),t(null)})}).catch(L=>console.log(L))},[N]),stopRecording:()=>{i==null||i.stop(),j(),w(0),d(!1),c(!1)},togglePauseResume:()=>{M?(c(!1),i==null||i.resume(),a()):(c(!0),j(),i==null||i.pause())},recordingBlob:r,isRecording:u,isPaused:M,recordingTime:n}},S="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ3MCA0NzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3MCA0NzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCgk8Zz4NCgkJPHBhdGggZD0iTTIzNSwzMDIuMjk2YzQ3LjE3NywwLDg1LjQyMy0zOC4yNDUsODUuNDIzLTg1LjQyM1Y4NS40MjNDMzIwLjQyMywzOC4yNDUsMjgyLjE3NywwLDIzNSwwcy04NS40MjMsMzguMjQ1LTg1LjQyMyw4NS40MjMNCgkJCXYxMzEuNDUxQzE0OS41NzcsMjY0LjA1MSwxODcuODIzLDMwMi4yOTYsMjM1LDMwMi4yOTZ6Ii8+DQoJCTxwYXRoIGQ9Ik0zNTAuNDIzLDEzNi4xNDh2MzBoMTV2NTAuNzI2YzAsNzEuOTE1LTU4LjUwOCwxMzAuNDIzLTEzMC40MjMsMTMwLjQyM3MtMTMwLjQyMy01OC41MDctMTMwLjQyMy0xMzAuNDIzdi01MC43MjZoMTV2LTMwDQoJCQloLTQ1djgwLjcyNkM3NC41NzcsMzAwLjI3MywxMzguNTUxLDM2OSwyMjAsMzc2LjU4OVY0NDBoLTkwLjQ0NHYzMGgyMTAuODg5di0zMEgyNTB2LTYzLjQxMQ0KCQkJYzgxLjQ0OS03LjU4OSwxNDUuNDIzLTc2LjMxNywxNDUuNDIzLTE1OS43MTZ2LTgwLjcyNkgzNTAuNDIzeiIvPg0KCTwvZz4NCjwvc3ZnPg0K",A="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDcuNjA3IDQ3LjYwNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDcuNjA3IDQ3LjYwNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTcuOTkxLDQwLjk3NmMwLDMuNjYyLTIuOTY5LDYuNjMxLTYuNjMxLDYuNjMxbDAsMGMtMy42NjIsMC02LjYzMS0yLjk2OS02LjYzMS02LjYzMVY2LjYzMUM0LjcyOSwyLjk2OSw3LjY5OCwwLDExLjM2LDANCgkJCWwwLDBjMy42NjIsMCw2LjYzMSwyLjk2OSw2LjYzMSw2LjYzMVY0MC45NzZ6Ii8+DQoJCTxwYXRoIGQ9Ik00Mi44NzcsNDAuOTc2YzAsMy42NjItMi45NjksNi42MzEtNi42MzEsNi42MzFsMCwwYy0zLjY2MiwwLTYuNjMxLTIuOTY5LTYuNjMxLTYuNjMxVjYuNjMxDQoJCQlDMjkuNjE2LDIuOTY5LDMyLjU4NSwwLDM2LjI0NiwwbDAsMGMzLjY2MiwwLDYuNjMxLDIuOTY5LDYuNjMxLDYuNjMxVjQwLjk3NnoiLz4NCgk8L2c+DQo8L3N2Zz4NCg==",m="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ5NC4xNDggNDk0LjE0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDk0LjE0OCA0OTQuMTQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTQwNS4yODQsMjAxLjE4OEwxMzAuODA0LDEzLjI4QzExOC4xMjgsNC41OTYsMTA1LjM1NiwwLDk0Ljc0LDBDNzQuMjE2LDAsNjEuNTIsMTYuNDcyLDYxLjUyLDQ0LjA0NHY0MDYuMTI0DQoJCQkJYzAsMjcuNTQsMTIuNjgsNDMuOTgsMzMuMTU2LDQzLjk4YzEwLjYzMiwwLDIzLjItNC42LDM1LjkwNC0xMy4zMDhsMjc0LjYwOC0xODcuOTA0YzE3LjY2LTEyLjEwNCwyNy40NC0yOC4zOTIsMjcuNDQtNDUuODg0DQoJCQkJQzQzMi42MzIsMjI5LjU3Miw0MjIuOTY0LDIxMy4yODgsNDA1LjI4NCwyMDEuMTg4eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9zdmc+DQo=",E="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xNy44NSAzLjE1bC0yLjk5LTNBLjUwOC41MDggMCAwIDAgMTQuNSAwSDEuNEExLjQxNyAxLjQxNyAwIDAgMCAwIDEuNDN2MTUuMTRBMS40MTcgMS40MTcgMCAwIDAgMS40IDE4aDE1LjJhMS40MTcgMS40MTcgMCAwIDAgMS40LTEuNDNWMy41YS40Ny40NyAwIDAgMC0uMTUtLjM1ek0yIDVWM2ExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMCAxIDEgMXYyYTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xem03IDExYTQgNCAwIDEgMSA0LTQgNCA0IDAgMCAxLTQgNHoiLz4NCjwvc3ZnPg0K",Q="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDYuNzM0IDQ2LjczNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDYuNzM0IDQ2LjczNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTQxLjM0NiwwSDUuMzg4QzIuNDE3LDAsMCwyLjQxNywwLDUuMzg4djM1Ljk1OGMwLDIuOTcxLDIuNDE3LDUuMzg4LDUuMzg4LDUuMzg4aDM1Ljk1OGMyLjk3MSwwLDUuMzg4LTIuNDE3LDUuMzg4LTUuMzg4DQoJCVY1LjM4OEM0Ni43MzMsMi40MTcsNDQuMzE2LDAsNDEuMzQ2LDB6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==",Z="",Y=({onRecordingComplete:u,recorderControls:d,classes:M})=>{var j,z,y,l,L,I;const{startRecording:c,stopRecording:n,togglePauseResume:w,recordingBlob:i,isRecording:t,isPaused:N,recordingTime:o}=d!=null?d:C(),[r,s]=e.useState(!1),a=(T=!0)=>{s(T),n()};return e.useEffect(()=>{(r||d)&&i!=null&&u!=null&&u(i)},[i]),g.default.createElement("div",{className:`audio-recorder ${t?"recording":""} ${(j=M==null?void 0:M.AudioRecorderClass)!=null?j:""}`,"data-testid":"audio_recorder"},g.default.createElement("img",{src:t?E:S,className:`audio-recorder-mic ${(z=M==null?void 0:M.AudioRecorderStartSaveClass)!=null?z:""}`,onClick:t?()=>a():c,"data-testid":"ar_mic",title:t?"Save recording":"Start recording"}),g.default.createElement("span",{className:`audio-recorder-timer ${t?"":"display-none"} ${(y=M==null?void 0:M.AudioRecorderTimerClass)!=null?y:""}`,"data-testid":"ar_timer"},Math.floor(o/60),":",String(o%60).padStart(2,"0")),g.default.createElement("span",{className:`audio-recorder-status ${t?"":"display-none"} ${(l=M==null?void 0:M.AudioRecorderStatusClass)!=null?l:""}`},g.default.createElement("span",{className:"audio-recorder-status-dot"}),"Recording"),g.default.createElement("img",{src:N?m:A,className:`audio-recorder-options ${t?"":"display-none"} ${(L=M==null?void 0:M.AudioRecorderPauseResumeClass)!=null?L:""}`,onClick:w,title:N?"Resume recording":"Pause recording","data-testid":"ar_pause"}),g.default.createElement("img",{src:Q,className:`audio-recorder-options ${t?"":"display-none"} ${(I=M==null?void 0:M.AudioRecorderDiscardClass)!=null?I:""}`,onClick:()=>a(!1),title:"Discard Recording","data-testid":"ar_cancel"}))};D.AudioRecorder=Y,D.useAudioRecorder=C,Object.defineProperties(D,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(d,M){typeof exports=="object"&&typeof module<"u"?M(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],M):(d=typeof globalThis<"u"?globalThis:d||self,M(d.AudioRecorder={},d.React))})(this,function(d,M){"use strict";const g=(u=>u&&typeof u=="object"&&"default"in u?u:{default:u})(M),A=()=>{const[u,N]=M.useState(!1),[a,c]=M.useState(!1),[e,n]=M.useState(0),[t,j]=M.useState(),[I,i]=M.useState(),[w,r]=M.useState(),s=()=>{const D=setInterval(()=>{n(L=>L+1)},1e3);i(D)},z=()=>{I!=null&&clearInterval(I),i(void 0)};return{startRecording:M.useCallback(()=>{I==null&&navigator.mediaDevices.getUserMedia({audio:!0}).then(D=>{N(!0);const L=new MediaRecorder(D);j(L),L.start(),s(),L.addEventListener("dataavailable",l=>{r(l.data),L.stream.getTracks().forEach(y=>y.stop()),j(null)})}).catch(D=>console.log(D))},[I]),stopRecording:()=>{t==null||t.stop(),z(),n(0),N(!1),c(!1)},togglePauseResume:()=>{a?(c(!1),t==null||t.resume(),s()):(c(!0),z(),t==null||t.pause())},recordingBlob:w,isRecording:u,isPaused:a,recordingTime:e}},Q="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ3MCA0NzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3MCA0NzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCgk8Zz4NCgkJPHBhdGggZD0iTTIzNSwzMDIuMjk2YzQ3LjE3NywwLDg1LjQyMy0zOC4yNDUsODUuNDIzLTg1LjQyM1Y4NS40MjNDMzIwLjQyMywzOC4yNDUsMjgyLjE3NywwLDIzNSwwcy04NS40MjMsMzguMjQ1LTg1LjQyMyw4NS40MjMNCgkJCXYxMzEuNDUxQzE0OS41NzcsMjY0LjA1MSwxODcuODIzLDMwMi4yOTYsMjM1LDMwMi4yOTZ6Ii8+DQoJCTxwYXRoIGQ9Ik0zNTAuNDIzLDEzNi4xNDh2MzBoMTV2NTAuNzI2YzAsNzEuOTE1LTU4LjUwOCwxMzAuNDIzLTEzMC40MjMsMTMwLjQyM3MtMTMwLjQyMy01OC41MDctMTMwLjQyMy0xMzAuNDIzdi01MC43MjZoMTV2LTMwDQoJCQloLTQ1djgwLjcyNkM3NC41NzcsMzAwLjI3MywxMzguNTUxLDM2OSwyMjAsMzc2LjU4OVY0NDBoLTkwLjQ0NHYzMGgyMTAuODg5di0zMEgyNTB2LTYzLjQxMQ0KCQkJYzgxLjQ0OS03LjU4OSwxNDUuNDIzLTc2LjMxNywxNDUuNDIzLTE1OS43MTZ2LTgwLjcyNkgzNTAuNDIzeiIvPg0KCTwvZz4NCjwvc3ZnPg0K",b="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDcuNjA3IDQ3LjYwNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDcuNjA3IDQ3LjYwNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTcuOTkxLDQwLjk3NmMwLDMuNjYyLTIuOTY5LDYuNjMxLTYuNjMxLDYuNjMxbDAsMGMtMy42NjIsMC02LjYzMS0yLjk2OS02LjYzMS02LjYzMVY2LjYzMUM0LjcyOSwyLjk2OSw3LjY5OCwwLDExLjM2LDANCgkJCWwwLDBjMy42NjIsMCw2LjYzMSwyLjk2OSw2LjYzMSw2LjYzMVY0MC45NzZ6Ii8+DQoJCTxwYXRoIGQ9Ik00Mi44NzcsNDAuOTc2YzAsMy42NjItMi45NjksNi42MzEtNi42MzEsNi42MzFsMCwwYy0zLjY2MiwwLTYuNjMxLTIuOTY5LTYuNjMxLTYuNjMxVjYuNjMxDQoJCQlDMjkuNjE2LDIuOTY5LDMyLjU4NSwwLDM2LjI0NiwwbDAsMGMzLjY2MiwwLDYuNjMxLDIuOTY5LDYuNjMxLDYuNjMxVjQwLjk3NnoiLz4NCgk8L2c+DQo8L3N2Zz4NCg==",Y="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ5NC4xNDggNDk0LjE0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDk0LjE0OCA0OTQuMTQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTQwNS4yODQsMjAxLjE4OEwxMzAuODA0LDEzLjI4QzExOC4xMjgsNC41OTYsMTA1LjM1NiwwLDk0Ljc0LDBDNzQuMjE2LDAsNjEuNTIsMTYuNDcyLDYxLjUyLDQ0LjA0NHY0MDYuMTI0DQoJCQkJYzAsMjcuNTQsMTIuNjgsNDMuOTgsMzMuMTU2LDQzLjk4YzEwLjYzMiwwLDIzLjItNC42LDM1LjkwNC0xMy4zMDhsMjc0LjYwOC0xODcuOTA0YzE3LjY2LTEyLjEwNCwyNy40NC0yOC4zOTIsMjcuNDQtNDUuODg0DQoJCQkJQzQzMi42MzIsMjI5LjU3Miw0MjIuOTY0LDIxMy4yODgsNDA1LjI4NCwyMDEuMTg4eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9zdmc+DQo=",x="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xNy44NSAzLjE1bC0yLjk5LTNBLjUwOC41MDggMCAwIDAgMTQuNSAwSDEuNEExLjQxNyAxLjQxNyAwIDAgMCAwIDEuNDN2MTUuMTRBMS40MTcgMS40MTcgMCAwIDAgMS40IDE4aDE1LjJhMS40MTcgMS40MTcgMCAwIDAgMS40LTEuNDNWMy41YS40Ny40NyAwIDAgMC0uMTUtLjM1ek0yIDVWM2ExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMCAxIDEgMXYyYTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xem03IDExYTQgNCAwIDEgMSA0LTQgNCA0IDAgMCAxLTQgNHoiLz4NCjwvc3ZnPg0K",k="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDYuNzM0IDQ2LjczNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDYuNzM0IDQ2LjczNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTQxLjM0NiwwSDUuMzg4QzIuNDE3LDAsMCwyLjQxNywwLDUuMzg4djM1Ljk1OGMwLDIuOTcxLDIuNDE3LDUuMzg4LDUuMzg4LDUuMzg4aDM1Ljk1OGMyLjk3MSwwLDUuMzg4LTIuNDE3LDUuMzg4LTUuMzg4DQoJCVY1LjM4OEM0Ni43MzMsMi40MTcsNDQuMzE2LDAsNDEuMzQ2LDB6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==",G="",Z=({onRecordingComplete:u,recorderControls:N,downloadOnSavePress:a=!1,downloadFileExtension:c="mp3",classes:e})=>{var C,D,L,l,y,E;const{startRecording:n,stopRecording:t,togglePauseResume:j,recordingBlob:I,isRecording:i,isPaused:w,recordingTime:r}=N!=null?N:A(),[s,z]=M.useState(!1),T=(S=!0)=>{z(S),t()},m=S=>{const O=new Blob([S],{type:`audio/${c}`}),P=URL.createObjectURL(O),o=document.createElement("a");o.style.display="none",o.href=P,o.download=`audio.${c}`,document.body.appendChild(o),o.click()};return M.useEffect(()=>{(s||N)&&I!=null&&u!=null&&u(I),a&&I!=null&&m(I)},[I]),g.default.createElement("div",{className:`audio-recorder ${i?"recording":""} ${(C=e==null?void 0:e.AudioRecorderClass)!=null?C:""}`,"data-testid":"audio_recorder"},g.default.createElement("img",{src:i?x:Q,className:`audio-recorder-mic ${(D=e==null?void 0:e.AudioRecorderStartSaveClass)!=null?D:""}`,onClick:i?()=>T():n,"data-testid":"ar_mic",title:i?"Save recording":"Start recording"}),g.default.createElement("span",{className:`audio-recorder-timer ${i?"":"display-none"} ${(L=e==null?void 0:e.AudioRecorderTimerClass)!=null?L:""}`,"data-testid":"ar_timer"},Math.floor(r/60),":",String(r%60).padStart(2,"0")),g.default.createElement("span",{className:`audio-recorder-status ${i?"":"display-none"} ${(l=e==null?void 0:e.AudioRecorderStatusClass)!=null?l:""}`},g.default.createElement("span",{className:"audio-recorder-status-dot"}),"Recording"),g.default.createElement("img",{src:w?Y:b,className:`audio-recorder-options ${i?"":"display-none"} ${(y=e==null?void 0:e.AudioRecorderPauseResumeClass)!=null?y:""}`,onClick:j,title:w?"Resume recording":"Pause recording","data-testid":"ar_pause"}),g.default.createElement("img",{src:k,className:`audio-recorder-options ${i?"":"display-none"} ${(E=e==null?void 0:e.AudioRecorderDiscardClass)!=null?E:""}`,onClick:()=>T(!1),title:"Discard Recording","data-testid":"ar_cancel"}))};d.AudioRecorder=Z,d.useAudioRecorder=A,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "react-audio-voice-recorder",
   "private": false,
-  "version": "1.0.11",
+  "version": "1.1.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "author": "",

README.md

@@ -31,3 +31,7 @@
   <React.StrictMode>
-    <AudioRecorder onRecordingComplete={addAudioElement} />
+    <AudioRecorder 
+      onRecordingComplete={addAudioElement} 
+      downloadOnSavePress={true}
+      downloadFileExtension="mp3"
+    />
   </React.StrictMode>
@@ -37,4 +41,8 @@ );
 
-The component also takes a `classes` as a prop, allowing you to modify the styles for the entire component or specific portions of it.
-
+| Props  | Description | Default | Optional |
+| :------------ |:--------------- |:--------------- | :--------------- |
+| **`onRecordingComplete`**  | A method that gets called when "Save recording" option is pressed | N/A | Yes |
+| **`downloadOnSavePress`**  | A `boolean` value that determines if the recording should be downloaded when "Save recording" option is pressed | `false` | Yes |
+| **`downloadFileExtension`**  | The file extension to be used for the downloaded file. Allowed values are `mp3`, `wav` and `webm` | `mp3` | Yes |
+| **`classes`** | This allows class names to be passed to modify the styles for the entire component or specific portions of it | N/A | Yes |
 ---
@@ -47,29 +55,12 @@ ### **useAudioRecorder** hook
 
-#### **`startRecording`**
-Calling this method would result in the recording to start. Sets `isRecording` to `true`
+| Identifiers   | Description |
+| :------------ |:---------------|
+| **`startRecording`** | Invoking this method starts the recording. Sets `isRecording` to `true` |
+| **`stopRecording`** | Invoking this method stops the recording in progress and the resulting audio is made available in `recordingBlob`. Sets `isRecording` to `false` |
+| **`togglePauseResume`** | Invoking this method would pause the recording if it is currently running or resume if it is paused. Toggles the value `isPaused` |
+| **`recordingBlob`** | This is the recording blob that is created after `stopRecording` has been called |
+| **`isRecording`** | A boolean value that represents whether a recording is currently in progress |
+| **`isPaused`** | A boolean value that represents whether a recording in progress is paused |
+| **`recordingTime`** | Number of seconds that the recording has gone on. This is updated every second |
 
-
-#### **`stopRecording`**
-This results in a recording in progress being stopped and the resulting audio being present in `recordingBlob`. Sets `isRecording` to `false`
-
-
-#### **`togglePauseResume`**
-Calling this method would pause the recording if it is currently running or resume if it is paused. Toggles the value `isPaused`
-
-
-#### **`recordingBlob`**
-This is the recording blob that is created after `stopRecording` has been called
-
-
-#### **`isRecording`**
-A boolean value that represents whether a recording is currently in progress
-
-
-#### **`isPaused`**
-A boolean value that represents whether a recording in progress is paused
-
-
-#### **`recordingTime`**
-Number of seconds that the recording has gone on. This is updated every second
-
 ### Sample usage of hook
@@ -76,0 +67,0 @@

No alert changes

Improved metrics

Total package byte prevSize

30252

increased by6.35%

Lines of code

242

increased by7.08%

Worsened metrics

Number of lines in readme file

115

decreased by-7.26%

No dependency changes