Function useSpeech

packages/rooks/src/hooks/useSpeech.ts:24–122

(options: UseSpeechOptions)

}

function useSpeech(options: UseSpeechOptions): SpeechControls {
  const {
    text,
    language = "en-US",
    voiceURI,
    onEnd = noop,
    volume = 1,
    pitch = 1,
    rate = 1,
  } = options;

  const freshOnEnd = useFreshCallback(onEnd);

  const speechRef = useRef<SpeechSynthesisUtterance | null>(null);
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    if (speechRef.current && isPlaying) {
      speechRef.current.text = text;
      speechRef.current.lang = language;
      speechRef.current.volume = volume;
      speechRef.current.pitch = pitch;
      speechRef.current.rate = rate;

      if (voiceURI) {
        const voices = window.speechSynthesis.getVoices();
        const selectedVoice = voices.find(
          (voice) => voice.voiceURI === voiceURI
        );
        if (selectedVoice) {
          speechRef.current.voice = selectedVoice;
        }
      }
    }
  }, [text, isPlaying, language, voiceURI, volume, pitch, rate]);

  const start = useCallback(() => {
    if (!("speechSynthesis" in window)) {
      console.error("Web Speech API is not supported in your browser.");
      return;
    }

    if (speechRef.current) {
      window.speechSynthesis.cancel();
    }

    speechRef.current = new SpeechSynthesisUtterance(text);
    speechRef.current.lang = language;
    speechRef.current.volume = volume;
    speechRef.current.pitch = pitch;
    speechRef.current.rate = rate;

    if (voiceURI) {
      const voices = window.speechSynthesis.getVoices();
      const selectedVoice = voices.find((voice) => voice.voiceURI === voiceURI);
      if (selectedVoice) {
        speechRef.current.voice = selectedVoice;
      }