@waveform-playlist/recording 5.0.0-alpha.0
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/LICENSE.md +21 -0
- package/README.md +232 -0
- package/dist/index.d.mts +234 -0
- package/dist/index.d.ts +234 -0
- package/dist/index.js +756 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +709 -0
- package/dist/index.mjs.map +1 -0
- package/dist/worklet/recording-processor.worklet.js +64 -0
- package/dist/worklet/recording-processor.worklet.js.map +1 -0
- package/dist/worklet/recording-processor.worklet.mjs +62 -0
- package/dist/worklet/recording-processor.worklet.mjs.map +1 -0
- package/package.json +59 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Types for the recording package
|
|
5
|
+
*/
|
|
6
|
+
interface RecordingState {
|
|
7
|
+
isRecording: boolean;
|
|
8
|
+
isPaused: boolean;
|
|
9
|
+
duration: number;
|
|
10
|
+
sampleRate: number;
|
|
11
|
+
}
|
|
12
|
+
interface RecordingData {
|
|
13
|
+
buffer: AudioBuffer | null;
|
|
14
|
+
peaks: Int8Array | Int16Array;
|
|
15
|
+
duration: number;
|
|
16
|
+
}
|
|
17
|
+
interface MicrophoneDevice {
|
|
18
|
+
deviceId: string;
|
|
19
|
+
label: string;
|
|
20
|
+
groupId: string;
|
|
21
|
+
}
|
|
22
|
+
interface RecordingOptions {
|
|
23
|
+
/**
|
|
24
|
+
* Number of channels to record (1 = mono, 2 = stereo)
|
|
25
|
+
* Default: 1 (mono)
|
|
26
|
+
* Note: Sample rate is determined by the global AudioContext
|
|
27
|
+
*/
|
|
28
|
+
channelCount?: number;
|
|
29
|
+
/**
|
|
30
|
+
* Samples per pixel for peak generation
|
|
31
|
+
* Default: 1024
|
|
32
|
+
*/
|
|
33
|
+
samplesPerPixel?: number;
|
|
34
|
+
/**
|
|
35
|
+
* Specific device ID to use for recording
|
|
36
|
+
*/
|
|
37
|
+
deviceId?: string;
|
|
38
|
+
/**
|
|
39
|
+
* MediaTrackConstraints for audio recording
|
|
40
|
+
* Use this to customize echo cancellation, noise suppression, auto gain control, latency, etc.
|
|
41
|
+
* Default: Recording-optimized settings (all processing disabled, latency: 0 for low latency)
|
|
42
|
+
*/
|
|
43
|
+
audioConstraints?: MediaTrackConstraints;
|
|
44
|
+
}
|
|
45
|
+
interface UseRecordingReturn {
|
|
46
|
+
isRecording: boolean;
|
|
47
|
+
isPaused: boolean;
|
|
48
|
+
duration: number;
|
|
49
|
+
peaks: Int8Array | Int16Array;
|
|
50
|
+
audioBuffer: AudioBuffer | null;
|
|
51
|
+
level: number;
|
|
52
|
+
peakLevel: number;
|
|
53
|
+
startRecording: () => Promise<void>;
|
|
54
|
+
stopRecording: () => Promise<AudioBuffer | null>;
|
|
55
|
+
pauseRecording: () => void;
|
|
56
|
+
resumeRecording: () => void;
|
|
57
|
+
error: Error | null;
|
|
58
|
+
}
|
|
59
|
+
interface UseMicrophoneAccessReturn {
|
|
60
|
+
stream: MediaStream | null;
|
|
61
|
+
devices: MicrophoneDevice[];
|
|
62
|
+
hasPermission: boolean;
|
|
63
|
+
isLoading: boolean;
|
|
64
|
+
requestAccess: (deviceId?: string, audioConstraints?: MediaTrackConstraints) => Promise<void>;
|
|
65
|
+
stopStream: () => void;
|
|
66
|
+
error: Error | null;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Main recording hook using AudioWorklet
|
|
71
|
+
*/
|
|
72
|
+
|
|
73
|
+
declare function useRecording(stream: MediaStream | null, options?: RecordingOptions): UseRecordingReturn;
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Hook for managing microphone access and device enumeration
|
|
77
|
+
*/
|
|
78
|
+
|
|
79
|
+
declare function useMicrophoneAccess(): UseMicrophoneAccessReturn;
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Hook for monitoring microphone input levels
|
|
83
|
+
*
|
|
84
|
+
* Uses Tone.js Meter for real-time audio level monitoring.
|
|
85
|
+
*/
|
|
86
|
+
interface UseMicrophoneLevelOptions {
|
|
87
|
+
/**
|
|
88
|
+
* How often to update the level (in Hz)
|
|
89
|
+
* Default: 60 (60fps)
|
|
90
|
+
*/
|
|
91
|
+
updateRate?: number;
|
|
92
|
+
/**
|
|
93
|
+
* FFT size for the analyser
|
|
94
|
+
* Default: 256
|
|
95
|
+
*/
|
|
96
|
+
fftSize?: number;
|
|
97
|
+
/**
|
|
98
|
+
* Smoothing time constant (0-1)
|
|
99
|
+
* Higher values = smoother but slower response
|
|
100
|
+
* Default: 0.8
|
|
101
|
+
*/
|
|
102
|
+
smoothingTimeConstant?: number;
|
|
103
|
+
}
|
|
104
|
+
interface UseMicrophoneLevelReturn {
|
|
105
|
+
/**
|
|
106
|
+
* Current audio level (0-1)
|
|
107
|
+
* 0 = silence, 1 = maximum level
|
|
108
|
+
*/
|
|
109
|
+
level: number;
|
|
110
|
+
/**
|
|
111
|
+
* Peak level since last reset (0-1)
|
|
112
|
+
*/
|
|
113
|
+
peakLevel: number;
|
|
114
|
+
/**
|
|
115
|
+
* Reset the peak level
|
|
116
|
+
*/
|
|
117
|
+
resetPeak: () => void;
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Monitor microphone input levels in real-time
|
|
121
|
+
*
|
|
122
|
+
* @param stream - MediaStream from getUserMedia
|
|
123
|
+
* @param options - Configuration options
|
|
124
|
+
* @returns Object with current level and peak level
|
|
125
|
+
*
|
|
126
|
+
* @example
|
|
127
|
+
* ```typescript
|
|
128
|
+
* const { stream } = useMicrophoneAccess();
|
|
129
|
+
* const { level, peakLevel, resetPeak } = useMicrophoneLevel(stream);
|
|
130
|
+
*
|
|
131
|
+
* return <VUMeter level={level} peakLevel={peakLevel} />;
|
|
132
|
+
* ```
|
|
133
|
+
*/
|
|
134
|
+
declare function useMicrophoneLevel(stream: MediaStream | null, options?: UseMicrophoneLevelOptions): UseMicrophoneLevelReturn;
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* RecordButton - Control button for starting/stopping recording
|
|
138
|
+
*/
|
|
139
|
+
|
|
140
|
+
interface RecordButtonProps {
|
|
141
|
+
isRecording: boolean;
|
|
142
|
+
onClick: () => void;
|
|
143
|
+
disabled?: boolean;
|
|
144
|
+
className?: string;
|
|
145
|
+
}
|
|
146
|
+
declare const RecordButton: React.FC<RecordButtonProps>;
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* MicrophoneSelector - Dropdown for selecting microphone input device
|
|
150
|
+
*/
|
|
151
|
+
|
|
152
|
+
interface MicrophoneSelectorProps {
|
|
153
|
+
devices: MicrophoneDevice[];
|
|
154
|
+
selectedDeviceId?: string;
|
|
155
|
+
onDeviceChange: (deviceId: string) => void;
|
|
156
|
+
disabled?: boolean;
|
|
157
|
+
className?: string;
|
|
158
|
+
}
|
|
159
|
+
declare const MicrophoneSelector: React.FC<MicrophoneSelectorProps>;
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* RecordingIndicator - Shows recording status, duration, and visual indicator
|
|
163
|
+
*/
|
|
164
|
+
|
|
165
|
+
interface RecordingIndicatorProps {
|
|
166
|
+
isRecording: boolean;
|
|
167
|
+
isPaused?: boolean;
|
|
168
|
+
duration: number;
|
|
169
|
+
formatTime?: (seconds: number) => string;
|
|
170
|
+
className?: string;
|
|
171
|
+
}
|
|
172
|
+
declare const RecordingIndicator: React.FC<RecordingIndicatorProps>;
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* VU Meter Component
|
|
176
|
+
*
|
|
177
|
+
* Displays real-time audio input levels with color-coded zones
|
|
178
|
+
* and peak indicator.
|
|
179
|
+
*/
|
|
180
|
+
|
|
181
|
+
interface VUMeterProps {
|
|
182
|
+
/**
|
|
183
|
+
* Current audio level (0-1)
|
|
184
|
+
*/
|
|
185
|
+
level: number;
|
|
186
|
+
/**
|
|
187
|
+
* Peak level (0-1)
|
|
188
|
+
* Optional - if provided, shows peak indicator
|
|
189
|
+
*/
|
|
190
|
+
peakLevel?: number;
|
|
191
|
+
/**
|
|
192
|
+
* Width of the meter in pixels
|
|
193
|
+
* Default: 200
|
|
194
|
+
*/
|
|
195
|
+
width?: number;
|
|
196
|
+
/**
|
|
197
|
+
* Height of the meter in pixels
|
|
198
|
+
* Default: 20
|
|
199
|
+
*/
|
|
200
|
+
height?: number;
|
|
201
|
+
/**
|
|
202
|
+
* Additional CSS class name
|
|
203
|
+
*/
|
|
204
|
+
className?: string;
|
|
205
|
+
}
|
|
206
|
+
declare const VUMeter: React.NamedExoticComponent<VUMeterProps>;
|
|
207
|
+
|
|
208
|
+
/**
|
|
209
|
+
* Peak generation for real-time waveform visualization during recording
|
|
210
|
+
* Matches the format used by webaudio-peaks: min/max pairs with bit depth
|
|
211
|
+
*/
|
|
212
|
+
/**
|
|
213
|
+
* Generate peaks from audio samples in standard min/max pair format
|
|
214
|
+
*
|
|
215
|
+
* @param samples - Audio samples to process
|
|
216
|
+
* @param samplesPerPixel - Number of samples to represent in each peak
|
|
217
|
+
* @param bits - Bit depth for peak values (8 or 16)
|
|
218
|
+
* @returns Int8Array or Int16Array of peak values (min/max pairs)
|
|
219
|
+
*/
|
|
220
|
+
declare function generatePeaks(samples: Float32Array, samplesPerPixel: number, bits?: 8 | 16): Int8Array | Int16Array;
|
|
221
|
+
|
|
222
|
+
/**
|
|
223
|
+
* Utility functions for working with AudioBuffers during recording
|
|
224
|
+
*/
|
|
225
|
+
/**
|
|
226
|
+
* Concatenate multiple Float32Arrays into a single array
|
|
227
|
+
*/
|
|
228
|
+
declare function concatenateAudioData(chunks: Float32Array[]): Float32Array;
|
|
229
|
+
/**
|
|
230
|
+
* Convert Float32Array to AudioBuffer
|
|
231
|
+
*/
|
|
232
|
+
declare function createAudioBuffer(audioContext: AudioContext, samples: Float32Array, sampleRate: number, channelCount?: number): AudioBuffer;
|
|
233
|
+
|
|
234
|
+
export { type MicrophoneDevice, MicrophoneSelector, type MicrophoneSelectorProps, RecordButton, type RecordButtonProps, type RecordingData, RecordingIndicator, type RecordingIndicatorProps, type RecordingOptions, type RecordingState, type UseMicrophoneAccessReturn, type UseMicrophoneLevelOptions, type UseMicrophoneLevelReturn, type UseRecordingReturn, VUMeter, type VUMeterProps, concatenateAudioData, createAudioBuffer, generatePeaks, useMicrophoneAccess, useMicrophoneLevel, useRecording };
|