speechSynthesis

浏览器自带 TTS 能力。

:::info SpeechSynthesis 是一个 JavaScript API 的名称，用于合成语音。它是 Web Audio API 的一部分，允许开发者在网页上实时合成语音。SpeechSynthesis 使用 Text-to-Speech 技术来将文本转换为语音，可以将文本转换为不同的语言和声音。

SpeechSynthesis 的主要方法有以下几种：

1. speak() - 用于合成语音。可以提供一段文本，以及一些 Optional 的参数，如语言、声音、音速、音高等。
2. pause() - 用于暂停语音合成。
3. resume() - 用于继续语音合成。
4. cancel() - 用于取消语音合成。

例如，以下代码使用 SpeechSynthesis 合成了一段文本的语音：

:::

const synth = window.speechSynthesis;
synth.speak('Hello, world!', {
  language: 'en-US',
  voice: 'slt_kevin',
  speed: 1,
  pitch: 1
});

:::info 在上面的代码中，我们使用 speak() 方法将文本「Hello, world!」进行合成，并指定了语言、声音、音速和音高。

需要注意的是，SpeechSynthesis 的支持度不 uniform，不同的浏览器和操作系统可能支持不同的语言和声音。同时，SpeechSynthesis 也可能会受到用户的语言和地区设置的影响。

:::

示例 Hook

import { useCallback,useState } from "react";
export const useSpeachSynthesisApi = () => {
  const [text, setText] = useState<string>("");
  const [isSpeaking, setIsSpeaking] = useState<boolean>(false);
  const [isPaused, setIsPaused] = useState<boolean>(false);
  const [isResumed, setIsResumed] = useState<boolean>(false);
  const [isEnded, setIsEnded] = useState<boolean>(false);
  const speak = useCallback(() => {
    var msg = new SpeechSynthesisUtterance();
    msg.text = <string>text;
    function speak() {
      window.speechSynthesis.speak(msg);
    }
    speak();
    setIsSpeaking(true);
    setIsEnded(false);
  }, [text]);
  const pause = useCallback(() => {
    function pause() {
      window.speechSynthesis.pause();
    }
    pause();
    setIsPaused(true);
    setIsSpeaking(false);
    setIsEnded(false);
    setIsResumed(false);
  }, []);
  const resume = useCallback(() => {
    function resume() {
      window.speechSynthesis.resume();
    }
    resume();
    setIsPaused(false);
    setIsSpeaking(false);
    setIsEnded(false);
    setIsResumed(true);
  }, []);
  const cancel = useCallback(() => {
    function cancel() {
      window.speechSynthesis.cancel();
    }
    cancel();
    setIsPaused(false);
    setIsResumed(false);
    setIsSpeaking(false);
    setIsEnded(true);
  }, []);
return {
    text,  
    setText,
    isSpeaking,
    isPaused,
    isResumed,
    isEnded,
    speak,
    pause,
    resume,
    cancel  
  }
}