@44-audio/components 0.1.0-dev.15 → 0.1.0-dev.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/player.es.js +3450 -157
- package/dist/recorder.es.js +519 -521
- package/dist/time-BmemrSJ4.mjs +2850 -0
- package/package.json +2 -2
- package/dist/AudioPlayer-BnKA5uw-.mjs +0 -2649
package/dist/recorder.es.js
CHANGED
|
@@ -1,362 +1,360 @@
|
|
|
1
|
-
import {
|
|
2
|
-
function
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { a7 as $e, l as ae, m as se, o as ne, q as P, T as _e, F as l, r as R, W as V, J as I, I as j, V as we, t as O, y as i, z as ie, D, A as T, w as e, K as z, G as re, H as Q, X as ze, _ as Me, x as H, Y as ue, B as te, Z as ce, v as Ue, $ as xe, L as U, a2 as Oe, a3 as oe, Q as qe, P as ve, a4 as Se, N as he, O as Fe, M as He, a0 as Ne, S as Ce, a8 as Ie } from "./time-BmemrSJ4.mjs";
|
|
2
|
+
function We(L, s, n, p, d) {
|
|
3
|
+
var t = () => {
|
|
4
|
+
p(n[L]);
|
|
5
|
+
};
|
|
6
|
+
n.addEventListener(s, t), t(), (n === document.body || n === window || n === document) && $e(() => {
|
|
7
|
+
n.removeEventListener(s, t);
|
|
8
|
+
});
|
|
6
9
|
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
var Ge = ue('<rect rx="1"></rect>'), Ve = R('<div class="container svelte-efr4jv" role="group" aria-label="audio player"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="svelte-efr4jv"><!></svg></div>');
|
|
11
|
+
const Je = {
|
|
12
|
+
hash: "svelte-efr4jv",
|
|
13
|
+
code: `svg.svelte-efr4jv {box-sizing:border-box;margin:0;padding:0;}.container.svelte-efr4jv {flex:1;box-sizing:border-box;margin:0;padding:0;display:flex;align-items:center;}.bar.svelte-efr4jv {transition:fill 0.2s;}.played.svelte-efr4jv {fill:var(--44-color-2, var(--fortyfour-recorder-bg-primary));}.unplayed.svelte-efr4jv {fill:var(--44-color-1, var(--fortyfour-recorder-color-0));}.recording-pulse.svelte-efr4jv {
|
|
14
|
+
animation: svelte-efr4jv-pulse 0.5s ease-out;}
|
|
15
|
+
|
|
16
|
+
@keyframes svelte-efr4jv-pulse {
|
|
17
|
+
0% {
|
|
18
|
+
opacity: 0.5;
|
|
19
|
+
}
|
|
20
|
+
100% {
|
|
21
|
+
opacity: 1;
|
|
22
|
+
}
|
|
23
|
+
}`
|
|
17
24
|
};
|
|
18
|
-
function
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
r.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
let r;
|
|
26
|
-
return U.tasks.size === 0 && U.tick(Cr), {
|
|
27
|
-
promise: new Promise((a) => {
|
|
28
|
-
U.tasks.add(r = { c: o, f: a });
|
|
29
|
-
}),
|
|
30
|
-
abort() {
|
|
31
|
-
U.tasks.delete(r);
|
|
25
|
+
function Le(L, s) {
|
|
26
|
+
se(s, !0), ne(L, Je);
|
|
27
|
+
function n(r, o) {
|
|
28
|
+
const v = r.length / o, a = [];
|
|
29
|
+
for (let f = 0; f < o; f++) {
|
|
30
|
+
const m = Math.floor(f * v), E = Math.floor((f + 1) * v), G = r.slice(m, Math.max(m + 1, E)), B = G.reduce((J, K) => J + K * K, 0), ge = Math.sqrt(B / G.length);
|
|
31
|
+
a.push(ge);
|
|
32
32
|
}
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
return a;
|
|
34
|
+
}
|
|
35
|
+
let p = P(s, "data", 7), d = P(s, "timeMs", 7, null), t = P(s, "barWidth", 7, 3), b = P(s, "spacing", 7, 1), u = P(s, "playedColor", 7, null), M = P(s, "unplayedColor", 7, null), h = D(0), $ = D(!1), k = null;
|
|
36
|
+
_e(() => {
|
|
37
|
+
const r = new ResizeObserver((o) => {
|
|
38
|
+
for (let v of o)
|
|
39
|
+
v.contentBoxSize ? l(h, v.contentBoxSize[0]?.inlineSize || v.contentBoxSize.inlineSize, !0) : l(h, v.contentRect.width, !0), l($, !0);
|
|
40
|
+
});
|
|
41
|
+
return k && r.observe(k), () => {
|
|
42
|
+
r.disconnect();
|
|
43
|
+
};
|
|
38
44
|
});
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
45
|
+
const x = 56, N = 100, F = H(() => Math.floor(e(h) / (t() + b()))), y = H(() => n(p(), e(F))), g = H(() => e(y).length ? p().length / e(y).length : 1), c = H(() => N * e(g)), q = H(() => e(y).map((r) => {
|
|
46
|
+
const o = Math.max(3, Math.round(r / 100 * (x - 3) + 3));
|
|
47
|
+
return o % 2 === 0 ? o + 1 : o;
|
|
48
|
+
}));
|
|
49
|
+
var A = {
|
|
50
|
+
get data() {
|
|
51
|
+
return p();
|
|
52
|
+
},
|
|
53
|
+
set data(r) {
|
|
54
|
+
p(r), T();
|
|
55
|
+
},
|
|
56
|
+
get timeMs() {
|
|
57
|
+
return d();
|
|
58
|
+
},
|
|
59
|
+
set timeMs(r = null) {
|
|
60
|
+
d(r), T();
|
|
61
|
+
},
|
|
62
|
+
get barWidth() {
|
|
63
|
+
return t();
|
|
64
|
+
},
|
|
65
|
+
set barWidth(r = 3) {
|
|
66
|
+
t(r), T();
|
|
67
|
+
},
|
|
68
|
+
get spacing() {
|
|
69
|
+
return b();
|
|
70
|
+
},
|
|
71
|
+
set spacing(r = 1) {
|
|
72
|
+
b(r), T();
|
|
73
|
+
},
|
|
74
|
+
get playedColor() {
|
|
75
|
+
return u();
|
|
76
|
+
},
|
|
77
|
+
set playedColor(r = null) {
|
|
78
|
+
u(r), T();
|
|
79
|
+
},
|
|
80
|
+
get unplayedColor() {
|
|
81
|
+
return M();
|
|
82
|
+
},
|
|
83
|
+
set unplayedColor(r = null) {
|
|
84
|
+
M(r), T();
|
|
85
|
+
}
|
|
86
|
+
}, S = Ve(), w = I(S);
|
|
87
|
+
V(w, "height", x);
|
|
88
|
+
var _ = I(w);
|
|
89
|
+
{
|
|
90
|
+
var C = (r) => {
|
|
91
|
+
var o = re(), v = Q(o);
|
|
92
|
+
ze(v, 17, () => e(q), Me, (a, f, m) => {
|
|
93
|
+
const E = H(() => m * e(c) < d()), G = H(() => d() === null && m === e(q).length - 1);
|
|
94
|
+
var B = Ge();
|
|
95
|
+
O(() => {
|
|
96
|
+
te(
|
|
97
|
+
B,
|
|
98
|
+
0,
|
|
99
|
+
ce([
|
|
100
|
+
"bar",
|
|
101
|
+
e(E) ? "played" : "unplayed",
|
|
102
|
+
e(G) && "recording-pulse"
|
|
103
|
+
]),
|
|
104
|
+
"svelte-efr4jv"
|
|
105
|
+
), V(B, "x", m * (t() + b())), V(B, "y", x / 4 - e(f) / 2), V(B, "width", t() - 1), V(B, "height", e(f)), Ue(B, e(E) ? u() ? `fill: ${u()}` : null : M() ? `fill: ${M()}` : null);
|
|
106
|
+
}), i(a, B);
|
|
107
|
+
}), i(r, o);
|
|
108
|
+
};
|
|
109
|
+
j(_, (r) => {
|
|
110
|
+
e($) && r(C);
|
|
111
|
+
});
|
|
57
112
|
}
|
|
58
|
-
return r;
|
|
113
|
+
return z(w), we(w, (r) => k = r, () => k), z(S), O(() => V(w, "viewBox", `0 0 ${e(h)} ${x / 2}`)), i(L, S), ie(A);
|
|
59
114
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
{},
|
|
66
|
-
|
|
67
|
-
}
|
|
115
|
+
ae(
|
|
116
|
+
Le,
|
|
117
|
+
{
|
|
118
|
+
data: {},
|
|
119
|
+
timeMs: {},
|
|
120
|
+
barWidth: {},
|
|
121
|
+
spacing: {},
|
|
122
|
+
playedColor: {},
|
|
123
|
+
unplayedColor: {}
|
|
124
|
+
},
|
|
125
|
+
[],
|
|
126
|
+
[],
|
|
127
|
+
!0
|
|
128
|
+
);
|
|
129
|
+
var Xe = ue('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="icon svelte-7u5az2"><path d="M176 96C149.5 96 128 117.5 128 144L128 496C128 522.5 149.5 544 176 544L240 544C266.5 544 288 522.5 288 496L288 144C288 117.5 266.5 96 240 96L176 96zM400 96C373.5 96 352 117.5 352 144L352 496C352 522.5 373.5 544 400 544L464 544C490.5 544 512 522.5 512 496L512 144C512 117.5 490.5 96 464 96L400 96z"></path></svg>'), Ke = ue('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="icon svelte-7u5az2"><path d="M187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6C135.4 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9z"></path></svg>'), Qe = R('<div class="container svelte-7u5az2" role="group" aria-label="Audio player"><button class="btn svelte-7u5az2"><!></button> <!> <div class="time svelte-7u5az2"><!></div> <audio></audio></div>');
|
|
130
|
+
const Ye = {
|
|
131
|
+
hash: "svelte-7u5az2",
|
|
132
|
+
code: ".container.svelte-7u5az2 {display:flex;align-items:stretch;gap:0.5rem;flex:1;}.btn.svelte-7u5az2 {border:none;border-radius:50%;padding:0.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1;flex-shrink:0;align-self:center;color:var(--fortyfour-recorder-btn-primary-color);background:var(--fortyfour-recorder-btn-primary-bg);}.btn.svelte-7u5az2:hover {color:var(--fortyfour-recorder-btn-primary-color-hover);background:var(--fortyfour-recorder-btn-primary-bg-hover);}.icon.svelte-7u5az2 {width:1.5em;height:1.5em;fill:currentColor;}.time.svelte-7u5az2 {display:flex;align-items:center;font-variant-numeric:tabular-nums;font-size:0.9rem;}"
|
|
133
|
+
};
|
|
134
|
+
function Ee(L, s) {
|
|
135
|
+
se(s, !0), ne(L, Ye);
|
|
136
|
+
let n = P(s, "audioURL", 7), p = P(s, "waveform", 7), d = D(null), t = D(0), b = D(0), u = D(
|
|
137
|
+
"ready"
|
|
138
|
+
// "ready", "playing", "paused"
|
|
139
|
+
), M = null;
|
|
140
|
+
const $ = typeof navigator < "u" && /iPad|iPhone|iPod/.test(navigator.userAgent) ? 350 : 0;
|
|
141
|
+
function k() {
|
|
142
|
+
e(d) && e(u) === "playing" && (l(t, e(d).currentTime, !0), M = requestAnimationFrame(k));
|
|
68
143
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
});
|
|
144
|
+
function x() {
|
|
145
|
+
l(u, "ready"), l(t, 0), M && (cancelAnimationFrame(M), M = null);
|
|
146
|
+
}
|
|
147
|
+
function N() {
|
|
148
|
+
e(d) && (e(u) === "playing" ? (e(d).pause(), l(u, "paused"), M && (cancelAnimationFrame(M), M = null)) : (e(d).play(), l(u, "playing"), k()));
|
|
149
|
+
}
|
|
150
|
+
var F = {
|
|
151
|
+
get audioURL() {
|
|
152
|
+
return n();
|
|
79
153
|
},
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
x?.(), u = void 0;
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
r.inert = !0, ir(r, "outrostart"), q = hr(r, I(), y, 0, () => {
|
|
86
|
-
ir(r, "outroend"), x?.();
|
|
87
|
-
});
|
|
154
|
+
set audioURL(a) {
|
|
155
|
+
n(a), T();
|
|
88
156
|
},
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
Ur
|
|
95
|
-
);
|
|
96
|
-
if ((f.transitions ??= []).push(n), d && Br) {
|
|
97
|
-
var l = g;
|
|
98
|
-
if (!l) {
|
|
99
|
-
for (var p = (
|
|
100
|
-
/** @type {Effect | null} */
|
|
101
|
-
f.parent
|
|
102
|
-
); p && (p.f & Hr) !== 0; )
|
|
103
|
-
for (; (p = p.parent) && (p.f & jr) === 0; )
|
|
104
|
-
;
|
|
105
|
-
l = !p || (p.f & Gr) !== 0;
|
|
157
|
+
get waveform() {
|
|
158
|
+
return p();
|
|
159
|
+
},
|
|
160
|
+
set waveform(a) {
|
|
161
|
+
p(a), T();
|
|
106
162
|
}
|
|
107
|
-
|
|
108
|
-
|
|
163
|
+
}, y = Qe(), g = I(y);
|
|
164
|
+
g.__click = N;
|
|
165
|
+
var c = I(g);
|
|
166
|
+
{
|
|
167
|
+
var q = (a) => {
|
|
168
|
+
var f = Xe();
|
|
169
|
+
i(a, f);
|
|
170
|
+
}, A = (a) => {
|
|
171
|
+
var f = Ke();
|
|
172
|
+
i(a, f);
|
|
173
|
+
};
|
|
174
|
+
j(c, (a) => {
|
|
175
|
+
e(u) === "playing" ? a(q) : a(A, !1);
|
|
109
176
|
});
|
|
110
177
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
178
|
+
z(g);
|
|
179
|
+
var S = U(g, 2);
|
|
180
|
+
{
|
|
181
|
+
var w = (a) => {
|
|
182
|
+
{
|
|
183
|
+
let f = H(() => Math.round(e(t) * 1e3) + $);
|
|
184
|
+
Le(a, {
|
|
185
|
+
get timeMs() {
|
|
186
|
+
return e(f);
|
|
187
|
+
},
|
|
188
|
+
get data() {
|
|
189
|
+
return p();
|
|
190
|
+
}
|
|
191
|
+
});
|
|
120
192
|
}
|
|
121
|
-
}), {
|
|
122
|
-
abort: () => {
|
|
123
|
-
g = !0, v?.abort();
|
|
124
|
-
},
|
|
125
|
-
deactivate: () => v.deactivate(),
|
|
126
|
-
reset: () => v.reset(),
|
|
127
|
-
t: () => v.t()
|
|
128
193
|
};
|
|
194
|
+
j(S, (a) => {
|
|
195
|
+
p() && a(w);
|
|
196
|
+
});
|
|
129
197
|
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
198
|
+
var _ = U(S, 2), C = I(_);
|
|
199
|
+
{
|
|
200
|
+
var r = (a) => {
|
|
201
|
+
var f = oe();
|
|
202
|
+
O((m) => ve(f, m), [() => qe(e(t))]), i(a, f);
|
|
203
|
+
}, o = (a) => {
|
|
204
|
+
var f = oe();
|
|
205
|
+
O((m) => ve(f, m), [() => qe(e(b))]), i(a, f);
|
|
136
206
|
};
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
var q = kr(u(0, 1));
|
|
141
|
-
y.push(q, q);
|
|
207
|
+
j(C, (a) => {
|
|
208
|
+
["playing", "paused"].includes(e(u)) ? a(r) : a(o, !1);
|
|
209
|
+
});
|
|
142
210
|
}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
var l = s - f, p = (
|
|
149
|
-
/** @type {number} */
|
|
150
|
-
r.duration * Math.abs(l)
|
|
151
|
-
), x = [];
|
|
152
|
-
if (p > 0) {
|
|
153
|
-
var A = !1;
|
|
154
|
-
if (u)
|
|
155
|
-
for (var E = Math.ceil(p / 16.666666666666668), h = 0; h <= E; h += 1) {
|
|
156
|
-
var k = f + l * w(h / E), i = kr(u(k, 1 - k));
|
|
157
|
-
x.push(i), A ||= i.overflow === "hidden";
|
|
158
|
-
}
|
|
159
|
-
A && (o.style.overflow = "hidden"), I = () => {
|
|
160
|
-
var c = (
|
|
161
|
-
/** @type {number} */
|
|
162
|
-
/** @type {globalThis.Animation} */
|
|
163
|
-
n.currentTime
|
|
164
|
-
);
|
|
165
|
-
return f + l * w(c / p);
|
|
166
|
-
}, _ && de(() => {
|
|
167
|
-
if (n.playState !== "running") return !1;
|
|
168
|
-
var c = I();
|
|
169
|
-
return _(c, 1 - c), !0;
|
|
170
|
-
});
|
|
171
|
-
}
|
|
172
|
-
n = o.animate(x, { duration: p, fill: "forwards" }), n.onfinish = () => {
|
|
173
|
-
I = () => s, _?.(s, 1 - s), d();
|
|
174
|
-
};
|
|
175
|
-
}, {
|
|
176
|
-
abort: () => {
|
|
177
|
-
n && (n.cancel(), n.effect = null, n.onfinish = Z);
|
|
178
|
-
},
|
|
179
|
-
deactivate: () => {
|
|
180
|
-
d = Z;
|
|
181
|
-
},
|
|
182
|
-
reset: () => {
|
|
183
|
-
s === 0 && _?.(1, 0);
|
|
184
|
-
},
|
|
185
|
-
t: () => I()
|
|
186
|
-
};
|
|
187
|
-
}
|
|
188
|
-
const ve = (o) => o;
|
|
189
|
-
function ue(o) {
|
|
190
|
-
const r = o - 1;
|
|
191
|
-
return r * r * r + 1;
|
|
192
|
-
}
|
|
193
|
-
function qr(o) {
|
|
194
|
-
const r = typeof o == "string" && o.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
|
|
195
|
-
return r ? [parseFloat(r[1]), r[2] || "px"] : [
|
|
196
|
-
/** @type {number} */
|
|
197
|
-
o,
|
|
198
|
-
"px"
|
|
199
|
-
];
|
|
200
|
-
}
|
|
201
|
-
function pe(o, { delay: r = 0, duration: a = 400, easing: s = ve } = {}) {
|
|
202
|
-
const d = +getComputedStyle(o).opacity;
|
|
203
|
-
return {
|
|
204
|
-
delay: r,
|
|
205
|
-
duration: a,
|
|
206
|
-
easing: s,
|
|
207
|
-
css: (e) => `opacity: ${e * d}`
|
|
208
|
-
};
|
|
209
|
-
}
|
|
210
|
-
function Ir(o, { delay: r = 0, duration: a = 400, easing: s = ue, x: d = 0, y: e = 0, opacity: v = 0 } = {}) {
|
|
211
|
-
const g = getComputedStyle(o), D = +g.opacity, u = g.transform === "none" ? "" : g.transform, _ = D * (1 - v), [w, y] = qr(d), [q, I] = qr(e);
|
|
212
|
-
return {
|
|
213
|
-
delay: r,
|
|
214
|
-
duration: a,
|
|
215
|
-
easing: s,
|
|
216
|
-
css: (n, f) => `
|
|
217
|
-
transform: ${u} translate(${(1 - n) * w}${y}, ${(1 - n) * q}${I});
|
|
218
|
-
opacity: ${D - _ * f}`
|
|
219
|
-
};
|
|
211
|
+
z(_);
|
|
212
|
+
var v = U(_, 2);
|
|
213
|
+
return we(v, (a) => l(d, a), () => e(d)), z(y), O(() => {
|
|
214
|
+
V(g, "aria-label", e(u) === "playing" ? "Pause" : "Play"), V(v, "src", n());
|
|
215
|
+
}), Oe("ended", v, x), We("duration", "durationchange", v, (a) => l(b, a)), i(L, y), ie(F);
|
|
220
216
|
}
|
|
221
|
-
|
|
222
|
-
|
|
217
|
+
xe(["click"]);
|
|
218
|
+
ae(Ee, { audioURL: {}, waveform: {} }, [], [], !0);
|
|
219
|
+
async function Ze(L, s, n, p) {
|
|
220
|
+
l(s, !e(s)), e(n).length || await p();
|
|
223
221
|
}
|
|
224
|
-
var
|
|
225
|
-
const
|
|
222
|
+
var er = R("<li><button> </button></li>"), rr = R('<li><button class="devices-select__option svelte-q87ygv" disabled>No microphones found</button></li>'), tr = R('<li><button class="devices-select__option svelte-q87ygv" disabled>Loading Microphones...</button></li>'), or = R('<ul role="listbox" aria-label="Select microphone"><!> <!> <!></ul>'), ar = R('<div class="container" role="group" aria-label="Audio recorder"><button class="devices-btn svelte-q87ygv" aria-haspopup="listbox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="devices-btn__icon svelte-q87ygv"><path d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path></svg></button> <!></div>');
|
|
223
|
+
const sr = {
|
|
226
224
|
hash: "svelte-q87ygv",
|
|
227
225
|
code: '.devices-btn.svelte-q87ygv {background:none;border:none;font-size:inherit;cursor:pointer;color:inherit;}.devices-btn__icon.svelte-q87ygv {width:0.75rem;height:0.75rem;fill:var(--fortyfour-recorder-btn-color);}.devices-select.svelte-q87ygv {display:none;flex-direction:column;list-style:none;margin:0;padding:0;border:var(--fortyfour-recorder-select-border);box-shadow:var(--fortyfour-recorder-select-shadow);border-radius:var(--fortyfour-recorder-select-radius);background:var(--fortyfour-recorder-select-bg);position:absolute;z-index:2147483647;overflow-y:auto;width:11rem;max-height:12rem;}.devices-select--is-open.svelte-q87ygv {display:flex;}.devices-select__option.svelte-q87ygv {padding:0.5rem 1rem;padding-left:0;background:none;border:none;text-align:left;cursor:pointer;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background 0.1s;font:inherit;font-size:var(--fortyfour-recorder-select-font-size);color:var(--fortyfour-recorder-select-color);}.devices-select__option.svelte-q87ygv:hover {background:var(--fortyfour-recorder-select-bg-hover);}.devices-select__option.svelte-q87ygv::before {content:"";display:inline-block;width:2ch;text-align:center;padding:0 0.25rem;}.devices-select__option--is-selected.svelte-q87ygv::before {content:"✓";}.devices-select__option.svelte-q87ygv:disabled {opacity:0.5;cursor:inherit;}.devices-select__option.svelte-q87ygv:disabled:hover {background:inherit;}'
|
|
228
226
|
};
|
|
229
|
-
function
|
|
230
|
-
|
|
231
|
-
let
|
|
232
|
-
|
|
233
|
-
function
|
|
234
|
-
|
|
227
|
+
function Re(L, s) {
|
|
228
|
+
se(s, !0), ne(L, sr);
|
|
229
|
+
let n = P(s, "deviceId", 15, ""), p = P(s, "disabled", 7, !1), d = D(Se([])), t = D(!1), b = D(!1), u;
|
|
230
|
+
_e(() => {
|
|
231
|
+
function y(g) {
|
|
232
|
+
g.composedPath().includes(u) || e(t) && l(t, !1);
|
|
235
233
|
}
|
|
236
|
-
return document.addEventListener("pointerdown",
|
|
237
|
-
document.removeEventListener("pointerdown",
|
|
234
|
+
return document.addEventListener("pointerdown", y), () => {
|
|
235
|
+
document.removeEventListener("pointerdown", y);
|
|
238
236
|
};
|
|
239
237
|
});
|
|
240
|
-
async function
|
|
238
|
+
async function M() {
|
|
241
239
|
try {
|
|
242
|
-
b
|
|
240
|
+
l(b, !0), (await navigator.mediaDevices.getUserMedia({ audio: !0 })).getTracks().forEach((g) => g.stop()), l(d, await navigator.mediaDevices.enumerateDevices(), !0), l(
|
|
243
241
|
d,
|
|
244
|
-
|
|
245
|
-
deviceId:
|
|
246
|
-
label:
|
|
242
|
+
e(d).filter((g) => g.deviceId).filter((g) => g.kind === "audioinput").map((g, c) => ({
|
|
243
|
+
deviceId: g.deviceId,
|
|
244
|
+
label: g.label || `Microphone ${c + 1}`
|
|
247
245
|
})),
|
|
248
246
|
!0
|
|
249
|
-
), !
|
|
250
|
-
} catch (
|
|
251
|
-
console.error("Error accessing microphones:",
|
|
247
|
+
), !n() && e(d).length && n(e(d)[0].deviceId), e(d).sort((g, c) => g.label.localeCompare(c.label)), l(b, !1);
|
|
248
|
+
} catch (y) {
|
|
249
|
+
console.error("Error accessing microphones:", y);
|
|
252
250
|
}
|
|
253
251
|
}
|
|
254
|
-
function
|
|
252
|
+
function h(y) {
|
|
255
253
|
return () => {
|
|
256
|
-
|
|
254
|
+
n(y), l(t, !1);
|
|
257
255
|
};
|
|
258
256
|
}
|
|
259
|
-
var
|
|
257
|
+
var $ = {
|
|
260
258
|
get deviceId() {
|
|
261
|
-
return
|
|
259
|
+
return n();
|
|
262
260
|
},
|
|
263
|
-
set deviceId(
|
|
264
|
-
|
|
261
|
+
set deviceId(y = "") {
|
|
262
|
+
n(y), T();
|
|
265
263
|
},
|
|
266
264
|
get disabled() {
|
|
267
|
-
return
|
|
265
|
+
return p();
|
|
268
266
|
},
|
|
269
|
-
set disabled(
|
|
270
|
-
|
|
267
|
+
set disabled(y = !1) {
|
|
268
|
+
p(y), T();
|
|
271
269
|
}
|
|
272
|
-
},
|
|
273
|
-
|
|
274
|
-
var
|
|
270
|
+
}, k = ar(), x = I(k);
|
|
271
|
+
x.__click = [Ze, t, d, M];
|
|
272
|
+
var N = U(x, 2);
|
|
275
273
|
{
|
|
276
|
-
var
|
|
277
|
-
var
|
|
278
|
-
|
|
279
|
-
var
|
|
280
|
-
|
|
281
|
-
|
|
274
|
+
var F = (y) => {
|
|
275
|
+
var g = or(), c = I(g);
|
|
276
|
+
ze(c, 17, () => e(d), Me, (_, C) => {
|
|
277
|
+
var r = er(), o = I(r), v = H(() => h(e(C).deviceId));
|
|
278
|
+
o.__click = function(...f) {
|
|
279
|
+
e(v)?.apply(this, f);
|
|
282
280
|
};
|
|
283
|
-
var
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
281
|
+
var a = I(o, !0);
|
|
282
|
+
z(o), z(r), O(() => {
|
|
283
|
+
te(
|
|
284
|
+
o,
|
|
287
285
|
1,
|
|
288
|
-
|
|
286
|
+
ce([
|
|
289
287
|
"devices-select__option",
|
|
290
|
-
|
|
288
|
+
e(C).deviceId === n() && "devices-select__option--is-selected"
|
|
291
289
|
]),
|
|
292
290
|
"svelte-q87ygv"
|
|
293
|
-
),
|
|
294
|
-
}),
|
|
291
|
+
), o.disabled = p(), ve(a, e(C).label);
|
|
292
|
+
}), i(_, r);
|
|
295
293
|
});
|
|
296
|
-
var
|
|
294
|
+
var q = U(c, 2);
|
|
297
295
|
{
|
|
298
|
-
var
|
|
299
|
-
var
|
|
300
|
-
|
|
296
|
+
var A = (_) => {
|
|
297
|
+
var C = rr();
|
|
298
|
+
i(_, C);
|
|
301
299
|
};
|
|
302
|
-
|
|
303
|
-
!
|
|
300
|
+
j(q, (_) => {
|
|
301
|
+
!e(d).length && !e(b) && _(A);
|
|
304
302
|
});
|
|
305
303
|
}
|
|
306
|
-
var
|
|
304
|
+
var S = U(q, 2);
|
|
307
305
|
{
|
|
308
|
-
var
|
|
309
|
-
var
|
|
310
|
-
|
|
306
|
+
var w = (_) => {
|
|
307
|
+
var C = tr();
|
|
308
|
+
i(_, C);
|
|
311
309
|
};
|
|
312
|
-
|
|
313
|
-
|
|
310
|
+
j(S, (_) => {
|
|
311
|
+
e(b) && _(w);
|
|
314
312
|
});
|
|
315
313
|
}
|
|
316
|
-
|
|
314
|
+
z(g), O(() => te(g, 1, `devices-select ${e(t) ? "devices-select--is-open" : ""}`, "svelte-q87ygv")), he(3, g, () => Fe, () => ({ duration: 100 })), i(y, g);
|
|
317
315
|
};
|
|
318
|
-
|
|
319
|
-
t
|
|
316
|
+
j(N, (y) => {
|
|
317
|
+
e(t) && y(F);
|
|
320
318
|
});
|
|
321
319
|
}
|
|
322
|
-
return
|
|
320
|
+
return z(k), we(k, (y) => u = y, () => u), O(() => V(x, "aria-expanded", e(t))), i(L, k), ie($);
|
|
323
321
|
}
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
var
|
|
327
|
-
const
|
|
322
|
+
xe(["click"]);
|
|
323
|
+
ae(Re, { deviceId: {}, disabled: {} }, [], [], !0);
|
|
324
|
+
var nr = R("<button><!></button>");
|
|
325
|
+
const ir = {
|
|
328
326
|
hash: "svelte-f3ispq",
|
|
329
327
|
code: ".btn.svelte-f3ispq {display:flex;align-items:center;gap:var(--fortyfour-recorder-btn-gap);font:inherit;border:none;padding:var(--fortyfour-recorder-btn-padding);border-radius:var(--fortyfour-recorder-btn-radius);background:var(--fortyfour-recorder-btn-bg);color:var(--fortyfour-recorder-btn-color);cursor:pointer;}.btn.svelte-f3ispq:hover {background:var(--fortyfour-recorder-btn-bg-hover);color:var(--fortyfour-recorder-btn-color-hover);}.btn.btn--recording.svelte-f3ispq {background:var(--fortyfour-recorder-red-bg);color:var(--fortyfour-recorder-red-color);}.btn.btn--primary.svelte-f3ispq {background:var(--fortyfour-recorder-btn-primary-bg);color:var(--fortyfour-recorder-btn-primary-color);}.btn.btn--primary.svelte-f3ispq:hover {background:var(--fortyfour-recorder-btn-primary-bg-hover);color:var(--fortyfour-recorder-btn-primary-color-hover);}"
|
|
330
328
|
};
|
|
331
|
-
function
|
|
332
|
-
|
|
333
|
-
const
|
|
329
|
+
function de(L, s) {
|
|
330
|
+
se(s, !0), ne(L, ir);
|
|
331
|
+
const n = P(s, "type", 7), p = P(s, "onclick", 7, () => {
|
|
334
332
|
});
|
|
335
333
|
var d = {
|
|
336
334
|
get type() {
|
|
337
|
-
return
|
|
335
|
+
return n();
|
|
338
336
|
},
|
|
339
|
-
set type(
|
|
340
|
-
|
|
337
|
+
set type(u) {
|
|
338
|
+
n(u), T();
|
|
341
339
|
},
|
|
342
340
|
get onclick() {
|
|
343
|
-
return
|
|
341
|
+
return p();
|
|
344
342
|
},
|
|
345
|
-
set onclick(
|
|
343
|
+
set onclick(u = () => {
|
|
346
344
|
}) {
|
|
347
|
-
|
|
345
|
+
p(u), T();
|
|
348
346
|
}
|
|
349
|
-
},
|
|
350
|
-
|
|
351
|
-
|
|
347
|
+
}, t = nr();
|
|
348
|
+
t.__click = function(...u) {
|
|
349
|
+
p()?.apply(this, u);
|
|
352
350
|
};
|
|
353
|
-
var
|
|
354
|
-
return
|
|
351
|
+
var b = I(t);
|
|
352
|
+
return He(b, s, "default", {}, null), z(t), O(() => te(t, 1, ce(["btn", n() && `btn--${n()}`]), "svelte-f3ispq")), i(L, t), ie(d);
|
|
355
353
|
}
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
var
|
|
359
|
-
const
|
|
354
|
+
xe(["click"]);
|
|
355
|
+
ae(de, { type: {}, onclick: {} }, ["default"], [], !0);
|
|
356
|
+
var lr = R("<div></div> <!>", 1), dr = R('<div class="recording-info svelte-fc16qh"><div class="live-waveform svelte-fc16qh"><!></div> <div class="time-elapsed svelte-fc16qh"> </div></div>'), cr = R('<div role="group" aria-label="Audio recorder"><!> <!> <!></div>');
|
|
357
|
+
const vr = {
|
|
360
358
|
hash: "svelte-fc16qh",
|
|
361
359
|
code: `.container.svelte-fc16qh {display:flex;align-items:center;gap:1rem;min-height:56px;}.record-icon.svelte-fc16qh {width:1.25rem;height:1.25rem;background:var(--fortyfour-recorder-red-bg);border-radius:50%;}.record-icon--is-recording.svelte-fc16qh {background:var(--fortyfour-recorder-red-color);
|
|
362
360
|
animation: svelte-fc16qh-pulse 2s infinite ease-out;}.recording-info.svelte-fc16qh {display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0;}.live-waveform.svelte-fc16qh {flex:1;min-width:0;}.time-elapsed.svelte-fc16qh {font-variant-numeric:tabular-nums;flex-shrink:0;}
|
|
@@ -375,381 +373,381 @@ const Le = {
|
|
|
375
373
|
}
|
|
376
374
|
}`
|
|
377
375
|
};
|
|
378
|
-
function
|
|
379
|
-
|
|
380
|
-
let
|
|
376
|
+
function Ae(L, s) {
|
|
377
|
+
se(s, !0), ne(L, vr);
|
|
378
|
+
let n = P(s, "deviceId", 15, ""), p = P(s, "onDone", 7);
|
|
381
379
|
const d = 100;
|
|
382
|
-
let
|
|
380
|
+
let t = D(Se({
|
|
383
381
|
state: "ready",
|
|
384
382
|
// "ready", "recording"
|
|
385
383
|
timeElapsed: 0,
|
|
386
384
|
error: null,
|
|
387
385
|
waveformSamples: []
|
|
388
|
-
})),
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
}),
|
|
392
|
-
function
|
|
393
|
-
document.hidden && t
|
|
386
|
+
})), b, u;
|
|
387
|
+
Ne(() => {
|
|
388
|
+
b?.stop();
|
|
389
|
+
}), _e(() => {
|
|
390
|
+
function c() {
|
|
391
|
+
document.hidden && e(t).state === "recording" && $();
|
|
394
392
|
}
|
|
395
|
-
return document.addEventListener("visibilitychange",
|
|
396
|
-
document.removeEventListener("visibilitychange",
|
|
393
|
+
return document.addEventListener("visibilitychange", c), () => {
|
|
394
|
+
document.removeEventListener("visibilitychange", c);
|
|
397
395
|
};
|
|
398
396
|
});
|
|
399
|
-
function
|
|
400
|
-
t
|
|
397
|
+
function M() {
|
|
398
|
+
e(t).state === "ready" ? h() : e(t).state === "recording" && $();
|
|
401
399
|
}
|
|
402
|
-
async function
|
|
403
|
-
const
|
|
400
|
+
async function h() {
|
|
401
|
+
const c = await navigator.mediaDevices.getUserMedia({
|
|
404
402
|
audio: {
|
|
405
|
-
deviceId:
|
|
403
|
+
deviceId: n() ? { exact: n() } : void 0,
|
|
406
404
|
autoGainControl: !0,
|
|
407
405
|
noiseSuppression: !0
|
|
408
406
|
}
|
|
409
|
-
}),
|
|
410
|
-
|
|
411
|
-
const
|
|
412
|
-
|
|
413
|
-
const
|
|
414
|
-
let
|
|
415
|
-
function
|
|
416
|
-
if (t
|
|
417
|
-
|
|
418
|
-
let
|
|
419
|
-
for (let
|
|
420
|
-
const
|
|
421
|
-
|
|
407
|
+
}), q = [];
|
|
408
|
+
b = new MediaRecorder(c), b.ondataavailable = (o) => q.push(o.data), u = new AudioContext();
|
|
409
|
+
const A = u.createAnalyser();
|
|
410
|
+
A.fftSize = 256, u.createMediaStreamSource(c).connect(A);
|
|
411
|
+
const w = new Uint8Array(A.frequencyBinCount);
|
|
412
|
+
let _ = 0;
|
|
413
|
+
function C(o) {
|
|
414
|
+
if (e(t).state !== "recording") return;
|
|
415
|
+
A.getByteTimeDomainData(w);
|
|
416
|
+
let v = 0;
|
|
417
|
+
for (let m = 0; m < w.length; m++) {
|
|
418
|
+
const E = (w[m] - 128) / 128;
|
|
419
|
+
v += E * E;
|
|
422
420
|
}
|
|
423
|
-
const
|
|
424
|
-
|
|
421
|
+
const a = Math.sqrt(v / w.length), f = Math.min(1, a * 4);
|
|
422
|
+
o - _ >= d && (e(t).waveformSamples = [...e(t).waveformSamples, Math.round(f * 100)], _ = o), requestAnimationFrame(C);
|
|
425
423
|
}
|
|
426
|
-
|
|
427
|
-
if (t
|
|
424
|
+
b.onstop = () => {
|
|
425
|
+
if (e(t).state !== "recording")
|
|
428
426
|
return;
|
|
429
|
-
|
|
430
|
-
const
|
|
431
|
-
t
|
|
432
|
-
url: URL.createObjectURL(new Blob(
|
|
433
|
-
waveform:
|
|
434
|
-
}), t
|
|
435
|
-
},
|
|
436
|
-
const
|
|
437
|
-
t
|
|
427
|
+
c.getTracks().forEach((v) => v.stop()), u?.close();
|
|
428
|
+
const o = e(t).waveformSamples;
|
|
429
|
+
e(t).waveformSamples = [], p()({
|
|
430
|
+
url: URL.createObjectURL(new Blob(q, { type: b.mimeType })),
|
|
431
|
+
waveform: o
|
|
432
|
+
}), e(t).state = "ready";
|
|
433
|
+
}, b.start();
|
|
434
|
+
const r = () => {
|
|
435
|
+
e(t).state === "recording" && (e(t).timeElapsed += 1, setTimeout(r, 1e3));
|
|
438
436
|
};
|
|
439
|
-
setTimeout(
|
|
437
|
+
setTimeout(r, 1e3), e(t).state = "recording", C();
|
|
440
438
|
}
|
|
441
|
-
function
|
|
442
|
-
|
|
439
|
+
function $() {
|
|
440
|
+
b?.stop();
|
|
443
441
|
}
|
|
444
|
-
var
|
|
442
|
+
var k = {
|
|
445
443
|
get deviceId() {
|
|
446
|
-
return
|
|
444
|
+
return n();
|
|
447
445
|
},
|
|
448
|
-
set deviceId(
|
|
449
|
-
|
|
446
|
+
set deviceId(c = "") {
|
|
447
|
+
n(c), T();
|
|
450
448
|
},
|
|
451
449
|
get onDone() {
|
|
452
|
-
return
|
|
450
|
+
return p();
|
|
453
451
|
},
|
|
454
|
-
set onDone(
|
|
455
|
-
|
|
452
|
+
set onDone(c) {
|
|
453
|
+
p(c), T();
|
|
456
454
|
}
|
|
457
|
-
},
|
|
455
|
+
}, x = cr(), N = I(x);
|
|
458
456
|
{
|
|
459
|
-
let
|
|
460
|
-
|
|
461
|
-
onclick:
|
|
457
|
+
let c = H(() => e(t).state === "recording" && "recording");
|
|
458
|
+
de(N, {
|
|
459
|
+
onclick: M,
|
|
462
460
|
get type() {
|
|
463
|
-
return
|
|
461
|
+
return e(c);
|
|
464
462
|
},
|
|
465
|
-
children: (
|
|
466
|
-
var
|
|
463
|
+
children: (q, A) => {
|
|
464
|
+
var S = lr(), w = Q(S), _ = U(w, 2);
|
|
467
465
|
{
|
|
468
|
-
var
|
|
469
|
-
var
|
|
470
|
-
|
|
471
|
-
},
|
|
472
|
-
var
|
|
466
|
+
var C = (o) => {
|
|
467
|
+
var v = oe("Record");
|
|
468
|
+
i(o, v);
|
|
469
|
+
}, r = (o) => {
|
|
470
|
+
var v = re(), a = Q(v);
|
|
473
471
|
{
|
|
474
|
-
var
|
|
475
|
-
var
|
|
476
|
-
m
|
|
472
|
+
var f = (m) => {
|
|
473
|
+
var E = oe("Recording");
|
|
474
|
+
i(m, E);
|
|
477
475
|
};
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
(
|
|
481
|
-
t
|
|
476
|
+
j(
|
|
477
|
+
a,
|
|
478
|
+
(m) => {
|
|
479
|
+
e(t).state === "recording" && m(f);
|
|
482
480
|
},
|
|
483
481
|
!0
|
|
484
482
|
);
|
|
485
483
|
}
|
|
486
|
-
|
|
484
|
+
i(o, v);
|
|
487
485
|
};
|
|
488
|
-
|
|
489
|
-
t
|
|
486
|
+
j(_, (o) => {
|
|
487
|
+
e(t).state === "ready" ? o(C) : o(r, !1);
|
|
490
488
|
});
|
|
491
489
|
}
|
|
492
|
-
|
|
493
|
-
|
|
490
|
+
O(() => te(
|
|
491
|
+
w,
|
|
494
492
|
1,
|
|
495
|
-
|
|
493
|
+
ce([
|
|
496
494
|
"record-icon",
|
|
497
|
-
t
|
|
495
|
+
e(t).state === "recording" && "record-icon--is-recording"
|
|
498
496
|
]),
|
|
499
497
|
"svelte-fc16qh"
|
|
500
|
-
)),
|
|
498
|
+
)), i(q, S);
|
|
501
499
|
},
|
|
502
500
|
$$slots: { default: !0 }
|
|
503
501
|
});
|
|
504
502
|
}
|
|
505
|
-
var
|
|
503
|
+
var F = U(N, 2);
|
|
506
504
|
{
|
|
507
|
-
let
|
|
508
|
-
|
|
505
|
+
let c = H(() => e(t).state === "recording");
|
|
506
|
+
Re(F, {
|
|
509
507
|
get disabled() {
|
|
510
|
-
return
|
|
508
|
+
return e(c);
|
|
511
509
|
},
|
|
512
510
|
get deviceId() {
|
|
513
|
-
return
|
|
511
|
+
return n();
|
|
514
512
|
},
|
|
515
|
-
set deviceId(
|
|
516
|
-
|
|
513
|
+
set deviceId(q) {
|
|
514
|
+
n(q);
|
|
517
515
|
}
|
|
518
516
|
});
|
|
519
517
|
}
|
|
520
|
-
var
|
|
518
|
+
var y = U(F, 2);
|
|
521
519
|
{
|
|
522
|
-
var
|
|
523
|
-
var
|
|
524
|
-
|
|
520
|
+
var g = (c) => {
|
|
521
|
+
var q = dr(), A = I(q), S = I(A);
|
|
522
|
+
Le(S, {
|
|
525
523
|
get data() {
|
|
526
|
-
return t
|
|
524
|
+
return e(t).waveformSamples;
|
|
527
525
|
}
|
|
528
|
-
}),
|
|
529
|
-
var
|
|
530
|
-
|
|
531
|
-
() => Math.floor(t
|
|
532
|
-
() => (t
|
|
533
|
-
]),
|
|
526
|
+
}), z(A);
|
|
527
|
+
var w = U(A, 2), _ = I(w);
|
|
528
|
+
z(w), z(q), O((C, r) => ve(_, `${C ?? ""}:${r ?? ""}`), [
|
|
529
|
+
() => Math.floor(e(t).timeElapsed / 60).toString(),
|
|
530
|
+
() => (e(t).timeElapsed % 60).toString().padStart(2, "0")
|
|
531
|
+
]), i(c, q);
|
|
534
532
|
};
|
|
535
|
-
|
|
536
|
-
t
|
|
533
|
+
j(y, (c) => {
|
|
534
|
+
e(t).state === "recording" && c(g);
|
|
537
535
|
});
|
|
538
536
|
}
|
|
539
|
-
return
|
|
540
|
-
|
|
537
|
+
return z(x), O(() => te(
|
|
538
|
+
x,
|
|
541
539
|
1,
|
|
542
|
-
|
|
540
|
+
ce([
|
|
543
541
|
"container",
|
|
544
|
-
t
|
|
542
|
+
e(t).state === "recording" && "is-recording"
|
|
545
543
|
]),
|
|
546
544
|
"svelte-fc16qh"
|
|
547
|
-
)),
|
|
545
|
+
)), i(L, x), ie(k);
|
|
548
546
|
}
|
|
549
|
-
|
|
550
|
-
var
|
|
551
|
-
const
|
|
547
|
+
ae(Ae, { deviceId: {}, onDone: {} }, [], [], !0);
|
|
548
|
+
var fr = R('<p class="status-message svelte-14spe77">Recording saved successfully!</p>'), ur = R('<p class="status-message svelte-14spe77">Uploading...</p>'), gr = R('<p class="status-message svelte-14spe77">Processing...</p>'), pr = R('<div class="error svelte-14spe77"><p class="svelte-14spe77"> </p> <!></div>'), yr = ue('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="fill: currentColor; width: 1em; height: 1em;"><path d="M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z"></path></svg>'), mr = R('<div class="confirm svelte-14spe77"><!> <div class="confirm-actions svelte-14spe77"><!> <!></div></div>'), br = R('<div class="row"><!></div>'), hr = R('<div class="recorder svelte-14spe77" role="group" aria-label="44 audio recorder"><!></div>');
|
|
549
|
+
const _r = {
|
|
552
550
|
hash: "svelte-14spe77",
|
|
553
551
|
code: `:host {--fortyfour-recorder-bg-0: #2d2d2d;--fortyfour-recorder-bg-1: #393939;--fortyfour-recorder-bg-2: #515151;--fortyfour-recorder-bg-primary: hsla(210, 50%, 60%, 1);--fortyfour-recorder-bg-primary-light: hsla(210, 55%, 64%, 1);--fortyfour-recorder-color-0: #d3d0c8;--fortyfour-recorder-color-primary: hsla(0, 0%, 100%, 0.9);--fortyfour-recorder-red-bg: #f2777a;--fortyfour-recorder-red-color: #ffffff;--fortyfour-recorder-font-size-lg: 1.25rem;--fortyfour-recorder-font-size-md: 1rem;--fortyfour-recorder-font-size-sm: 0.875rem;--fortyfour-recorder-font-size-xs: 0.6825rem;--fortyfour-recorder-radius-xl: 3rem;--fortyfour-recorder-radius-lg: 1rem;--fortyfour-recorder-radius-md: 0.5rem;--fortyfour-recorder-spacing-md: 1rem;--fortyfour-recorder-spacing-sm-1: 0.85rem;--fortyfour-recorder-spacing-sm: 0.5rem;--fortyfour-recorder-radius: var(--fortyfour-recorder-radius-lg);--fortyfour-recorder-bg: var(--fortyfour-recorder-bg-0);--fortyfour-recorder-color: var(--fortyfour-recorder-color-0);--fortyfour-recorder-btn-radius: var(--fortyfour-recorder-radius-xl);--fortyfour-recorder-btn-padding: var(--fortyfour-recorder-spacing-sm)
|
|
554
552
|
var(--fortyfour-recorder-spacing-sm-1);--fortyfour-recorder-btn-gap: var(--fortyfour-recorder-spacing-sm);--fortyfour-recorder-btn-bg: var(--fortyfour-recorder-bg-1);--fortyfour-recorder-btn-bg-hover: var(--fortyfour-recorder-bg-2);--fortyfour-recorder-btn-color: var(--fortyfour-recorder-color-0);--fortyfour-recorder-btn-color-hover: var(--fortyfour-recorder-color-0);--fortyfour-recorder-btn-primary-bg: var(--fortyfour-recorder-bg-primary);--fortyfour-recorder-btn-primary-bg-hover: var(--fortyfour-recorder-bg-primary-light);--fortyfour-recorder-btn-primary-color: var(--fortyfour-recorder-color-primary);--fortyfour-recorder-btn-primary-color-hover: var(--fortyfour-recorder-color-primary);--fortyfour-recorder-select-bg: var(--fortyfour-recorder-bg-0);--fortyfour-recorder-select-bg-hover: var(--fortyfour-recorder-bg-1);--fortyfour-recorder-select-border: 1px solid var(--fortyfour-recorder-bg-1);--fortyfour-recorder-select-radius: var(--fortyfour-recorder-radius-md);--fortyfour-recorder-select-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.1);--fortyfour-recorder-select-color: var(--fortyfour-recorder-color-0);--fortyfour-recorder-select-font-size: var(--fortyfour-recorder-font-size-xs);}.recorder.svelte-14spe77 {padding:var(--fortyfour-recorder-spacing-md);border-radius:var(--fortyfour-recorder-radius);background:var(--fortyfour-recorder-bg);color:var(--fortyfour-recorder-color);}.confirm.svelte-14spe77 {display:flex;align-items:center;gap:var(--fortyfour-recorder-spacing-sm);}.confirm-actions.svelte-14spe77 {display:flex;gap:var(--fortyfour-recorder-spacing-sm);flex-shrink:0;}.error.svelte-14spe77 {display:flex;flex-direction:column;gap:var(--fortyfour-recorder-spacing-sm);}.error.svelte-14spe77 p:where(.svelte-14spe77) {color:var(--fortyfour-recorder-red-bg);margin:0;}.status-message.svelte-14spe77 {margin:0;text-align:center;}`
|
|
555
553
|
};
|
|
556
|
-
function
|
|
557
|
-
|
|
558
|
-
const
|
|
559
|
-
let
|
|
560
|
-
const
|
|
561
|
-
let
|
|
554
|
+
function wr(L, s) {
|
|
555
|
+
se(s, !0), ne(L, _r);
|
|
556
|
+
const n = s.$$host;
|
|
557
|
+
let p = P(s, "sessionId", 7), d = P(s, "labels", 7, ""), t = P(s, "apiHost", 7, "api.44.audio");
|
|
558
|
+
const b = H(() => d() ? d().split(",").map((r) => r.trim()).filter(Boolean) : []), u = 2e3, M = 30;
|
|
559
|
+
let h = D(
|
|
562
560
|
"ready"
|
|
563
561
|
// "ready", "recording", "confirm", "uploading", "processing", "done", "error"
|
|
564
|
-
),
|
|
565
|
-
async function
|
|
566
|
-
if (!(
|
|
567
|
-
|
|
562
|
+
), $ = D(null), k = D(null), x = D(null), N = D(""), F = D(null);
|
|
563
|
+
async function y() {
|
|
564
|
+
if (!(e(h) !== "confirm" || !e(k))) {
|
|
565
|
+
l(h, "uploading");
|
|
568
566
|
try {
|
|
569
|
-
const
|
|
570
|
-
if (!
|
|
567
|
+
const r = await fetch(e(k));
|
|
568
|
+
if (!r.ok)
|
|
571
569
|
throw new Error("Failed to load audio data");
|
|
572
|
-
const
|
|
573
|
-
|
|
574
|
-
const
|
|
575
|
-
if (!
|
|
576
|
-
throw new Error(`Upload failed: ${
|
|
577
|
-
const
|
|
578
|
-
|
|
579
|
-
let
|
|
580
|
-
for (; !
|
|
581
|
-
await new Promise((
|
|
582
|
-
if (!
|
|
583
|
-
|
|
570
|
+
const o = await r.blob(), v = new File([o], "recording.audio", { type: o.type }), a = new FormData();
|
|
571
|
+
a.append("sessionId", p()), e(b).forEach((B) => a.append("labels", B)), a.append("audioFile", v), e(x) && a.append("waveform", JSON.stringify(e(x)));
|
|
572
|
+
const f = await fetch(`https://${t()}/v1/recordings`, { method: "POST", body: a });
|
|
573
|
+
if (!f.ok)
|
|
574
|
+
throw new Error(`Upload failed: ${f.status}`);
|
|
575
|
+
const m = await f.json();
|
|
576
|
+
l($, m.recordingId, !0), l(h, "processing");
|
|
577
|
+
let E = !1, G = 0;
|
|
578
|
+
for (; !E && G < M; )
|
|
579
|
+
await new Promise((B) => setTimeout(B, u)), E = await c(e($)), G++;
|
|
580
|
+
if (!E) {
|
|
581
|
+
l(F, "Recording processing timeout. Please try again."), l(h, "error");
|
|
584
582
|
return;
|
|
585
583
|
}
|
|
586
|
-
|
|
587
|
-
} catch (
|
|
588
|
-
console.error("Error saving recording:",
|
|
584
|
+
n.dispatchEvent(new CustomEvent("recording-complete", { detail: { recordingId: e($) } })), l(h, "done");
|
|
585
|
+
} catch (r) {
|
|
586
|
+
console.error("Error saving recording:", r), l(F, r.message || "Failed to save recording", !0), l(h, "error");
|
|
589
587
|
}
|
|
590
588
|
}
|
|
591
589
|
}
|
|
592
|
-
function
|
|
593
|
-
|
|
590
|
+
function g() {
|
|
591
|
+
l(k, null), l(x, null), l(h, "ready");
|
|
594
592
|
}
|
|
595
|
-
async function
|
|
593
|
+
async function c(r) {
|
|
596
594
|
try {
|
|
597
|
-
const
|
|
598
|
-
if (!
|
|
595
|
+
const o = await fetch(`https://${t()}/v1/recordings/${r}/status`);
|
|
596
|
+
if (!o.ok)
|
|
599
597
|
throw new Error("Failed to fetch data");
|
|
600
|
-
return (await
|
|
601
|
-
} catch (
|
|
602
|
-
return console.error(
|
|
598
|
+
return (await o.json()).status === "ready";
|
|
599
|
+
} catch (o) {
|
|
600
|
+
return console.error(o), !1;
|
|
603
601
|
}
|
|
604
602
|
}
|
|
605
|
-
function
|
|
606
|
-
|
|
603
|
+
function q(r) {
|
|
604
|
+
l(k, r.url, !0), l(x, r.waveform, !0), l(h, "confirm");
|
|
607
605
|
}
|
|
608
|
-
var
|
|
606
|
+
var A = {
|
|
609
607
|
get sessionId() {
|
|
610
|
-
return
|
|
608
|
+
return p();
|
|
611
609
|
},
|
|
612
|
-
set sessionId(
|
|
613
|
-
|
|
610
|
+
set sessionId(r) {
|
|
611
|
+
p(r), T();
|
|
614
612
|
},
|
|
615
613
|
get labels() {
|
|
616
614
|
return d();
|
|
617
615
|
},
|
|
618
|
-
set labels(
|
|
619
|
-
d(
|
|
616
|
+
set labels(r = "") {
|
|
617
|
+
d(r), T();
|
|
620
618
|
},
|
|
621
619
|
get apiHost() {
|
|
622
|
-
return
|
|
620
|
+
return t();
|
|
623
621
|
},
|
|
624
|
-
set apiHost(
|
|
625
|
-
|
|
622
|
+
set apiHost(r = "api.44.audio") {
|
|
623
|
+
t(r), T();
|
|
626
624
|
}
|
|
627
|
-
},
|
|
625
|
+
}, S = hr(), w = I(S);
|
|
628
626
|
{
|
|
629
|
-
var
|
|
630
|
-
var
|
|
631
|
-
|
|
632
|
-
},
|
|
633
|
-
var
|
|
627
|
+
var _ = (r) => {
|
|
628
|
+
var o = fr();
|
|
629
|
+
i(r, o);
|
|
630
|
+
}, C = (r) => {
|
|
631
|
+
var o = re(), v = Q(o);
|
|
634
632
|
{
|
|
635
|
-
var
|
|
636
|
-
var
|
|
637
|
-
m
|
|
638
|
-
},
|
|
639
|
-
var
|
|
633
|
+
var a = (m) => {
|
|
634
|
+
var E = ur();
|
|
635
|
+
i(m, E);
|
|
636
|
+
}, f = (m) => {
|
|
637
|
+
var E = re(), G = Q(E);
|
|
640
638
|
{
|
|
641
|
-
var
|
|
642
|
-
var
|
|
643
|
-
|
|
644
|
-
},
|
|
645
|
-
var
|
|
639
|
+
var B = (J) => {
|
|
640
|
+
var K = gr();
|
|
641
|
+
i(J, K);
|
|
642
|
+
}, ge = (J) => {
|
|
643
|
+
var K = re(), Pe = Q(K);
|
|
646
644
|
{
|
|
647
|
-
var
|
|
648
|
-
var
|
|
649
|
-
|
|
650
|
-
var
|
|
651
|
-
|
|
652
|
-
onclick: () =>
|
|
653
|
-
children: (
|
|
654
|
-
|
|
655
|
-
var
|
|
656
|
-
|
|
645
|
+
var Te = (Y) => {
|
|
646
|
+
var Z = pr(), le = I(Z), pe = I(le);
|
|
647
|
+
z(le);
|
|
648
|
+
var ye = U(le, 2);
|
|
649
|
+
de(ye, {
|
|
650
|
+
onclick: () => l(h, "confirm"),
|
|
651
|
+
children: (X, W) => {
|
|
652
|
+
Ce();
|
|
653
|
+
var ee = oe("Try Again");
|
|
654
|
+
i(X, ee);
|
|
657
655
|
},
|
|
658
656
|
$$slots: { default: !0 }
|
|
659
|
-
}),
|
|
660
|
-
},
|
|
661
|
-
var
|
|
657
|
+
}), z(Z), O(() => ve(pe, `Error: ${e(F) ?? ""}`)), i(Y, Z);
|
|
658
|
+
}, De = (Y) => {
|
|
659
|
+
var Z = re(), le = Q(Z);
|
|
662
660
|
{
|
|
663
|
-
var
|
|
664
|
-
var
|
|
665
|
-
|
|
661
|
+
var pe = (X) => {
|
|
662
|
+
var W = mr(), ee = I(W);
|
|
663
|
+
Ee(ee, {
|
|
666
664
|
get audioURL() {
|
|
667
|
-
return
|
|
665
|
+
return e(k);
|
|
668
666
|
},
|
|
669
667
|
get waveform() {
|
|
670
|
-
return
|
|
668
|
+
return e(x);
|
|
671
669
|
}
|
|
672
670
|
});
|
|
673
|
-
var
|
|
674
|
-
|
|
675
|
-
onclick:
|
|
676
|
-
children: (
|
|
677
|
-
var
|
|
678
|
-
|
|
671
|
+
var fe = U(ee, 2), ke = I(fe);
|
|
672
|
+
de(ke, {
|
|
673
|
+
onclick: g,
|
|
674
|
+
children: (me, je) => {
|
|
675
|
+
var be = yr();
|
|
676
|
+
i(me, be);
|
|
679
677
|
},
|
|
680
678
|
$$slots: { default: !0 }
|
|
681
679
|
});
|
|
682
|
-
var
|
|
683
|
-
|
|
680
|
+
var Be = U(ke, 2);
|
|
681
|
+
de(Be, {
|
|
684
682
|
type: "primary",
|
|
685
|
-
onclick:
|
|
686
|
-
children: (
|
|
687
|
-
|
|
688
|
-
var
|
|
689
|
-
|
|
683
|
+
onclick: y,
|
|
684
|
+
children: (me, je) => {
|
|
685
|
+
Ce();
|
|
686
|
+
var be = oe("Save");
|
|
687
|
+
i(me, be);
|
|
690
688
|
},
|
|
691
689
|
$$slots: { default: !0 }
|
|
692
|
-
}),
|
|
693
|
-
},
|
|
694
|
-
var
|
|
695
|
-
|
|
696
|
-
onDone:
|
|
690
|
+
}), z(fe), z(W), he(1, W, () => Ie, () => ({ y: 20, duration: 700 })), i(X, W);
|
|
691
|
+
}, ye = (X) => {
|
|
692
|
+
var W = br(), ee = I(W);
|
|
693
|
+
Ae(ee, {
|
|
694
|
+
onDone: q,
|
|
697
695
|
get deviceId() {
|
|
698
|
-
return
|
|
696
|
+
return e(N);
|
|
699
697
|
},
|
|
700
|
-
set deviceId(
|
|
701
|
-
|
|
698
|
+
set deviceId(fe) {
|
|
699
|
+
l(N, fe, !0);
|
|
702
700
|
}
|
|
703
|
-
}),
|
|
701
|
+
}), z(W), he(1, W, () => Ie, () => ({ y: -20, duration: 700 })), i(X, W);
|
|
704
702
|
};
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
(
|
|
708
|
-
|
|
703
|
+
j(
|
|
704
|
+
le,
|
|
705
|
+
(X) => {
|
|
706
|
+
e(h) === "confirm" ? X(pe) : X(ye, !1);
|
|
709
707
|
},
|
|
710
708
|
!0
|
|
711
709
|
);
|
|
712
710
|
}
|
|
713
|
-
|
|
711
|
+
i(Y, Z);
|
|
714
712
|
};
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
(
|
|
718
|
-
|
|
713
|
+
j(
|
|
714
|
+
Pe,
|
|
715
|
+
(Y) => {
|
|
716
|
+
e(h) === "error" ? Y(Te) : Y(De, !1);
|
|
719
717
|
},
|
|
720
718
|
!0
|
|
721
719
|
);
|
|
722
720
|
}
|
|
723
|
-
|
|
721
|
+
i(J, K);
|
|
724
722
|
};
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
(
|
|
728
|
-
|
|
723
|
+
j(
|
|
724
|
+
G,
|
|
725
|
+
(J) => {
|
|
726
|
+
e(h) === "processing" ? J(B) : J(ge, !1);
|
|
729
727
|
},
|
|
730
728
|
!0
|
|
731
729
|
);
|
|
732
730
|
}
|
|
733
|
-
m
|
|
731
|
+
i(m, E);
|
|
734
732
|
};
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
(
|
|
738
|
-
|
|
733
|
+
j(
|
|
734
|
+
v,
|
|
735
|
+
(m) => {
|
|
736
|
+
e(h) === "uploading" ? m(a) : m(f, !1);
|
|
739
737
|
},
|
|
740
738
|
!0
|
|
741
739
|
);
|
|
742
740
|
}
|
|
743
|
-
|
|
741
|
+
i(r, o);
|
|
744
742
|
};
|
|
745
|
-
|
|
746
|
-
|
|
743
|
+
j(w, (r) => {
|
|
744
|
+
e(h) === "done" ? r(_) : r(C, !1);
|
|
747
745
|
});
|
|
748
746
|
}
|
|
749
|
-
return
|
|
747
|
+
return z(S), i(L, S), ie(A);
|
|
750
748
|
}
|
|
751
|
-
customElements.define("fortyfour-audio-recorder",
|
|
752
|
-
|
|
749
|
+
customElements.define("fortyfour-audio-recorder", ae(
|
|
750
|
+
wr,
|
|
753
751
|
{
|
|
754
752
|
apiHost: { attribute: "api-host" },
|
|
755
753
|
sessionId: { attribute: "session-id" },
|