STT+VAD article - useAudioActive.ts

useAudioActive.ts

import { useEffect, useState } from "react";
import hark from "hark";

export function useAudioActive(stream: MediaStream | undefined) {
  const [speakerActive, setSpeakerActive] = React.useState(false);

  React.useEffect(() => {
    if (!stream) {
      setSpeakerActive(false);
      return;
    }

    const speech = hark(stream, { play: false });

    speech.on("speaking", () => {
      console.log("hark speaking");
      setSpeakerActive(true);
    });
    speech.on("stopped_speaking", () => {
      console.log("hark stopped_speaking");
      setSpeakerActive(false);
    });

    return () => {
      // `hark` typing definition doesn't have the `.off()` function to unbind the event handle
      // but as it uses `wildemitter` npm package, this function does exist.

      // @ts-ignore
      speech.off("speaking");
      // @ts-ignore
      speech.off("stopped_speaking");

      speech.stop();
    };
  }, [stream]);

  return speakerActive;
}