The user aborted a request.

[Aditya Pushkar]

I'm getting this error in Nextjs>13.4

next.js.config

/** @type {import('next').NextConfig} */
const CopyPlugin = require("copy-webpack-plugin")
const nextConfig = {
    experimental: {
        serverActions: true,
    },

  webpack: (config, {}) => {
    config.resolve.extensions.push(".ts", ".tsx", '.js', '.jsx')
    config.resolve.fallback = { fs: false }

    config.plugins.push(
      new CopyPlugin({
        patterns: [
          {
            from: "./node_modules/onnxruntime-web/dist/ort-wasm.wasm",
            to: "static/chunks/[name][ext]",
          },
          {
            from: "./node_modules/onnxruntime-web/dist/ort-wasm-simd.wasm",
            to: "static/chunks/[name][ext]",
          },
          {
            from: "node_modules/@ricky0123/vad-web/dist/vad.worklet.bundle.min.js",
            to: "static/chunks/[name][ext]",
          },
          {
            from: "node_modules/@ricky0123/vad-web/dist/*.onnx",
            to: "static/chunks/[name][ext]",
          },
        ],
      })
    )
    return config
  },
}

module.exports = nextConfig

page.js

'use client'
import { useMicVAD, utils } from "@ricky0123/vad-react"
import { useState } from "react"

export const DetectSpeaking = () => {
  const [audioList, setAudioList] = useState([])
  const vad = useMicVAD({
    onSpeechEnd: (audio) => {
      const wavBuffer = utils.encodeWAV(audio)
      const base64 = utils.arrayBufferToBase64(wavBuffer)
      const url = `data:audio/wav;base64,${base64}`
      setAudioList((old) => {
        return [url, ...old]
      })
    },
  })

  if (vad.loading) {
    return <div>Loading..........</div>
  }

  if (vad.errored) {
    return <div>{vad.errored.message}</div>
  }
  return (
    <div>
      <h6>Listening</h6>
      {!vad.listening && "Not"} listening
      <h6>Loading</h6>
      {!vad.loading && "Not"} loading
      <h6>Errored</h6>
      {!vad.errored && "Not"} errored
      <h6>User Speaking</h6>
      {!vad.userSpeaking && "Not"} speaking
      <h6>Audio count</h6>
      {audioList.length}
      <h6>Start/Pause</h6>
      <button onClick={vad.pause}>Pause</button>
      <button onClick={vad.start}>Start</button>
      <button onClick={vad.toggle}>Toggle</button>
    </div>
  )
}

export default DetectSpeaking;

[Sequelator123]

The same error here in angular 15.2.2 project instantiating MicVAD:

import { MicVAD } from '@ricky0123/vad-web';

this.micVad = await MicVAD.new({
// additionalAudioConstraints: {
// deviceId: deviceId
// },
//onSpeechStart: this.handleSpeechStart
})

Error in browser console:
voice-activity-detection.service.ts:75 ERROR Error: Uncaught (in promise): AbortError: The user aborted a request.
at resolvePromise (zone.js:1193:31)
at zone.js:1100:17
at zone.js:1116:33
at asyncGeneratorStep (asyncToGenerator.js:6:1)
at _throw (asyncToGenerator.js:25:1)
at _ZoneDelegate.invoke (zone.js:368:26)
at Object.onInvoke (core.mjs:24178:33)
at _ZoneDelegate.invoke (zone.js:367:52)
at Zone.run (zone.js:127:43)
at zone.js:1257:36

[Lawrence Wang]

Looks like #24 is related

[Aditya Pushkar]

Hey guys, I just used (https://picovoice.ai/platform/cobra/) this module for VAD