在react-speech-kit中改变声音

Question

我正在使用React-Speech-kit的usEspeechsynesis来读取文本时，当单击按钮时。这是我的代码：

import React, { useState } from 'react';
import { useSpeechSynthesis } from 'react-speech-kit';
 
function Example() {
  const [value, setValue] = useState('');
  const { speak } = useSpeechSynthesis();
 
  return (
    <div>
      <textarea
        value={value}
        onChange={(event) => setValue(event.target.value)}
      />
      <button onClick={() => speak({ text: value })}>Speak</button>
    </div>
  );
}

默认语音是一个人。我如何改变声音

Answer 1

我遇到了想要改变声音的同样问题。以下方法对我有用。

const {speen，voices} = usespeechsynthesis（）;

＆lt; button onclick = {（）=＆gt;说话（{text：value，语音：声音[1]}）}＆gt; speak＆lt;/button＆gt;

我从这个 link 。

Answer 2

在 onClick 事件期间调用的 talk 函数中，还有一个可以在文本之外传递的键值，它是“语音”

import React, { useState } from 'react';
import { useSpeechSynthesis } from 'react-speech-kit';
 
function Example() {
  const [value, setValue] = useState('');
  const { speak } = useSpeechSynthesis();
 
  return (
    <div>
      <textarea
        value={value}
        onChange={(event) => setValue(event.target.value)}
      />
      <button onClick={() => speak({ text: value, voice:SpeechSynthesisVoice })}>Speak</button>
    </div>
  );
}

语音合成语音可在 voices 数组中使用。

希望这有帮助

Answer 3

当我想将默认语音更改为女性意大利口音时，我遇到了同样的问题。以下方法对我有用。

import React, { useState } from 'react';
import { useSpeechSynthesis } from 'react-speech-kit';
        
function Example() {
    const { speak, voices } = useSpeechSynthesis();
    
    useEffect(() => {
        //console.log("You will get all voices here",voices);
        const selectedVoice = voices.find(voice => voice.lang.includes('it-IT'));
        speak({ text: "Put your text here", voice: selectedVoice });
    }, [])
}

Answer 4

您可以在演示中找到每个语音名称：https://mikeyparton.github. io/react-speech-kit/

你可以通过调用speechSynthesis.getVoices()来获取可用语音的列表。确保在初始化语音合成并加载语音后调用此方法，例如在 useEffect 挂钩中。

这是我使用语音名称的函数：

const speakAllWords = async () => {
    const utterance = new SpeechSynthesisUtterance();
    utterance.voice = speechSynthesis
      .getVoices()
      .find((voice) => voice.name === "Microsoft David - English (United States)");
    for (let i = 0; i < words.length; i++) {
      setHighlightedWordIndex(i);
      utterance.text = words[i];
      speechSynthesis.speak(utterance);
      await wait(words[i].length * 250); // Adjust the multiplier for better synchronization
    }
    setHighlightedWordIndex(null);
  };

我的完整代码供参考：

import React, { useState, useEffect } from "react";
import { useSpeechSynthesis } from "react-speech-kit";

const TextHighlighter = ({ text }) => {
  const { speak, cancel, speaking } = useSpeechSynthesis();
  const [highlightedWordIndex, setHighlightedWordIndex] = useState(null);
  const [words, setWords] = useState([]);

  useEffect(() => {
    // Split text into words when text changes
    setWords(text.split(" "));
  }, [text]);

  const cancelSpeech = () => {
    cancel();
    setHighlightedWordIndex(null);
  };

  const speakAllWords = async () => {
    const utterance = new SpeechSynthesisUtterance();
    utterance.voice = speechSynthesis
      .getVoices()
      .find((voice) => voice.name === "Microsoft David - English (United States)");
    for (let i = 0; i < words.length; i++) {
      setHighlightedWordIndex(i);
      utterance.text = words[i];
      speechSynthesis.speak(utterance);
      await wait(words[i].length * 250); // Adjust the multiplier for better synchronization
    }
    setHighlightedWordIndex(null);
  };

  const wait = (ms) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
  };

  return (
    <div>
      <p>
        {words.map((word, index) => (
          <span
            key={index}
            style={{
              backgroundColor:
                index === highlightedWordIndex ? "yellow" : "transparent",
            }}
          >
            {word}{" "}
          </span>
        ))}
      </p>
      <button onClick={speakAllWords}>Speak All</button>
      <button onClick={cancelSpeech}>Stop</button>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>Text-to-Speech with Highlighting</h1>
      <TextHighlighter text="The plumber fitted the pipes yesterday." />
    </div>
  );
};

export default App;