JSPM

react-audio-processor-kit

0.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q35080F
  • License MIT

A lightweight React hook for real-time voice activity detection (VAD), low-latency audio streaming, volume visualization, and optional full-session recording โ€” built for voice-enabled interfaces and live audio applications.

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 event
  • onComplete(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