User guide for browser use

The @ricky0123/vad-web package aims to provide an accurate, user-friendly voice activity detector (VAD) that runs in the browser.

Script tags quick start

The VAD can be used via script tags as follows:

<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ricky0123/vad-web@0.0.7/dist/bundle.min.js"></script>
<script>
  async function main() {
    const myvad = await vad.MicVAD.new({
      onSpeechEnd: (audio) => {
        // do something with `audio` (Float32Array of audio samples at sample rate 16000)...
      },
    })
    myvad.start()
  }
  main()
</script>

Bundling

To use the VAD in a frontend project managed by a bundler like Webpack, install @ricky0123/vad-web with a command like

npm i @ricky0123/vad-web

and use an import like:

import { MicVAD } from "@ricky0123/vad-web"
const myvad = await MicVAD.new({
  onSpeechEnd: (audio) => {
    // do something with `audio` (Float32Array of audio samples at sample rate 16000)...
  },
})
myvad.start()

You will also need to

1. serve the silero_vad.onnx file that comes distributed with @ricky0123/vad-web
2. serve the vad.worklet.bundle.min.js file that comes distributed with @ricky0123/vad-web
3. serve the wasm files that come distributed with the package onnxruntime-web

One way to accomplish this is to run a shell script that copies these files into your dist directory (or whatever you have named your output directory) during your build process - see the build script for this website for an example. Or, if you are using Webpack 5, this can be acheived by adding the following to your webpack.config.js (other bundlers may have similar options/plugins):

const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
  // ...
  plugins: [
    // ...
    new CopyPlugin({
      patterns: [
        // ...
        {
          from: "node_modules/@ricky0123/vad-web/dist/vad.worklet.bundle.min.js",
          to: "[name][ext]",
        },
        {
          from: "node_modules/@ricky0123/vad-web/dist/*.onnx",
          to: "[name][ext]",
        },
        { from: "node_modules/onnxruntime-web/dist/*.wasm", to: "[name][ext]" },
      ],
    }),
  ],
}

Note that you will need to install copy-webpack-plugin in order for the webpack config snippet above to work (npm i -D copy-webpack-plugin if using npm).

API

@ricky0123/vad-web supports the MicVAD and NonRealTimeVAD APIs.