If you use Vite, refer to my configuration.

[Jakevin]

vite.config.js

export default defineConfig({
  plugins: [
    vue(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@ricky0123/vad-web/dist/vad.worklet.bundle.min.js',
          dest: './'
        },
        {
          src: 'node_modules/@ricky0123/vad-web/dist/silero_vad.onnx',
          dest: './'
        },
        {
          src: 'node_modules/onnxruntime-web/dist/*.wasm',
          dest: './'
        }
      ]
    })
  ],

})

in your code

import { MicVAD } from "@ricky0123/vad-web"

onMounted(async () => {
   const myvad = await MicVAD.new({
    workletURL: './vad.worklet.bundle.min.js', // setting workletURL
    modelURL: './silero_vad.onnx', // setting modelURL
    onSpeechEnd: (audio) => {
      console.log('Speech end detected');
      // do something with `audio` (Float32Array of audio samples at sample rate 16000)...
      const audioArray = new Float32Array(audio); // Example audio data
      return audioArray;
    },
  })
  myvad.start()
})

[soylomass]

Thanks. I have another problem though, the library seems to be trying to load some files (ort-wasm-simd.wasm) from the current path instead of from root, therefore it's failing.

ie.
Should load from http://localhost:3000/ort-wasm-simd.wasm
Loads from http://localhost:3000/path/ort-wasm-simd.wasm

Do you have this problem?

---

Solved, had to add:

      ortConfig: (ort) => {
        ort.env.wasm.wasmPaths = "/";
      },

[pauldvu]

{
  src: 'node_modules/@ricky0123/vad-web/dist/vad.worklet.bundle.min.js',
  dest: './'
},
{
  src: 'node_modules/@ricky0123/vad-web/dist/silero_vad.onnx',
  dest: './'
},
{
  src: 'node_modules/onnxruntime-web/dist/*.wasm',
  dest: './'
},
+ {
+   src: 'node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.mjs', 
+   dest: './'
+ }

For my instance I had to add the following

and if you're in a workspace / mono repo make sure you're pathing correctly to the node_modules folder

You may need to path dynamically or use absolute path

[ricky0123]

Hey, FYI there is now an option called onnxWASMBasePath that allows you to specify wasm path instead of ortConfig.

[yuqianma]

Still broken. I fell this pacakge is not easy to use with vite by every version.

([email protected])

First, without local files config:

@ricky0123_vad-react.js?v=47efd20b:12609 
       GET https://cdn.jsdelivr.net/npm/[email protected]/dist/ort-wasm-simd-threaded.mjs net::ERR_ABORTED 404 (Not Found)

hook.js:608 Encountered an error while loading model file https://cdn.jsdelivr.net/npm/@ricky0123/[email protected]/dist/silero_vad_v5.onnx

Then I tried to copy the static files mentioned by doc, but the doc missed ort-wasm-simd-threaded.mjs. I copied ort-wasm-simd-threaded.mjs but the vite complains:

Failed to load url /vad/ort-wasm-simd-threaded.mjs (resolved id: /vad/ort-wasm-simd-threaded.mjs). This file is in /public and will be copied as-is during build without going through the plugin transforms, and therefore should not be imported from source code. It can only be referenced via HTML tags.

However when I first tried the lib by html script weeks ago, It worked very well! The impression is awesome!
This week I want to integrate it into my project, but no luck so far...

Or ... should the repo change from webpack to vite? Since it's so popular now.

[fyoudine]

Thanks to this thread I get it to work using vite.js and React :

vite.config.js

export default defineConfig({
  plugins: [
  viteStaticCopy({
      targets: [
        {
          src: "node_modules/@ricky0123/vad-web/dist/vad.worklet.bundle.min.js",
          dest: "./vad/",
        },
        {
          src: "node_modules/@ricky0123/vad-web/dist/*.onnx",
          dest: "./vad/",
        },
        {
          src: "node_modules/onnxruntime-web/dist/*.wasm",
          dest: "./vad/",
        },
        {
          src: "node_modules/onnxruntime-web/dist/*.mjs",
          dest: "./vad/",
        },
      ],
    }),
  ],
});

React component

import { useMicVAD, utils } from "@ricky0123/vad-react";
import { useState } from "react";

export const AudioVad = (  ) => {
  const [audioList, setAudioList] = useState<string[]>([]);
  const { listening, toggle, userSpeaking, errored } = useMicVAD({
    startOnLoad: false,
    model: "v5",
    baseAssetPath: "/vad/",
    onnxWASMBasePath: "/vad/",
    onSpeechEnd: (audio) => {
      const wavBuffer = utils.encodeWAV(audio);
      const base64 = utils.arrayBufferToBase64(wavBuffer);
      const url = `data:audio/wav;base64,${base64}`;
      setAudioList((old) => [url, ...old]);
    },
  });
  return (
    <div>
      <h1>Demo of @ricky0123/vad-react</h1>
      <button onClick={toggle}>Toggle VAD</button>
      {listening && <div>VAD is running</div>}
      {!listening && <div>VAD is NOT running</div>}
      {userSpeaking && <UserSpeaking />}
      {!userSpeaking && <UserNotSpeaking />}
      {!errored && <div>{errored}</div>}
      <ol id="playlist">
        {audioList.map((audioURL) => {
          return (
            <li key={audioURL.substring(-10)}>
              <audio controls src={audioURL} />
            </li>
          );
        })}
      </ol>
    </div>
  );
};

function UserSpeaking() {
  return <span style={{ color: "green" }}>user is speaking</span>;
}

function UserNotSpeaking() {
  return <span style={{ color: "red" }}>user is not speaking</span>;
}
export default AudioVad;

Hope this can help.

[matthewgertner]

Note that the latest release changed the dependency on onnxruntime-web to make it less permissive. Previously it was prefixed with a caret so it was taking the newest version. Now it's forced to 1.14.0. So if you're looking for the .mjs file, you won't find it... it was apparently added in version 1.19.0.

@ricky0123 Any particular reason you made this change? I'm not sure but I suspect it's the reason for #88.

[ricky0123]

Hi @matthewgertner it was actually more because of this one #161 and also this issue with onnxruntime

[matthewgertner]

Hey @ricky0123, I was just theorizing that the problem reported in #88 is due to use of an older version of onnxruntime. My reasoning was that I was using an older version of your VAD, which naturally uses a newer version of onnxruntime 😄 (as explained in #161) and I wasn't getting the ONNX warnings, unless I really wasn't paying attention.

Anyway I'm filtering out the warnings right now so (while it pains me to override console.warn) I'm personally fine with the status quo. If I understand correctly, you'll be able to upgrade to a newer ONNX version once that Next.js bundling issue is fixed, right? I'm expect the warnings to disappear at that point although I may be totally off base.

[ricky0123]

Yeah, tbh the warnings are lower priority than some other pending improvements. But yeah, if the nextjs issue is fixed I'll upgrade onnxruntime. Also, I have a vague memory that someone figured out how to disable the warnings using our ortConfig option, which gives you direct access to the onnxruntime settings when you load the VAD, although I could be remembering wrong

[matthewgertner]

No worries, it's not an issue for me at all besides occasionally waking up in a cold sweat after a terrifying nightmare involving monkey-patching console.warn. ;-)

My main point was that readers of this thread should be aware that the latest code uses a version of ONNX that doesn't include the mjs file.