Audio Recording
Web Quick Start

Platforms

• Chrome & Chromium-based browsers
• Edge
• Firefox
• Safari

Requirements

• Node.js 14+
• npm

Quick Start

Setup

1. Install Node.js.

2. Install the Web Voice Processor package:

npm install @@picovoice/web-voice-processor

Usage

WebVoiceProcessor follows the subscribe/unsubscribe pattern. WebVoiceProcessor will automatically start recording audio as soon as an engine is subscribed:

import { WebVoiceProcessor } from '@picovoice/web-voice-processor';

const worker = new Worker('${WORKER_PATH}');
const engine = {
   onmessage: function(e) {
      /// ... handle inputFrame
   }
}

await WebVoiceProcessor.subscribe(engine);
await WebVoiceProcessor.subscribe(worker);
// or
await WebVoiceProcessor.subscribe([engine, worker]);

An engine is either a Web Worker or an object implementing the following interface within their onmessage method:

onmessage = function (e) {
    switch (e.data.command) {
        case 'process':
            process(e.data.inputFrame);
            break;
    }
};

Unsubscribing engines that were initially subscribed (when no more engines are subscribed, audio recording will stop automatically):

await WebVoiceProcessor.unsubscribe(engine);
await WebVoiceProcessor.unsubscribe(worker);
//or
await WebVoiceProcessor.unsubscribe([engine, worker]);

Use the reset function to remove all engines and stop recording audio.

await WebVoiceProcessor.reset();

To update the audio capture settings in WebVoiceProcessor, use the setOptions function:

let options = {
  frameLength: 1024,
  outputSampleRate: 44100,
  deviceId: 2,
  filterOrder: 25
};

WebVoiceProcessor.setOptions(options);

Demo

For the Voice Processor Web SDK we have an example that demonstrates how to use WebVoiceProcessor in a simple web page.

Setup

Clone the web-voice-processor repository from GitHub:

git clone https://github.com/Picovoice/web-voice-processor.git

Usage

1. Install dependencies and start the server:

cd demo
npm install
npm run start

2. Open http://localhost:5000 to view it in the browser.

3. Start and stop recording with the button and watch the VU meter react to recorded audio.

For more information on our Voice Processor demo for Web, head over to our GitHub repository.

Resources