change voice in react-speech-kit

Question

I am using useSpeechSynthesis of react-speech-kit to read the text when click button. This is my code:

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>
  );
}

The default voice is a man. How can I change the voice

Answer 1

In the speak function that you are calling during the onClick event there is an other key value that you can pass beyond text and it's "voice"

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>
  );
}

The speech synthesis voice is available in the voices array.

Hope this helps

Answer 2

I've encountered the same problem of wanting to change the voice. The following method worked for me.

const { speak, voices } = useSpeechSynthesis();

<button onClick={() => speak({ text: value, voice: voices[1] })}>Speak</button>

I've found the idea from this link.