You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-voice-visualizer

Package Overview
Dependencies
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-voice-visualizer - npm Package Compare versions

Comparing version

1.7.6
to
1.8.0

915

dist/react-voice-visualizer.js

@@ -1,11 +0,11 @@

(function(){"use strict";(e=>{try{if(typeof window>"u")return;var i=document.createElement("style");i.appendChild(document.createTextNode(e)),document.head.appendChild(i)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})(".voice-visualizer__buttons-container{display:flex;justify-content:center;align-items:center;column-gap:20px;row-gap:15px;flex-wrap:wrap;margin-bottom:40px}.voice-visualizer__btn-center{box-sizing:border-box;flex-shrink:0;width:60px;height:60px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff;border:4px solid #c5c5c5;outline:none;cursor:pointer;transition:border-color .3s,background-color .3s}.voice-visualizer__btn-center:hover{background-color:#eaeaea}.voice-visualizer__btn-center>img{width:auto;height:50%;max-height:30px}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause{background-color:#ff3030}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause:hover{background-color:#ff4f4f}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause>img{height:50%;max-height:16px}.voice-visualizer__btn-center:hover{border:4px solid #9f9f9f}.voice-visualizer__btn-left{box-sizing:border-box;flex-shrink:0;width:60px;height:60px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#ff3030;border:4px solid #c5c5c5;outline:none;cursor:pointer;transition:border-color .3s,background-color .3s,opacity .3s}.voice-visualizer__btn-left:hover{background-color:#ff4f4f}.voice-visualizer__btn-left:disabled{opacity:.6;background-color:#ff3030}.voice-visualizer__btn-left.voice-visualizer__btn-left-microphone{background-color:#fff}.voice-visualizer__btn-left.voice-visualizer__btn-left-microphone>img{width:auto;height:50%;max-height:30px}.voice-visualizer__btn-left>img{width:auto;height:50%;max-height:16px}.voice-visualizer__btn-left:hover{border:4px solid #9f9f9f}.voice-visualizer__btn{box-sizing:border-box;min-width:100px;min-height:60px;padding:5px 20px;border-radius:40px;font-size:15px;background-color:#f0f0f0;transition:background-color .3s,opacity .3s}.voice-visualizer__btn:disabled{opacity:.8;background-color:#f0f0f0}.voice-visualizer__btn:hover{background-color:#bebebe}.voice-visualizer__canvas-container{position:relative;width:fit-content;margin:0 auto;overflow:hidden}.voice-visualizer__canvas-container canvas{display:block}.voice-visualizer__canvas-microphone-btn{position:absolute;top:50%;left:50%;width:auto;max-width:12%;min-width:24px;height:50%;max-height:100px;background-color:transparent;border:none;outline:none;transform:translate(-50%,-50%)}.voice-visualizer__canvas-microphone-icon{width:100%;height:100%;will-change:transform;transition:transform .3s}.voice-visualizer__canvas-microphone-btn:hover .voice-visualizer__canvas-microphone-icon{transform:scale(1.03)}.voice-visualizer__canvas-audio-wave-icon{position:absolute;top:50%;left:50%;width:auto;max-width:40%;height:40%;max-height:100px;transform:translate(-118%,-50%) scale(-1)}.voice-visualizer__canvas-audio-wave-icon2{transform:translate(18%,-50%)}.voice-visualizer__canvas-audio-processing{position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%)}.voice-visualizer__progress-indicator-hovered{position:absolute;top:0;pointer-events:none;height:100%;width:1px;background-color:#85858599}.voice-visualizer__progress-indicator-hovered-time{position:absolute;top:3%;left:1px;width:fit-content;margin:0;padding:0 7px;opacity:.8;font-size:12px;border-radius:0 4px 4px 0;background-color:#575757;text-align:left}.voice-visualizer__progress-indicator-hovered-time.voice-visualizer__progress-indicator-hovered-time-left{left:unset;right:1px;border-radius:4px 0 0 4px}.voice-visualizer__progress-indicator{position:absolute;top:0;pointer-events:none;height:100%;width:1px;background-color:#efefef}.voice-visualizer__progress-indicator-time{position:absolute;top:3%;left:1px;width:fit-content;box-sizing:border-box;min-width:37px;margin:0;padding:0 7px;font-size:12px;border-radius:0 4px 4px 0;text-align:left;color:#000;font-weight:500;background-color:#efefef}.voice-visualizer__progress-indicator-time.voice-visualizer__progress-indicator-time-left{left:unset;right:1px;border-radius:4px 0 0 4px}.voice-visualizer__audio-info-container{box-sizing:border-box;height:55px;display:flex;align-items:center;justify-content:center;gap:30px}.voice-visualizer__audio-info-time{margin:15px 0;min-width:38px;text-align:left}.voice-visualizer__visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:4px solid #c5c5c5;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}")})();
import { jsx as a, jsxs as ue, Fragment as Fe } from "react/jsx-runtime";
import { useState as l, useRef as S, useCallback as nt, useLayoutEffect as Be, forwardRef as it, useEffect as F } from "react";
const be = ({
(function(){"use strict";(e=>{try{if(typeof window>"u")return;var i=document.createElement("style");i.appendChild(document.createTextNode(e)),document.head.appendChild(i)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})(".voice-visualizer__buttons-container{display:flex;justify-content:center;align-items:center;column-gap:20px;row-gap:15px;flex-wrap:wrap;margin-bottom:40px}.voice-visualizer__btn-center{box-sizing:border-box;flex-shrink:0;width:60px;height:60px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff;border:4px solid #c5c5c5;outline:none;cursor:pointer;transition:border-color .3s,background-color .3s}.voice-visualizer__btn-center:hover{background-color:#eaeaea}.voice-visualizer__btn-center>img{width:auto;height:50%;max-height:30px}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause{background-color:#ff3030}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause:hover{background-color:#ff4f4f}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause>img{height:50%;max-height:16px}.voice-visualizer__btn-center:hover{border:4px solid #9f9f9f}.voice-visualizer__btn-left{box-sizing:border-box;flex-shrink:0;width:60px;height:60px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#ff3030;border:4px solid #c5c5c5;outline:none;cursor:pointer;transition:border-color .3s,background-color .3s,opacity .3s}.voice-visualizer__btn-container{min-width:100px;display:flex;justify-content:flex-end}.voice-visualizer__btn-left:hover{background-color:#ff4f4f}.voice-visualizer__btn-left:disabled{opacity:.6;background-color:#ff3030}.voice-visualizer__btn-left.voice-visualizer__btn-left-microphone{background-color:#fff}.voice-visualizer__btn-left.voice-visualizer__btn-left-microphone>img{width:auto;height:50%;max-height:30px}.voice-visualizer__btn-left>img{width:auto;height:50%;max-height:16px}.voice-visualizer__btn-left:hover{border:4px solid #9f9f9f}.voice-visualizer__btn{box-sizing:border-box;min-width:100px;min-height:60px;padding:5px 20px;border-radius:40px;font-size:15px;background-color:#f0f0f0;transition:background-color .3s,opacity .3s}.voice-visualizer__btn:disabled{opacity:.8;background-color:#f0f0f0}.voice-visualizer__btn:hover{background-color:#bebebe}.voice-visualizer__canvas-container{position:relative;width:fit-content;margin:0 auto;overflow:hidden}.voice-visualizer__canvas-container canvas{display:block}.voice-visualizer__canvas-microphone-btn{position:absolute;top:50%;left:50%;width:auto;max-width:12%;min-width:24px;height:50%;max-height:100px;background-color:transparent;border:none;outline:none;transform:translate(-50%,-50%)}.voice-visualizer__canvas-microphone-icon{width:100%;height:100%;will-change:transform;transition:transform .3s}.voice-visualizer__canvas-microphone-btn:hover .voice-visualizer__canvas-microphone-icon{transform:scale(1.03)}.voice-visualizer__canvas-audio-wave-icon{position:absolute;top:50%;left:50%;width:auto;max-width:40%;height:40%;max-height:100px;transform:translate(-118%,-50%) scale(-1)}.voice-visualizer__canvas-audio-wave-icon2{transform:translate(18%,-50%)}.voice-visualizer__canvas-audio-processing{position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%)}.voice-visualizer__progress-indicator-hovered{position:absolute;top:0;pointer-events:none;height:100%;width:1px;background-color:#85858599}.voice-visualizer__progress-indicator-hovered-time{position:absolute;top:3%;left:1px;width:fit-content;margin:0;padding:0 7px;opacity:.8;font-size:12px;border-radius:0 4px 4px 0;background-color:#575757;text-align:left}.voice-visualizer__progress-indicator-hovered-time.voice-visualizer__progress-indicator-hovered-time-left{left:unset;right:1px;border-radius:4px 0 0 4px}.voice-visualizer__progress-indicator{position:absolute;top:0;pointer-events:none;height:100%;width:1px;background-color:#efefef}.voice-visualizer__progress-indicator-time{position:absolute;top:3%;left:1px;width:fit-content;box-sizing:border-box;min-width:37px;margin:0;padding:0 7px;font-size:12px;border-radius:0 4px 4px 0;text-align:left;color:#000;font-weight:500;background-color:#efefef}.voice-visualizer__progress-indicator-time.voice-visualizer__progress-indicator-time-left{left:unset;right:1px;border-radius:4px 0 0 4px}.voice-visualizer__audio-info-container{box-sizing:border-box;height:55px;display:flex;align-items:center;justify-content:center;gap:30px}.voice-visualizer__audio-info-time{margin:15px 0;min-width:38px;text-align:left}.voice-visualizer__visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:4px solid #c5c5c5;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.relative{position:relative}.voice-visualizer__btn-center--border-transparent{border-color:transparent}.spinner__wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;display:flex;justify-content:center;align-items:center}.spinner{flex-shrink:0;width:100%;height:100%;border:4px solid rgba(72,72,72,.15);border-radius:50%;border-top-color:#c5c5c5;animation:spin 1s ease-in-out infinite;-webkit-animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@-webkit-keyframes spin{to{transform:rotate(360deg)}}")})();
import { jsx as o, jsxs as K, Fragment as Ge } from "react/jsx-runtime";
import { useState as u, useRef as N, useCallback as it, useLayoutEffect as Je, forwardRef as ct, useEffect as F } from "react";
const $e = ({
canvas: e,
backgroundColor: t
}) => {
const n = e.height, r = e.width, c = Math.round(r / 2), u = e.getContext("2d");
return u ? (u.clearRect(0, 0, r, n), t !== "transparent" && (u.fillStyle = t, u.fillRect(0, 0, r, n)), { context: u, height: n, width: r, halfWidth: c }) : null;
}, ye = ({
const n = e.height, r = e.width, c = Math.round(r / 2), h = e.getContext("2d");
return h ? (h.clearRect(0, 0, r, n), t !== "transparent" && (h.fillStyle = t, h.fillRect(0, 0, r, n)), { context: h, height: n, width: r, halfWidth: c }) : null;
}, Te = ({
context: e,

@@ -16,7 +16,7 @@ color: t,

y: c,
w: u,
w: h,
h: M
}) => {
e.fillStyle = t, e.beginPath(), e.roundRect ? (e.roundRect(r, c, u, M, n), e.fill()) : e.fillRect(r, c, u, M);
}, ct = ({
e.fillStyle = t, e.beginPath(), e.roundRect ? (e.roundRect(r, c, h, M, n), e.fill()) : e.fillRect(r, c, h, M);
}, ot = ({
barsData: e,

@@ -27,21 +27,21 @@ canvas: t,

backgroundColor: c,
mainBarColor: u,
mainBarColor: h,
secondaryBarColor: M,
currentAudioTime: m = 0,
rounded: I,
duration: v
currentAudioTime: v = 0,
rounded: p,
duration: f
}) => {
const d = be({ canvas: t, backgroundColor: c });
if (!d)
const z = $e({ canvas: t, backgroundColor: c });
if (!z)
return;
const { context: f, height: N } = d, L = m / v;
e.forEach((o, z) => {
const $ = z / e.length, h = L > $;
ye({
context: f,
color: h ? M : u,
rounded: I,
x: z * (n + r * n),
y: N / 2 - o.max,
h: o.max * 2,
const { context: g, height: A } = z, S = v / f;
e.forEach((a, l) => {
const j = l / e.length, m = S > j;
Te({
context: g,
color: m ? M : h,
rounded: p,
x: l * (n + r * n),
y: A / 2 - a.max,
h: a.max * 2,
w: n

@@ -51,3 +51,3 @@ });

};
function ot({
function st({
context: e,

@@ -58,15 +58,15 @@ color: t,

height: c,
barWidth: u
barWidth: h
}) {
ye({
Te({
context: e,
color: t,
rounded: n,
x: r / 2 + u / 2,
x: r / 2 + h / 2,
y: c / 2 - 1,
h: 2,
w: r - (r / 2 + u / 2)
w: r - (r / 2 + h / 2)
});
}
const st = ({
const at = ({
audioData: e,

@@ -77,64 +77,64 @@ unit: t,

canvas: c,
isRecordingInProgress: u,
isRecordingInProgress: h,
isPausedRecording: M,
picks: m,
backgroundColor: I,
barWidth: v,
mainBarColor: d,
secondaryBarColor: f,
rounded: N,
animateCurrentPick: L,
fullscreen: o
picks: v,
backgroundColor: p,
barWidth: f,
mainBarColor: z,
secondaryBarColor: g,
rounded: A,
animateCurrentPick: S,
fullscreen: a
}) => {
const z = be({ canvas: c, backgroundColor: I });
if (!z)
const l = $e({ canvas: c, backgroundColor: p });
if (!l)
return;
const { context: $, height: h, width: O, halfWidth: _ } = z;
if (e != null && e.length && u) {
const R = Math.max(...e);
const { context: j, height: m, width: x, halfWidth: H } = l;
if (e != null && e.length && h) {
const $ = Math.max(...e);
if (!M) {
if (r.current >= v) {
if (r.current >= f) {
r.current = 0;
const y = (h - R / 258 * h) / h * 100, k = (-h + R / 258 * h * 2) / h * 100, G = n.current === v ? {
const y = (m - $ / 258 * m) / m * 100, te = (-m + $ / 258 * m * 2) / m * 100, O = n.current === f ? {
startY: y,
barHeight: k
barHeight: te
} : null;
n.current >= t ? n.current = v : n.current += v, m.length > (o ? O : _) / v && m.pop(), m.unshift(G);
n.current >= t ? n.current = f : n.current += f, v.length > (a ? x : H) / f && v.pop(), v.unshift(O);
}
r.current += 1;
}
!o && he(), L && ye({
context: $,
rounded: N,
color: d,
x: o ? O : _,
y: h - R / 258 * h,
h: -h + R / 258 * h * 2,
w: v
!a && ee(), S && Te({
context: j,
rounded: A,
color: z,
x: a ? x : H,
y: m - $ / 258 * m,
h: -m + $ / 258 * m * 2,
w: f
});
let Y = (o ? O : _) - r.current;
m.forEach((y) => {
y && ye({
context: $,
color: d,
rounded: N,
x: Y,
y: y.startY * h / 100 > h / 2 - 1 ? h / 2 - 1 : y.startY * h / 100,
h: y.barHeight * h / 100 > 2 ? y.barHeight * h / 100 : 2,
w: v
}), Y -= v;
let W = (a ? x : H) - r.current;
v.forEach((y) => {
y && Te({
context: j,
color: z,
rounded: A,
x: W,
y: y.startY * m / 100 > m / 2 - 1 ? m / 2 - 1 : y.startY * m / 100,
h: y.barHeight * m / 100 > 2 ? y.barHeight * m / 100 : 2,
w: f
}), W -= f;
});
} else
m.length = 0;
function he() {
ot({
context: $,
color: f,
rounded: N,
width: O,
height: h,
barWidth: v
v.length = 0;
function ee() {
st({
context: j,
color: g,
rounded: A,
width: x,
height: m,
barWidth: f
});
}
}, ke = (e) => {
}, Qe = (e) => {
const t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = e % 60, c = Math.floor(

@@ -153,3 +153,3 @@ (r - Math.floor(r)) * 1e3

).charAt(0)}`;
}, at = (e) => {
}, ut = (e) => {
const t = Math.floor(e / 1e3), n = Math.floor(t / 3600), r = Math.floor(t % 3600 / 60), c = t % 60;

@@ -161,3 +161,3 @@ return n > 0 ? `${String(n).padStart(2, "0")}:${String(r).padStart(

};
function Ye(e) {
function Pe(e) {
if (typeof e == "string") {

@@ -170,3 +170,3 @@ const t = Number(e);

}
const ut = ({
const ht = ({
bufferData: e,

@@ -178,22 +178,22 @@ height: t,

}) => {
const u = n / (r + c * r), M = Math.floor(e.length / u), m = t / 2;
let I = [], v = 0;
for (let d = 0; d < u; d++) {
const f = [];
let N = 0;
for (let o = 0; o < M && d * M + o < e.length; o++) {
const z = e[d * M + o];
z > 0 && (f.push(z), N++);
const h = n / (r + c * r), M = Math.floor(e.length / h), v = t / 2;
let p = [], f = 0;
for (let z = 0; z < h; z++) {
const g = [];
let A = 0;
for (let a = 0; a < M && z * M + a < e.length; a++) {
const l = e[z * M + a];
l > 0 && (g.push(l), A++);
}
const L = f.reduce((o, z) => o + z, 0) / N;
L > v && (v = L), I.push({ max: L });
const S = g.reduce((a, l) => a + l, 0) / A;
S > f && (f = S), p.push({ max: S });
}
if (m * 0.95 > v * m) {
const d = m * 0.95 / v;
I = I.map((f) => ({
max: f.max > 0.01 ? f.max * d : 1
if (v * 0.95 > f * v) {
const z = v * 0.95 / f;
p = p.map((g) => ({
max: g.max > 0.01 ? g.max * z : 1
}));
}
return I;
}, ht = (e) => {
return p;
}, lt = (e) => {
if (!e)

@@ -203,3 +203,3 @@ return "";

return t && t.length >= 2 ? `.${t[1]}` : "";
}, lt = (e) => {
}, mt = (e) => {
const t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = e % 60, c = Math.floor(

@@ -216,3 +216,3 @@ (r - Math.floor(r)) * 1e3

).charAt(0)}${String(c).charAt(1)}s`;
}, mt = (e) => {
}, vt = (e) => {
onmessage = (t) => {

@@ -222,3 +222,3 @@ postMessage(e(t.data));

};
function vt({
function dt({
fn: e,

@@ -228,3 +228,3 @@ initialValue: t,

}) {
const [r, c] = l(t);
const [r, c] = u(t);
return {

@@ -234,17 +234,17 @@ result: r,

run: (M) => {
const m = new Worker(
const v = new Worker(
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
URL.createObjectURL(new Blob([`(${mt})(${e})`]))
URL.createObjectURL(new Blob([`(${vt})(${e})`]))
);
m.onmessage = (I) => {
I.data && (c(I.data), n && n(), m.terminate());
}, m.onerror = (I) => {
console.error(I.message), m.terminate();
}, m.postMessage(M);
v.onmessage = (p) => {
p.data && (c(p.data), n && n(), v.terminate());
}, v.onerror = (p) => {
console.error(p.message), v.terminate();
}, v.postMessage(M);
}
};
}
const dt = (e, t = 250) => {
const n = S();
return nt(
const ft = (e, t = 250) => {
const n = N();
return it(
// eslint-disable-next-line @typescript-eslint/no-explicit-any

@@ -260,13 +260,13 @@ (...r) => {

};
function ft(e) {
const t = S(e);
return Be(() => {
function zt(e) {
const t = N(e);
return Je(() => {
t.current = e;
}, [e]), t;
}
const zt = ({
const gt = ({
color: e = "#000000",
stroke: t = 2,
className: n
}) => /* @__PURE__ */ a(
}) => /* @__PURE__ */ o(
"svg",

@@ -278,3 +278,3 @@ {

className: n,
children: /* @__PURE__ */ a(
children: /* @__PURE__ */ o(
"path",

@@ -290,6 +290,6 @@ {

}
), Ge = ({
), We = ({
color: e = "#FFFFFF",
reflect: t
}) => /* @__PURE__ */ a(
}) => /* @__PURE__ */ o(
"svg",

@@ -300,3 +300,3 @@ {

className: `voice-visualizer__canvas-audio-wave-icon ${t ? "voice-visualizer__canvas-audio-wave-icon2" : ""}`,
children: /* @__PURE__ */ a(
children: /* @__PURE__ */ o(
"path",

@@ -309,3 +309,3 @@ {

}
), Pe = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMzMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEuMSAxNi43MmMwIDMgLjk2IDUuOCAzLjYxIDcuOTVhOS45NiA5Ljk2IDAgMCAwIDYuNSAyLjE3bTAgMHY0LjM0aDQuMzQtOC42N200LjM0LTQuMzRjMi4zNSAwIDQuNDItLjQ4IDYuNS0yLjE3YTkuODcgOS44NyAwIDAgMCAzLjYxLTcuOTVNMTEuMjIgMS44MmMtMS40NSAwLTIuNS4zNy0zLjMuOTNhNS42IDUuNiAwIDAgMC0xLjg0IDIuNGMtLjkgMi4wNi0xLjEgNC43Ny0xLjEgNy4yNCAwIDIuNDYuMiA1LjE3IDEuMSA3LjI0YTUuNiA1LjYgMCAwIDAgMS44NCAyLjRjLjguNTUgMS44NS45MiAzLjMuOTIgMS40NCAwIDIuNS0uMzcgMy4yOS0uOTNhNS42IDUuNiAwIDAgMCAxLjg0LTIuNGMuOS0yLjA2IDEuMS00Ljc3IDEuMS03LjIzIDAtMi40Ny0uMi01LjE4LTEuMS03LjI0YTUuNiA1LjYgMCAwIDAtMS44NC0yLjQgNS41MiA1LjUyIDAgMCAwLTMuMy0uOTNaIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K", gt = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE4Ljc1IDYuMTZjNC4zMSAyLjYgNi40NiAzLjkgNi40NiA1Ljg0IDAgMS45NS0yLjE1IDMuMjQtNi40NiA1Ljg0bC00Ljg0IDIuOTJjLTQuMzEgMi42LTYuNDYgMy44OS04LjA4IDIuOTItMS42Mi0uOTgtMS42Mi0zLjU3LTEuNjItOC43NlY5LjA4YzAtNS4xOSAwLTcuNzggMS42Mi04Ljc2IDEuNjItLjk3IDMuNzcuMzMgOC4wOCAyLjkybDQuODQgMi45MloiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==", We = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE0IDMuNWEzLjUgMy41IDAgMSAxIDcgMHYyMmEzLjUgMy41IDAgMSAxLTcgMHYtMjJaIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjkiIHJ4PSIzLjUiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==", Mt = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3QgeD0iLjIxIiB3aWR0aD0iMjYiIGhlaWdodD0iMjUiIHJ4PSI1IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=", wt = it(
), Be = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMzMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEuMSAxNi43MmMwIDMgLjk2IDUuOCAzLjYxIDcuOTVhOS45NiA5Ljk2IDAgMCAwIDYuNSAyLjE3bTAgMHY0LjM0aDQuMzQtOC42N200LjM0LTQuMzRjMi4zNSAwIDQuNDItLjQ4IDYuNS0yLjE3YTkuODcgOS44NyAwIDAgMCAzLjYxLTcuOTVNMTEuMjIgMS44MmMtMS40NSAwLTIuNS4zNy0zLjMuOTNhNS42IDUuNiAwIDAgMC0xLjg0IDIuNGMtLjkgMi4wNi0xLjEgNC43Ny0xLjEgNy4yNCAwIDIuNDYuMiA1LjE3IDEuMSA3LjI0YTUuNiA1LjYgMCAwIDAgMS44NCAyLjRjLjguNTUgMS44NS45MiAzLjMuOTIgMS40NCAwIDIuNS0uMzcgMy4yOS0uOTNhNS42IDUuNiAwIDAgMCAxLjg0LTIuNGMuOS0yLjA2IDEuMS00Ljc3IDEuMS03LjIzIDAtMi40Ny0uMi01LjE4LTEuMS03LjI0YTUuNiA1LjYgMCAwIDAtMS44NC0yLjQgNS41MiA1LjUyIDAgMCAwLTMuMy0uOTNaIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K", Mt = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE4Ljc1IDYuMTZjNC4zMSAyLjYgNi40NiAzLjkgNi40NiA1Ljg0IDAgMS45NS0yLjE1IDMuMjQtNi40NiA1Ljg0bC00Ljg0IDIuOTJjLTQuMzEgMi42LTYuNDYgMy44OS04LjA4IDIuOTItMS42Mi0uOTgtMS42Mi0zLjU3LTEuNjItOC43NlY5LjA4YzAtNS4xOSAwLTcuNzggMS42Mi04Ljc2IDEuNjItLjk3IDMuNzcuMzMgOC4wOCAyLjkybDQuODQgMi45MloiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==", ke = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE0IDMuNWEzLjUgMy41IDAgMSAxIDcgMHYyMmEzLjUgMy41IDAgMSAxLTcgMHYtMjJaIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjkiIHJ4PSIzLjUiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==", pt = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3QgeD0iLjIxIiB3aWR0aD0iMjYiIGhlaWdodD0iMjUiIHJ4PSI1IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=", Lt = ct(
({

@@ -318,138 +318,139 @@ controls: {

currentAudioTime: c,
audioSrc: u,
audioSrc: h,
bufferFromRecordedBlob: M,
togglePauseResume: m,
startRecording: I,
stopRecording: v,
saveAudioFile: d,
isAvailableRecordedAudio: f,
isPausedRecordedAudio: N,
isPausedRecording: L,
isProcessingRecordedAudio: o,
isCleared: z,
formattedDuration: $,
formattedRecordingTime: h,
formattedRecordedAudioCurrentTime: O,
clearCanvas: _,
setCurrentAudioTime: he,
isProcessingOnResize: R,
_setIsProcessingOnResize: Y,
_setIsProcessingAudioOnComplete: y
togglePauseResume: v,
startRecording: p,
stopRecording: f,
saveAudioFile: z,
isAvailableRecordedAudio: g,
isPausedRecordedAudio: A,
isPausedRecording: S,
isProcessingStartRecording: a,
isProcessingRecordedAudio: l,
isCleared: j,
formattedDuration: m,
formattedRecordingTime: x,
formattedRecordedAudioCurrentTime: H,
clearCanvas: ee,
setCurrentAudioTime: $,
isProcessingOnResize: W,
_setIsProcessingOnResize: y,
_setIsProcessingAudioOnComplete: te
},
width: k = "100%",
height: G = 200,
speed: le = 3,
backgroundColor: x = "transparent",
mainBarColor: b = "#FFFFFF",
secondaryBarColor: J = "#5e5e5e",
barWidth: P = 2,
gap: me = 1,
rounded: te = 5,
isControlPanelShown: re = !0,
isDownloadAudioButtonShown: ne = !1,
animateCurrentPick: Q = !0,
fullscreen: V = !1,
onlyRecording: q = !1,
width: O = "100%",
height: le = 200,
speed: re = 3,
backgroundColor: Y = "transparent",
mainBarColor: C = "#FFFFFF",
secondaryBarColor: R = "#5e5e5e",
barWidth: ne = 2,
gap: Ie = 1,
rounded: Z = 5,
isControlPanelShown: ie = !0,
isDownloadAudioButtonShown: B = !1,
animateCurrentPick: ce = !0,
fullscreen: me = !1,
onlyRecording: k = !1,
isDefaultUIShown: ve = !0,
defaultMicrophoneIconColor: Ie = b,
defaultAudioWaveIconColor: ie = b,
mainContainerClassName: ce,
canvasContainerClassName: p,
isProgressIndicatorShown: Z = !q,
progressIndicatorClassName: X,
isProgressIndicatorTimeShown: oe = !0,
progressIndicatorTimeClassName: K,
isProgressIndicatorOnHoverShown: E = !q,
progressIndicatorOnHoverClassName: H,
isProgressIndicatorTimeOnHoverShown: s = !0,
progressIndicatorTimeOnHoverClassName: pe,
isAudioProcessingTextShown: De = !0,
audioProcessingTextClassName: Te,
controlButtonsClassName: we
}, Ee) => {
const [se, Ce] = l(0), [D, de] = l(0), [ee, Le] = l(0), [fe, _e] = l(0), [U, Se] = l(!1), [Ne, ae] = l(window.innerWidth), [Ae, i] = l(!1), g = Ne < 768, T = Math.trunc(le), A = Math.trunc(me), C = Math.trunc(
g && A > 0 ? P + 1 : P
), Je = C + A * C, w = S(null), He = S([]), je = S(T), Qe = S(C), Ve = S(C), ze = S(null), W = Ee, qe = ft(Ne), {
result: ge,
setResult: Xe,
run: Ke
} = vt({
fn: ut,
defaultMicrophoneIconColor: de = C,
defaultAudioWaveIconColor: J = C,
mainContainerClassName: _e,
canvasContainerClassName: oe,
isProgressIndicatorShown: I = !k,
progressIndicatorClassName: U,
isProgressIndicatorTimeShown: Q = !0,
progressIndicatorTimeClassName: se,
isProgressIndicatorOnHoverShown: V = !k,
progressIndicatorOnHoverClassName: E,
isProgressIndicatorTimeOnHoverShown: b = !0,
progressIndicatorTimeOnHoverClassName: s,
isAudioProcessingTextShown: we = !0,
audioProcessingTextClassName: Ee,
controlButtonsClassName: Le
}, Ce) => {
const [fe, Se] = u(0), [T, be] = u(0), [q, ze] = u(0), [ae, xe] = u(0), [ue, X] = u(!1), [Ne, Ae] = u(window.innerWidth), [he, je] = u(!1), i = Ne < 768, d = Math.trunc(re), _ = Math.trunc(Ie), w = Math.trunc(
i && _ > 0 ? ne + 1 : ne
), ye = w + _ * w, L = N(null), Oe = N([]), De = N(d), Ve = N(w), qe = N(w), ge = N(null), G = Ce, Xe = zt(Ne), {
result: Me,
setResult: Ke,
run: et
} = dt({
fn: ht,
initialValue: [],
onMessageReceived: tt
}), et = dt(xe);
onMessageReceived: rt
}), tt = ft(He);
F(() => {
xe();
const j = () => {
qe.current !== window.innerWidth && (f ? (ae(window.innerWidth), Y(!0), i(!0), et()) : (ae(window.innerWidth), xe()));
He();
const D = () => {
Xe.current !== window.innerWidth && (g ? (Ae(window.innerWidth), y(!0), je(!0), tt()) : (Ae(window.innerWidth), He()));
};
return window.addEventListener("resize", j), () => {
window.removeEventListener("resize", j);
return window.addEventListener("resize", D), () => {
window.removeEventListener("resize", D);
};
}, [k, f]), Be(() => {
w.current && ((je.current >= T || !e.length) && (je.current = e.length ? 0 : T, st({
}, [O, g]), Je(() => {
L.current && ((De.current >= d || !e.length) && (De.current = e.length ? 0 : d, at({
audioData: e,
unit: Je,
index: Qe,
index2: Ve,
canvas: w.current,
picks: He.current,
unit: ye,
index: Ve,
index2: qe,
canvas: L.current,
picks: Oe.current,
isRecordingInProgress: t,
isPausedRecording: L,
backgroundColor: x,
mainBarColor: b,
secondaryBarColor: J,
barWidth: C,
rounded: te,
animateCurrentPick: Q,
fullscreen: V
})), je.current += 1);
isPausedRecording: S,
backgroundColor: Y,
mainBarColor: C,
secondaryBarColor: R,
barWidth: w,
rounded: Z,
animateCurrentPick: ce,
fullscreen: me
})), De.current += 1);
}, [
w.current,
L.current,
e,
w,
Y,
C,
x,
b,
J,
te,
V,
R,
Z,
me,
ve,
fe
ae
]), F(() => {
var j, B;
if (f)
return U ? (j = w.current) == null || j.addEventListener("mouseleave", Oe) : (B = w.current) == null || B.addEventListener("mouseenter", $e), () => {
var Me, Ue;
U ? (Me = w.current) == null || Me.removeEventListener(
var D, P;
if (g)
return ue ? (D = L.current) == null || D.addEventListener("mouseleave", Ze) : (P = L.current) == null || P.addEventListener("mouseenter", Re), () => {
var pe, Ye;
ue ? (pe = L.current) == null || pe.removeEventListener(
"mouseleave",
Oe
) : (Ue = w.current) == null || Ue.removeEventListener(
Ze
) : (Ye = L.current) == null || Ye.removeEventListener(
"mouseenter",
$e
Re
);
};
}, [U, f]), F(() => {
var B;
if (!M || !w.current || t || Ae)
}, [ue, g]), F(() => {
var P;
if (!M || !L.current || t || he)
return;
if (q) {
_();
if (k) {
ee();
return;
}
He.current = [];
const j = M.getChannelData(0);
return Ke({
bufferData: j,
height: ee,
width: fe,
barWidth: C,
gap: A
}), (B = w.current) == null || B.addEventListener(
Oe.current = [];
const D = M.getChannelData(0);
return et({
bufferData: D,
height: q,
width: ae,
barWidth: w,
gap: _
}), (P = L.current) == null || P.addEventListener(
"mousemove",
Re
Ue
), () => {
var Me;
(Me = w.current) == null || Me.removeEventListener(
var pe;
(pe = L.current) == null || pe.removeEventListener(
"mousemove",
Re
Ue
);

@@ -459,23 +460,23 @@ };

M,
D,
ee,
me,
P,
Ae
T,
q,
Ie,
ne,
he
]), F(() => {
if (!(q || !(ge != null && ge.length) || !w.current || o)) {
if (z) {
Xe([]);
if (!(k || !(Me != null && Me.length) || !L.current || l)) {
if (j) {
Ke([]);
return;
}
ct({
barsData: ge,
canvas: w.current,
barWidth: C,
gap: A,
backgroundColor: x,
mainBarColor: b,
secondaryBarColor: J,
ot({
barsData: Me,
canvas: L.current,
barWidth: w,
gap: _,
backgroundColor: Y,
mainBarColor: C,
secondaryBarColor: R,
currentAudioTime: c,
rounded: te,
rounded: Z,
duration: r

@@ -485,61 +486,61 @@ });

}, [
ge,
Me,
c,
z,
te,
x,
b,
J
j,
Z,
Y,
C,
R
]), F(() => {
o && w.current && be({
canvas: w.current,
backgroundColor: x
l && L.current && $e({
canvas: L.current,
backgroundColor: Y
});
}, [o]);
function xe() {
if (!ze.current || !w.current)
}, [l]);
function He() {
if (!ge.current || !L.current)
return;
je.current = T;
const j = Math.trunc(
ze.current.clientHeight * window.devicePixelRatio / 2
De.current = d;
const D = Math.trunc(
ge.current.clientHeight * window.devicePixelRatio / 2
) * 2;
de(ze.current.clientWidth), Le(j), _e(
be(ge.current.clientWidth), ze(D), xe(
Math.round(
ze.current.clientWidth * window.devicePixelRatio
ge.current.clientWidth * window.devicePixelRatio
)
), i(!1);
), je(!1);
}
function tt() {
Y(!1), y(!1), W != null && W.current && !R && (W.current.src = u);
function rt() {
y(!1), te(!1), G != null && G.current && !W && (G.current.src = h);
}
const $e = () => {
Se(!0);
}, Oe = () => {
Se(!1);
}, Re = (j) => {
Ce(j.offsetX);
}, rt = (j) => {
if (W != null && W.current && w.current) {
const B = r / D * (j.clientX - w.current.getBoundingClientRect().left);
W.current.currentTime = B, he(B);
const Re = () => {
X(!0);
}, Ze = () => {
X(!1);
}, Ue = (D) => {
Se(D.offsetX);
}, nt = (D) => {
if (G != null && G.current && L.current) {
const P = r / T * (D.clientX - L.current.getBoundingClientRect().left);
G.current.currentTime = P, $(P);
}
}, Ze = c / r * D;
return /* @__PURE__ */ ue("div", { className: `voice-visualizer ${ce ?? ""}`, children: [
/* @__PURE__ */ ue(
}, Fe = c / r * T;
return /* @__PURE__ */ K("div", { className: `voice-visualizer ${_e ?? ""}`, children: [
/* @__PURE__ */ K(
"div",
{
className: `voice-visualizer__canvas-container ${p ?? ""}`,
ref: ze,
style: { width: Ye(k) },
className: `voice-visualizer__canvas-container ${oe ?? ""}`,
ref: ge,
style: { width: Pe(O) },
children: [
/* @__PURE__ */ a(
/* @__PURE__ */ o(
"canvas",
{
ref: w,
width: fe,
height: ee,
onClick: rt,
ref: L,
width: ae,
height: q,
onClick: nt,
style: {
height: Ye(G),
width: D
height: Pe(le),
width: T
},

@@ -549,14 +550,14 @@ children: "Your browser does not support HTML5 Canvas."

),
ve && z && /* @__PURE__ */ ue(Fe, { children: [
/* @__PURE__ */ a(Ge, { color: ie }),
/* @__PURE__ */ a(Ge, { color: ie, reflect: !0 }),
/* @__PURE__ */ a(
ve && j && /* @__PURE__ */ K(Ge, { children: [
/* @__PURE__ */ o(We, { color: J }),
/* @__PURE__ */ o(We, { color: J, reflect: !0 }),
/* @__PURE__ */ o(
"button",
{
onClick: I,
onClick: p,
className: "voice-visualizer__canvas-microphone-btn",
children: /* @__PURE__ */ a(
zt,
children: /* @__PURE__ */ o(
gt,
{
color: Ie,
color: de,
stroke: 0.5,

@@ -569,25 +570,25 @@ className: "voice-visualizer__canvas-microphone-icon"

] }),
De && o && /* @__PURE__ */ a(
we && l && /* @__PURE__ */ o(
"p",
{
className: `voice-visualizer__canvas-audio-processing ${Te ?? ""}`,
style: { color: b },
className: `voice-visualizer__canvas-audio-processing ${Ee ?? ""}`,
style: { color: C },
children: "Processing Audio..."
}
),
U && f && !o && !g && E && /* @__PURE__ */ a(
ue && g && !l && !i && V && /* @__PURE__ */ o(
"div",
{
className: `voice-visualizer__progress-indicator-hovered ${H ?? ""}`,
className: `voice-visualizer__progress-indicator-hovered ${E ?? ""}`,
style: {
left: se
left: fe
},
children: s && /* @__PURE__ */ a(
children: b && /* @__PURE__ */ o(
"p",
{
className: `voice-visualizer__progress-indicator-hovered-time
${D - se < 70 ? "voice-visualizer__progress-indicator-hovered-time-left" : ""}
${pe ?? ""}`,
children: ke(
r / D * se
${T - fe < 70 ? "voice-visualizer__progress-indicator-hovered-time-left" : ""}
${s ?? ""}`,
children: Qe(
r / T * fe
)

@@ -598,14 +599,14 @@ }

),
Z && f && !o && r ? /* @__PURE__ */ a(
I && g && !l && r ? /* @__PURE__ */ o(
"div",
{
className: `voice-visualizer__progress-indicator ${X ?? ""}`,
className: `voice-visualizer__progress-indicator ${U ?? ""}`,
style: {
left: Ze < D - 1 ? Ze : D - 1
left: Fe < T - 1 ? Fe : T - 1
},
children: oe && /* @__PURE__ */ a(
children: Q && /* @__PURE__ */ o(
"p",
{
className: `voice-visualizer__progress-indicator-time ${D - c * D / r < 70 ? "voice-visualizer__progress-indicator-time-left" : ""} ${K ?? ""}`,
children: O
className: `voice-visualizer__progress-indicator-time ${T - c * T / r < 70 ? "voice-visualizer__progress-indicator-time-left" : ""} ${se ?? ""}`,
children: H
}

@@ -618,33 +619,33 @@ )

),
re && /* @__PURE__ */ ue(Fe, { children: [
/* @__PURE__ */ ue("div", { className: "voice-visualizer__audio-info-container", children: [
t && /* @__PURE__ */ a("p", { className: "voice-visualizer__audio-info-time", children: h }),
r && !o ? /* @__PURE__ */ a("p", { children: $ }) : null
ie && /* @__PURE__ */ K(Ge, { children: [
/* @__PURE__ */ K("div", { className: "voice-visualizer__audio-info-container", children: [
t && /* @__PURE__ */ o("p", { className: "voice-visualizer__audio-info-time", children: x }),
r && !l ? /* @__PURE__ */ o("p", { children: m }) : null
] }),
/* @__PURE__ */ ue("div", { className: "voice-visualizer__buttons-container", children: [
t && /* @__PURE__ */ a(
/* @__PURE__ */ K("div", { className: "voice-visualizer__buttons-container", children: [
t && /* @__PURE__ */ o("div", { className: "voice-visualizer__btn-container", children: /* @__PURE__ */ o(
"button",
{
className: `voice-visualizer__btn-left ${L ? "voice-visualizer__btn-left-microphone" : ""}`,
onClick: m,
children: /* @__PURE__ */ a(
className: `voice-visualizer__btn-left ${S ? "voice-visualizer__btn-left-microphone" : ""}`,
onClick: v,
children: /* @__PURE__ */ o(
"img",
{
src: L ? Pe : We,
alt: L ? "Play" : "Pause"
src: S ? Be : ke,
alt: S ? "Play" : "Pause"
}
)
}
),
!z && /* @__PURE__ */ a(
) }),
!j && /* @__PURE__ */ o(
"button",
{
className: `voice-visualizer__btn-left ${t ? "voice-visualizer__visually-hidden" : ""}`,
onClick: m,
disabled: o,
children: /* @__PURE__ */ a(
className: `voice-visualizer__btn-left ${t || a ? "voice-visualizer__visually-hidden" : ""}`,
onClick: v,
disabled: l,
children: /* @__PURE__ */ o(
"img",
{
src: N ? gt : We,
alt: N ? "Play" : "Pause"
src: A ? Mt : ke,
alt: A ? "Play" : "Pause"
}

@@ -654,33 +655,36 @@ )

),
z && /* @__PURE__ */ a(
j && /* @__PURE__ */ K(
"button",
{
className: "voice-visualizer__btn-center",
onClick: I,
children: /* @__PURE__ */ a("img", { src: Pe, alt: "Microphone" })
className: `voice-visualizer__btn-center relative ${a ? "voice-visualizer__btn-center--border-transparent" : ""}`,
onClick: p,
children: [
a && /* @__PURE__ */ o("div", { className: "spinner__wrapper", children: /* @__PURE__ */ o("div", { className: "spinner" }) }),
/* @__PURE__ */ o("img", { src: Be, alt: "Microphone" })
]
}
),
/* @__PURE__ */ a(
/* @__PURE__ */ o(
"button",
{
className: `voice-visualizer__btn-center voice-visualizer__btn-center-pause ${t ? "" : "voice-visualizer__visually-hidden"}`,
onClick: v,
children: /* @__PURE__ */ a("img", { src: Mt, alt: "Stop" })
onClick: f,
children: /* @__PURE__ */ o("img", { src: pt, alt: "Stop" })
}
),
!z && /* @__PURE__ */ a(
!j && /* @__PURE__ */ o(
"button",
{
onClick: _,
className: `voice-visualizer__btn ${we ?? ""}`,
disabled: o,
onClick: ee,
className: `voice-visualizer__btn ${Le ?? ""}`,
disabled: l,
children: "Clear"
}
),
ne && n && /* @__PURE__ */ a(
B && n && /* @__PURE__ */ o(
"button",
{
onClick: d,
className: `voice-visualizer__btn ${we ?? ""}`,
disabled: o,
onClick: z,
className: `voice-visualizer__btn ${Le ?? ""}`,
disabled: l,
children: "Download Audio"

@@ -694,3 +698,3 @@ }

);
function Lt({
function St({
onStartRecording: e,

@@ -701,30 +705,30 @@ onStopRecording: t,

onClearCanvas: c,
onEndAudioPlayback: u,
onEndAudioPlayback: h,
onStartAudioPlayback: M,
onPausedAudioPlayback: m,
onResumedAudioPlayback: I,
onErrorPlayingAudio: v
onPausedAudioPlayback: v,
onResumedAudioPlayback: p,
onErrorPlayingAudio: f
} = {}) {
const [d, f] = l(!1), [N, L] = l(!1), [o, z] = l(null), [$, h] = l(new Uint8Array(0)), [O, _] = l(!1), [he, R] = l(null), [Y, y] = l(null), [k, G] = l(0), [le, x] = l(0), [b, J] = l(0), [P, me] = l(""), [te, re] = l(!0), [ne, Q] = l(0), [V, q] = l(!0), [ve, Ie] = l(!1), [ie, ce] = l(null), p = S(null), Z = S(null), X = S(null), oe = S(null), K = S(null), E = S(null), H = S(null), s = S(null), pe = !!(Y && !O), De = lt(b), Te = at(k), we = ke(ne), Ee = ve || O;
const [z, g] = u(!1), [A, S] = u(!1), [a, l] = u(null), [j, m] = u(new Uint8Array(0)), [x, H] = u(!1), [ee, $] = u(null), [W, y] = u(null), [te, O] = u(0), [le, re] = u(0), [Y, C] = u(0), [R, ne] = u(""), [Ie, Z] = u(!0), [ie, B] = u(0), [ce, me] = u(!0), [k, ve] = u(!1), [de, J] = u(null), [_e, oe] = u(!1), I = N(null), U = N(null), Q = N(null), se = N(null), V = N(null), E = N(null), b = N(null), s = N(null), we = !!(W && !x), Ee = mt(Y), Le = ut(te), Ce = Qe(ie), fe = k || x;
F(() => {
if (!d || N)
if (!z || A)
return;
const g = setInterval(() => {
const T = performance.now();
G((A) => A + (T - le)), x(T);
const d = setInterval(() => {
const _ = performance.now();
O((w) => w + (_ - le)), re(_);
}, 1e3);
return () => clearInterval(g);
}, [le, N, d]), F(() => {
if (ie) {
U();
return () => clearInterval(d);
}, [le, A, z]), F(() => {
if (de) {
X();
return;
}
}, [ie]), F(() => () => {
U();
}, []), F(() => (V || window.addEventListener("beforeunload", se), () => {
window.removeEventListener("beforeunload", se);
}), [V]);
const se = (i) => {
}, [de]), F(() => () => {
X();
}, []), F(() => (ce || window.addEventListener("beforeunload", Se), () => {
window.removeEventListener("beforeunload", Se);
}), [ce]);
const Se = (i) => {
i.preventDefault(), i.returnValue = "";
}, Ce = async (i) => {
}, T = async (i) => {
if (i)

@@ -734,110 +738,111 @@ try {

throw new Error("Error: The audio blob is empty");
const g = URL.createObjectURL(i);
me(g);
const T = await i.arrayBuffer(), C = await new AudioContext().decodeAudioData(T);
y(C), J(C.duration - 0.06), ce(null);
} catch (g) {
console.error("Error processing the audio blob:", g), ce(
g instanceof Error ? g : new Error("Error processing the audio blob")
const d = URL.createObjectURL(i);
ne(d);
const _ = await i.arrayBuffer(), ye = await new AudioContext().decodeAudioData(_);
y(ye), C(ye.duration - 0.06), J(null);
} catch (d) {
console.error("Error processing the audio blob:", d), J(
d instanceof Error ? d : new Error("Error processing the audio blob")
);
}
}, D = () => {
f(!0), navigator.mediaDevices.getUserMedia({ audio: !0 }).then((i) => {
x(performance.now()), z(i), Z.current = new window.AudioContext(), X.current = Z.current.createAnalyser(), oe.current = new Uint8Array(
X.current.frequencyBinCount
), K.current = Z.current.createMediaStreamSource(i), K.current.connect(X.current), p.current = new MediaRecorder(i), p.current.addEventListener(
}, be = () => {
oe(!0), navigator.mediaDevices.getUserMedia({ audio: !0 }).then((i) => {
me(!1), oe(!1), g(!0), re(performance.now()), l(i), U.current = new window.AudioContext(), Q.current = U.current.createAnalyser(), se.current = new Uint8Array(
Q.current.frequencyBinCount
), V.current = U.current.createMediaStreamSource(i), V.current.connect(Q.current), I.current = new MediaRecorder(i), I.current.addEventListener(
"dataavailable",
ee
), p.current.start(), de();
ze
), I.current.start(), e && e(), q();
}).catch((i) => {
f(!1), ce(
oe(!1), J(
i instanceof Error ? i : new Error("Error starting audio recording")
);
});
}, de = () => {
X.current.getByteTimeDomainData(oe.current), h(new Uint8Array(oe.current)), E.current = requestAnimationFrame(de);
}, ee = (i) => {
p.current && (p.current = null, s.current = new Audio(), R(i.data), Ce(i.data));
}, Le = () => {
s.current && (Q(s.current.currentTime), H.current = requestAnimationFrame(Le));
}, fe = () => {
d || (V || U(), D(), q(!1), e && e());
}, _e = () => {
d && (f(!1), p.current && (p.current.stop(), p.current.removeEventListener(
}, q = () => {
Q.current.getByteTimeDomainData(se.current), m(new Uint8Array(se.current)), E.current = requestAnimationFrame(q);
}, ze = (i) => {
I.current && (I.current = null, s.current = new Audio(), $(i.data), T(i.data));
}, ae = () => {
s.current && (B(s.current.currentTime), b.current = requestAnimationFrame(ae));
}, xe = () => {
z || (ce || X(), be());
}, ue = () => {
z && (g(!1), I.current && (I.current.stop(), I.current.removeEventListener(
"dataavailable",
ee
)), o == null || o.getTracks().forEach((i) => i.stop()), E.current && cancelAnimationFrame(E.current), K.current && K.current.disconnect(), Z.current && Z.current.state !== "closed" && Z.current.close(), _(!0), G(0), L(!1), t && t());
}, U = () => {
E.current && (cancelAnimationFrame(E.current), E.current = null), H.current && (cancelAnimationFrame(H.current), H.current = null), p.current && (p.current.removeEventListener(
ze
)), a == null || a.getTracks().forEach((i) => i.stop()), E.current && cancelAnimationFrame(E.current), V.current && V.current.disconnect(), U.current && U.current.state !== "closed" && U.current.close(), H(!0), O(0), S(!1), t && t());
}, X = () => {
E.current && (cancelAnimationFrame(E.current), E.current = null), b.current && (cancelAnimationFrame(b.current), b.current = null), I.current && (I.current.removeEventListener(
"dataavailable",
ee
), p.current.stop(), p.current = null), o == null || o.getTracks().forEach((i) => i.stop()), s != null && s.current && (s.current.removeEventListener("ended", ae), s.current.pause(), s.current.src = "", s.current = null), Z.current = null, X.current = null, oe.current = null, K.current = null, z(null), f(!1), _(!1), R(null), y(null), G(0), x(0), J(0), me(""), Q(0), re(!0), L(!1), Ie(!1), h(new Uint8Array(0)), ce(null), q(!0), c && c();
}, Se = () => {
ze
), I.current.stop(), I.current = null), a == null || a.getTracks().forEach((i) => i.stop()), s != null && s.current && (s.current.removeEventListener("ended", he), s.current.pause(), s.current.src = "", s.current = null), U.current = null, Q.current = null, se.current = null, V.current = null, l(null), oe(!1), g(!1), H(!1), $(null), y(null), O(0), re(0), C(0), ne(""), B(0), Z(!0), S(!1), ve(!1), m(new Uint8Array(0)), J(null), me(!0), c && c();
}, Ne = () => {
if (s.current && s.current.paused) {
const i = s.current.play();
i !== void 0 && i.catch((g) => {
console.error(g), v && v(
g instanceof Error ? g : new Error("Error playing audio")
i !== void 0 && i.catch((d) => {
console.error(d), f && f(
d instanceof Error ? d : new Error("Error playing audio")
);
});
}
}, Ne = () => {
var i, g, T;
if (d) {
L((A) => !A), ((i = p.current) == null ? void 0 : i.state) === "recording" ? ((g = p.current) == null || g.pause(), G((A) => A + (performance.now() - le)), E.current && cancelAnimationFrame(E.current), n && n()) : (E.current = requestAnimationFrame(de), (T = p.current) == null || T.resume(), x(performance.now()), r && r());
}, Ae = () => {
var i, d, _;
if (z) {
S((w) => !w), ((i = I.current) == null ? void 0 : i.state) === "recording" ? ((d = I.current) == null || d.pause(), O((w) => w + (performance.now() - le)), E.current && cancelAnimationFrame(E.current), n && n()) : (E.current = requestAnimationFrame(q), (_ = I.current) == null || _.resume(), re(performance.now()), r && r());
return;
}
if (s.current && pe)
if (s.current && we)
if (s.current.paused)
requestAnimationFrame(Le), Se(), s.current.addEventListener("ended", ae), re(!1), M && ne === 0 && M(), I && ne !== 0 && I();
requestAnimationFrame(ae), Ne(), s.current.addEventListener("ended", he), Z(!1), M && ie === 0 && M(), p && ie !== 0 && p();
else {
H.current && cancelAnimationFrame(H.current), s.current.removeEventListener("ended", ae), s.current.pause(), re(!0);
const A = s.current.currentTime;
Q(A), s.current.currentTime = A, m && m();
b.current && cancelAnimationFrame(b.current), s.current.removeEventListener("ended", he), s.current.pause(), Z(!0);
const w = s.current.currentTime;
B(w), s.current.currentTime = w, v && v();
}
}, ae = () => {
H.current && cancelAnimationFrame(H.current), re(!0), s != null && s.current && (s.current.currentTime = 0, Q(0), u && u());
}, Ae = () => {
var g;
if (!P)
}, he = () => {
b.current && cancelAnimationFrame(b.current), Z(!0), s != null && s.current && (s.current.currentTime = 0, B(0), h && h());
}, je = () => {
var d;
if (!R)
return;
const i = document.createElement("a");
i.href = P, i.download = `recorded_audio${ht(
(g = p.current) == null ? void 0 : g.mimeType
)}`, document.body.appendChild(i), i.click(), document.body.removeChild(i), URL.revokeObjectURL(P);
i.href = R, i.download = `recorded_audio${lt(
(d = I.current) == null ? void 0 : d.mimeType
)}`, document.body.appendChild(i), i.click(), document.body.removeChild(i), URL.revokeObjectURL(R);
};
return {
audioRef: s,
isRecordingInProgress: d,
isPausedRecording: N,
audioData: $,
recordingTime: k,
isProcessingRecordedAudio: Ee,
recordedBlob: he,
mediaRecorder: p.current,
duration: b,
currentAudioTime: ne,
audioSrc: P,
isPausedRecordedAudio: te,
bufferFromRecordedBlob: Y,
isCleared: V,
isAvailableRecordedAudio: pe,
formattedDuration: De,
formattedRecordingTime: Te,
formattedRecordedAudioCurrentTime: we,
startRecording: fe,
togglePauseResume: Ne,
stopRecording: _e,
saveAudioFile: Ae,
clearCanvas: U,
setCurrentAudioTime: Q,
error: ie,
isProcessingOnResize: ve,
_setIsProcessingAudioOnComplete: _,
_setIsProcessingOnResize: Ie
isRecordingInProgress: z,
isPausedRecording: A,
audioData: j,
recordingTime: te,
isProcessingRecordedAudio: fe,
recordedBlob: ee,
mediaRecorder: I.current,
duration: Y,
currentAudioTime: ie,
audioSrc: R,
isPausedRecordedAudio: Ie,
bufferFromRecordedBlob: W,
isCleared: ce,
isAvailableRecordedAudio: we,
formattedDuration: Ee,
formattedRecordingTime: Le,
formattedRecordedAudioCurrentTime: Ce,
startRecording: xe,
togglePauseResume: Ae,
stopRecording: ue,
saveAudioFile: je,
clearCanvas: X,
setCurrentAudioTime: B,
error: de,
isProcessingOnResize: k,
isProcessingStartRecording: _e,
_setIsProcessingAudioOnComplete: H,
_setIsProcessingOnResize: ve
};
}
export {
wt as VoiceVisualizer,
Lt as useVoiceVisualizer
Lt as VoiceVisualizer,
St as useVoiceVisualizer
};

1

dist/types/types.d.ts

@@ -33,2 +33,3 @@ import { Dispatch, MutableRefObject, SetStateAction } from "react";

isProcessingOnResize: boolean;
isProcessingStartRecording: boolean;
_setIsProcessingAudioOnComplete: Dispatch<SetStateAction<boolean>>;

@@ -35,0 +36,0 @@ _setIsProcessingOnResize: Dispatch<SetStateAction<boolean>>;

2

package.json
{
"name": "react-voice-visualizer",
"private": false,
"version": "1.7.6",
"version": "1.8.0",
"type": "module",

@@ -6,0 +6,0 @@ "author": "Yurii Zarytskyi",

61

README.md

@@ -122,32 +122,33 @@ # react-voice-visualizer [Demo App](https://react-voice-visualizer.vercel.app/)

| Returns | Type | Description |
|:------------------------------------|:-------------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `audioRef` | `MutableRefObject`<br/>`<HTMLAudioElement \| null>` | Reference to the audio element used for playback. |
| `isRecordingInProgress` | `boolean` | Indicates if audio recording is currently in progress. |
| `isPausedRecording` | `boolean` | Indicates if audio recording is currently paused. |
| `audioData` | `Uint8Array` | Audio data for real-time visualization. |
| `recordingTime` | `number` | Elapsed time during recording in milliseconds. |
| `mediaRecorder` | `MediaRecorder \| null` | MediaRecorder instance used for recording audio. |
| `duration` | `number` | Duration of the recorded audio in seconds. |
| `currentAudioTime` | `number` | Current playback time of the recorded audio in seconds. |
| `audioSrc` | `string` | Source URL of the recorded audio file for playback. |
| `isPausedRecordedAudio` | `boolean` | Indicates if recorded audio playback is paused. |
| `isProcessingRecordedAudio` | `boolean` | Indicates if the recorded audio is being processed and 'Processing Audio...' text shown. |
| `isCleared` | `boolean` | Indicates if the canvas has been cleared. |
| `isAvailableRecordedAudio` | `boolean` | Indicates whether recorded audi is available and not currently being processed. This return value can be used to check if it's an appropriate time to work with recorded audio data in your application. |
| `recordedBlob` | `Blob \| null` | Recorded audio data in Blob format. |
| `bufferFromRecordedBlob` | `AudioBuffer \| null` | Audio buffer from the recorded Blob. |
| `formattedDuration` | `string` | Formatted duration time in format 09:51m. |
| `formattedRecordingTime` | `string` | Formatted recording current time in format 09:51. |
| `formattedRecordedAudioCurrentTime` | `string` | Formatted recorded audio current time in format 09:51:1. |
| `startRecording` | `() => void` | Function to start audio recording. |
| `togglePauseResume` | `() => void` | Function to toggle pause/resume during recording and playback of recorded audio. |
| `stopRecording` | `() => void` | Function to stop audio recording. |
| `saveAudioFile` | `() => void` | This function allows you to save the recorded audio as a `webm` file format. Please note that it supports saving audio only in the webm format. If you need to save the audio in a different format, you can use external libraries like `FFmpeg` to convert the Blob to your desired format. This flexibility allows you to tailor the output format according to your specific needs. |
| `clearCanvas` | `() => void` | Function to clear the visualization canvas. |
| `setCurrentAudioTime` | `Dispatch<SetStateAction<number>>` | Internal function to handle current audio time updates during playback. |
| `error` | `Error \| null` | Error object if any error occurred during recording or playback. |
| `isProcessingOnResize` | `boolean` | Indicates whether audio processing is occurring during a resize event when audio is recorded and a blob is present. |
| `_setIsProcessingAudioOnComplete` | `Dispatch<SetStateAction<boolean>>` | Internal function to set `isProcessingAudioOnComplete` state. |
| `_setIsProcessingOnResize` | `Dispatch<SetStateAction<boolean>>` | Internal function to set `isProcessingOnResize` state. |
| Returns | Type | Description |
|:------------------------------------|:-------------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `audioRef` | `MutableRefObject`<br/>`<HTMLAudioElement \| null>` | Reference to the audio element used for playback. |
| `isRecordingInProgress` | `boolean` | Indicates if audio recording is currently in progress. |
| `isPausedRecording` | `boolean` | Indicates if audio recording is currently paused. |
| `audioData` | `Uint8Array` | Audio data for real-time visualization. |
| `recordingTime` | `number` | Elapsed time during recording in milliseconds. |
| `mediaRecorder` | `MediaRecorder \| null` | MediaRecorder instance used for recording audio. |
| `duration` | `number` | Duration of the recorded audio in seconds. |
| `currentAudioTime` | `number` | Current playback time of the recorded audio in seconds. |
| `audioSrc` | `string` | Source URL of the recorded audio file for playback. |
| `isPausedRecordedAudio` | `boolean` | Indicates if recorded audio playback is paused. |
| `isProcessingRecordedAudio` | `boolean` | Indicates if the recorded audio is being processed and 'Processing Audio...' text shown. |
| `isCleared` | `boolean` | Indicates if the canvas has been cleared. |
| `isAvailableRecordedAudio` | `boolean` | Indicates whether recorded audi is available and not currently being processed. This return value can be used to check if it's an appropriate time to work with recorded audio data in your application. |
| `recordedBlob` | `Blob \| null` | Recorded audio data in Blob format. |
| `bufferFromRecordedBlob` | `AudioBuffer \| null` | Audio buffer from the recorded Blob. |
| `formattedDuration` | `string` | Formatted duration time in format 09:51m. |
| `formattedRecordingTime` | `string` | Formatted recording current time in format 09:51. |
| `formattedRecordedAudioCurrentTime` | `string` | Formatted recorded audio current time in format 09:51:1. |
| `startRecording` | `() => void` | Function to start audio recording. |
| `togglePauseResume` | `() => void` | Function to toggle pause/resume during recording and playback of recorded audio. |
| `stopRecording` | `() => void` | Function to stop audio recording. |
| `saveAudioFile` | `() => void` | This function allows you to save the recorded audio as a `webm` file format. Please note that it supports saving audio only in the webm format. If you need to save the audio in a different format, you can use external libraries like `FFmpeg` to convert the Blob to your desired format. This flexibility allows you to tailor the output format according to your specific needs. |
| `clearCanvas` | `() => void` | Function to clear the visualization canvas. |
| `setCurrentAudioTime` | `Dispatch<SetStateAction<number>>` | Internal function to handle current audio time updates during playback. |
| `error` | `Error \| null` | Error object if any error occurred during recording or playback. |
| `isProcessingOnResize` | `boolean` | Indicates whether audio processing is occurring during a resize event when audio is recorded and a blob is present. |
| `isProcessingStartRecording` | `boolean` | When set to `true`, it indicates that the start recording button has been pressed, but either the permission to record has not yet been granted or the recording itself has not yet commenced. This prop serves as a helpful flag to manage the state of the recording process, allowing components to react accordingly to the current stage of recording initiation. |
| `_setIsProcessingAudioOnComplete` | `Dispatch<SetStateAction<boolean>>` | Internal function to set `isProcessingAudioOnComplete` state. |
| `_setIsProcessingOnResize` | `Dispatch<SetStateAction<boolean>>` | Internal function to set `isProcessingOnResize` state. |

@@ -154,0 +155,0 @@ ### `VoiceVisualizer` Component

dist/react-voice-visualizer.umd.cjs

Sorry, the diff of this file is not supported yet