react-audio-wavekit 0.1.6 → 0.1.7
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/index.d.ts +3 -3
- package/dist/recorder/live-streaming/recorder/recorder-compound.cjs +1 -1
- package/dist/recorder/live-streaming/recorder/recorder-compound.js +1 -1
- package/dist/waveform/util-audio-decoder.cjs +3 -6
- package/dist/waveform/util-audio-decoder.js +3 -6
- package/dist/waveform/waveform-renderer.cjs +3 -3
- package/dist/waveform/waveform-renderer.js +3 -3
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -36,8 +36,8 @@ declare interface AudioWaveformRef {
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
/**
|
|
39
|
-
*
|
|
40
|
-
* MediaRecorder
|
|
39
|
+
* Real-time audio frequency visualization component
|
|
40
|
+
* Analyzes MediaRecorder audio via Web Audio API and renders as bars
|
|
41
41
|
*/
|
|
42
42
|
export declare const LiveRecorder: ForwardRefExoticComponent<LiveRecorderProps & RefAttributes<LiveRecorderRef>>;
|
|
43
43
|
|
|
@@ -100,7 +100,7 @@ declare interface LiveStreamingRecorderCanvasProps extends HTMLAttributes<HTMLCa
|
|
|
100
100
|
className?: string;
|
|
101
101
|
/** Inline styles for canvas element */
|
|
102
102
|
style?: React.CSSProperties;
|
|
103
|
-
/** Waveform appearance configuration (barColor, barWidth, etc.) - scrollbar
|
|
103
|
+
/** Waveform appearance configuration (barColor, barWidth, etc.) - scrollbar settings only apply on Root */
|
|
104
104
|
appearance?: LiveStreamingRecorderAppearance;
|
|
105
105
|
}
|
|
106
106
|
|
|
@@ -30,7 +30,7 @@ const LiveStreamingRecorderRoot = react.forwardRef(
|
|
|
30
30
|
theme: themeClassName,
|
|
31
31
|
visibility: hidden ? "hidden" : "auto",
|
|
32
32
|
autoHide: "leave",
|
|
33
|
-
//
|
|
33
|
+
// Hide when mouse leaves (common UX pattern)
|
|
34
34
|
autoHideDelay: 400,
|
|
35
35
|
dragScroll: true,
|
|
36
36
|
clickScroll: true
|
|
@@ -28,7 +28,7 @@ const LiveStreamingRecorderRoot = forwardRef(
|
|
|
28
28
|
theme: themeClassName,
|
|
29
29
|
visibility: hidden ? "hidden" : "auto",
|
|
30
30
|
autoHide: "leave",
|
|
31
|
-
//
|
|
31
|
+
// Hide when mouse leaves (common UX pattern)
|
|
32
32
|
autoHideDelay: 400,
|
|
33
33
|
dragScroll: true,
|
|
34
34
|
clickScroll: true
|
|
@@ -6,15 +6,12 @@ async function decodeAudioBlob(blob, sampleCount) {
|
|
|
6
6
|
if (arrayBuffer.byteLength === 0) {
|
|
7
7
|
throw new Error("Audio blob is empty");
|
|
8
8
|
}
|
|
9
|
-
const offlineContext = new module$1.OfflineAudioContext({ length: 1, sampleRate: 44100 });
|
|
10
|
-
|
|
11
|
-
try {
|
|
12
|
-
audioBuffer = await offlineContext.decodeAudioData(arrayBuffer);
|
|
13
|
-
} catch {
|
|
9
|
+
const offlineContext = new module$1.OfflineAudioContext({ numberOfChannels: 1, length: 1, sampleRate: 44100 });
|
|
10
|
+
const audioBuffer = await offlineContext.decodeAudioData(arrayBuffer.slice(0)).catch(() => {
|
|
14
11
|
throw new Error(
|
|
15
12
|
`Unable to decode audio data (type: ${blob.type}, size: ${blob.size} bytes). This may be due to an unsupported audio format or corrupted data.`
|
|
16
13
|
);
|
|
17
|
-
}
|
|
14
|
+
});
|
|
18
15
|
const channelData = audioBuffer.getChannelData(0);
|
|
19
16
|
const blockSize = Math.floor(channelData.length / sampleCount);
|
|
20
17
|
const peaks = [];
|
|
@@ -4,15 +4,12 @@ async function decodeAudioBlob(blob, sampleCount) {
|
|
|
4
4
|
if (arrayBuffer.byteLength === 0) {
|
|
5
5
|
throw new Error("Audio blob is empty");
|
|
6
6
|
}
|
|
7
|
-
const offlineContext = new offlineAudioContextConstructor({ length: 1, sampleRate: 44100 });
|
|
8
|
-
|
|
9
|
-
try {
|
|
10
|
-
audioBuffer = await offlineContext.decodeAudioData(arrayBuffer);
|
|
11
|
-
} catch {
|
|
7
|
+
const offlineContext = new offlineAudioContextConstructor({ numberOfChannels: 1, length: 1, sampleRate: 44100 });
|
|
8
|
+
const audioBuffer = await offlineContext.decodeAudioData(arrayBuffer.slice(0)).catch(() => {
|
|
12
9
|
throw new Error(
|
|
13
10
|
`Unable to decode audio data (type: ${blob.type}, size: ${blob.size} bytes). This may be due to an unsupported audio format or corrupted data.`
|
|
14
11
|
);
|
|
15
|
-
}
|
|
12
|
+
});
|
|
16
13
|
const channelData = audioBuffer.getChannelData(0);
|
|
17
14
|
const blockSize = Math.floor(channelData.length / sampleCount);
|
|
18
15
|
const peaks = [];
|
|
@@ -120,9 +120,9 @@ const WaveformRenderer = react.forwardRef(function WaveformRenderer2({ peaks, ap
|
|
|
120
120
|
const mins = Math.floor(seconds / 60);
|
|
121
121
|
const secs = Math.floor(seconds % 60);
|
|
122
122
|
if (mins > 0) {
|
|
123
|
-
return `${mins}
|
|
123
|
+
return `${mins} min ${secs} sec`;
|
|
124
124
|
}
|
|
125
|
-
return `${secs}
|
|
125
|
+
return `${secs} sec`;
|
|
126
126
|
};
|
|
127
127
|
const isInteractive = !!onSeek && !!duration && duration > 0;
|
|
128
128
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -130,7 +130,7 @@ const WaveformRenderer = react.forwardRef(function WaveformRenderer2({ peaks, ap
|
|
|
130
130
|
{
|
|
131
131
|
ref: canvasRef,
|
|
132
132
|
role: isInteractive ? "slider" : "img",
|
|
133
|
-
"aria-label": isInteractive ? "
|
|
133
|
+
"aria-label": isInteractive ? "Audio seek" : "Audio waveform",
|
|
134
134
|
"aria-valuemin": isInteractive ? 0 : void 0,
|
|
135
135
|
"aria-valuemax": isInteractive ? Math.floor(duration) : void 0,
|
|
136
136
|
"aria-valuenow": isInteractive ? Math.floor(currentTime ?? 0) : void 0,
|
|
@@ -118,9 +118,9 @@ const WaveformRenderer = forwardRef(function WaveformRenderer2({ peaks, appearan
|
|
|
118
118
|
const mins = Math.floor(seconds / 60);
|
|
119
119
|
const secs = Math.floor(seconds % 60);
|
|
120
120
|
if (mins > 0) {
|
|
121
|
-
return `${mins}
|
|
121
|
+
return `${mins} min ${secs} sec`;
|
|
122
122
|
}
|
|
123
|
-
return `${secs}
|
|
123
|
+
return `${secs} sec`;
|
|
124
124
|
};
|
|
125
125
|
const isInteractive = !!onSeek && !!duration && duration > 0;
|
|
126
126
|
return /* @__PURE__ */ jsx(
|
|
@@ -128,7 +128,7 @@ const WaveformRenderer = forwardRef(function WaveformRenderer2({ peaks, appearan
|
|
|
128
128
|
{
|
|
129
129
|
ref: canvasRef,
|
|
130
130
|
role: isInteractive ? "slider" : "img",
|
|
131
|
-
"aria-label": isInteractive ? "
|
|
131
|
+
"aria-label": isInteractive ? "Audio seek" : "Audio waveform",
|
|
132
132
|
"aria-valuemin": isInteractive ? 0 : void 0,
|
|
133
133
|
"aria-valuemax": isInteractive ? Math.floor(duration) : void 0,
|
|
134
134
|
"aria-valuenow": isInteractive ? Math.floor(currentTime ?? 0) : void 0,
|