Package Exports
- react-audio-processor-kit
- react-audio-processor-kit/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-audio-processor-kit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
๐ง react-audio-processor-kit
A high-performance audio processor built on the Web Audio API and AudioWorklet
โ optimized for real-time audio chunking, voice activity detection (VAD), and browser-based recording.
๐ง Features
- โ
Pure Web Audio API (
AudioWorklet
-based) - ๐๏ธ Lightweight RMS-based Voice Activity Detection (VAD)
- โ๏ธ Configurable silence threshold and speech delay
- ๐ฆ Real-time Int16 chunk conversion for efficient transmission
- ๐ Works with or without VAD enabled
- ๐ Minimal branching inside
process()
for high performance - ๐งฉ Built-in session recording and time-based chunked capture
- ๐ Designed for modern browsers and streaming use cases
- ๐ Audio Virtualization โ Provide real-time audio volume visualization values, enabling the creation of dynamic virtual audio feedback in the UI (e.g., volume meters or audio visualizations)
๐ Use Cases
- Live transcription apps (speech-to-text)
- Audio waveform visualizers with accurate volume tracking
- Low-latency browser-based audio streaming and processing
๐ View live demo: https://react-audio-processor-kit.netlify.app/
๐ฆ Installation
npm install react-audio-processor-kit
โ๏ธ Quick Start
const {
micState,
Start,
Pause,
Resume,
Stop,
Subscribe,
unSubscribe
} = useAudioProcessorKit({
vad: {
enabled: false,
speakDetectionDelayMs: 60,
silenceDetectionDelayMs: 310,
noiseFloor: 20,
},
timing: {
interval: 1000,
volumeVisualization: true,
},
recording: {
enabled: true,
onComplete: (blob) => {
console.log(blob);
// setFullRecord(URL.createObjectURL(blob));
},
},
data: {
onAvailable: (blob) => {
setAudioBlobs(prev => [...prev, URL.createObjectURL(blob)]);
},
},
audio: {
wav: false, // pcm Or wav , by default wav is provided
sampleRate: 16000,
},
});
๐ Microphone Controls UI
<div>
<button onClick={Start} disabled={micState !== "S"}>Start</button>
<button onClick={Pause} disabled={micState !== "R"}>Pause</button>
<button onClick={Resume} disabled={micState !== "P"}>Resume</button>
<button onClick={Stop} disabled={micState === "S"}>Stop</button>
</div>
"S"
= Stopped"R"
= Recording"P"
= Paused
โ๏ธ Configuration Reference
๐ง vad
Voice Activity Detection
Property | Type | Description |
---|---|---|
enabled |
boolean |
Enables or disables VAD |
speakDetectionDelayMs |
number |
Delay before confirming speaking has started |
silenceDetectionDelayMs |
number |
Delay before confirming silence |
noiseFloor |
number |
Sensitivity threshold (1โ100). Lower is more sensitive |
vad: {
enabled: true,
speakDetectionDelayMs: 30,
silenceDetectionDelayMs: 50,
noiseFloor: 4,
}
๐พ recording
Record the entire audio session.
Property | Type | Description |
---|---|---|
enabled |
boolean |
Enables recording |
onComplete(blob) |
function |
Called on Stop() with final audio blob |
recording: {
enabled: true,
onComplete: (blob) => {
setFullRecord(URL.createObjectURL(blob));
},
}
๐ timing
Time-based audio capture
Property | Type | Description |
---|---|---|
interval |
number |
Time interval in ms between chunks |
volumeVisualization |
boolean |
Enables real-time volume data (RMS) |
timing: {
interval: 1000,
volumeVisualization: true,
}
๐ค data
Handle real-time audio chunks
Property | Type | Description |
---|---|---|
onAvailable(blob) |
function |
Called when an audio chunk is ready (VAD or interval) |
data: {
onAvailable: (blob) => {
setAudioBlobs(prev => [...prev, URL.createObjectURL(blob)]);
},
}
๐ง audio
Audio format configuration
Property | Type | Description |
---|---|---|
sampleRate |
number |
Target sample rate (Hz) |
wav |
boolean |
Output format (WAV or PCM) |
audio: {
sampleRate: 16000,
wav: true,
}
๐ Control API
Method | Description |
---|---|
Start() |
Starts the audio pipeline |
Pause() |
Temporarily halts processing |
Resume() |
Resumes processing |
Stop() |
Finalizes and stops everything |
Subscribe(callback) |
Subscribe to audio events |
unSubscribe(index) |
Unsubscribe using returned index |
๐ก Subscribe Example
useEffect(() => {
const index = Subscribe((data) => {
setSpeaking(data.isSpeaking);
});
return () => unSubscribe(index);
}, []);
๐งช Output
onAvailable(blob)
โ Called every time interval or per VAD eventonComplete(blob)
โ Final session recording blob on Stop
Requires HTTPS or
localhost
for microphone access.
๐จโ๐ป Author
dev.akash ๐ง akashv2000.dev@gmail.com
๐ License
MIT โ Free for personal and commercial use