sharechiwai/text-to-speech.js

## text-to-speech.js
import Head from 'next/head';
import { useState, useEffect } from 'react';

export default function WebSpeech() {
  let recognition = null;
  let SpeechRecognition = null;
  let SpeechGrammarList = null;
  let speechRecognitionList = null;

  let voices = null;
  let synth = null;
  //   const [voices, setVoices] = useState();
  useEffect(() => {
    // Client-side-only code
    SpeechRecognition =
      window.webkitSpeechRecognition || window.SpeechRecognition;
    SpeechGrammarList =
      window.SpeechGrammarList || window.webkitSpeechGrammarList;
    synth = window.speechSynthesis;
    recognition = new SpeechRecognition();
    speechRecognitionList = new SpeechGrammarList();

    recognition.grammars = speechRecognitionList;
    recognition.continuous = false;
    recognition.lang = 'zh-HK';
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;
  });

  const [input, setInput] = useState('');

  function speak() {
    voices = synth.getVoices();

    const cantonese = voices.find((item) => item.lang === 'zh-HK');

    const utterThis = new SpeechSynthesisUtterance(input);
    utterThis.voice = cantonese;
    synth.speak(utterThis);
  }

  const renderSpeech = () => {
    recognition.start();
    recognition.onresult = (event) => {
      //handle result in here
      let word = event.results[0][0].transcript;
      setInput(word);
    };
  };

  return (
    <div>
      <Head>
        <title>Web Speech</title>
      </Head>
      <h2>Web Speech</h2>
      <div className="grid grid-cols-1">
        <div>
          <textarea
            className="resize border rounded-md w-9/12 min-height: 300px bg-gray-800"
            rows="8"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          ></textarea>
        </div>
        <div>
          <button
            className="bg-purple-500
                       text-white
                       active:bg-purple-600
                       font-bold
                       uppercase
                       text-sm
                       px-6
                       py-3
                       rounded
                       shadow
                       hover:shadow-lg
                       outline-none
                       focus:outline-none
                       mr-1
                       mb-1
                       ease-linear
                       transition-all
                       duration-150"
            type="button"
            onClick={() => speak()}
          >
            Speak
          </button>
          <button
            className="bg-purple-500
                       text-white
                       active:bg-purple-600
                       font-bold
                       uppercase
                       text-sm
                       px-6
                       py-3
                       rounded
                       shadow
                       hover:shadow-lg
                       outline-none
                       focus:outline-none
                       mr-1
                       mb-1
                       ease-linear
                       transition-all
                       duration-150"
            type="button"
            onClick={() => renderSpeech()}
          >
            Speech to Text
          </button>
        </div>
      </div>
    </div>
  );
}
	import Head from 'next/head';
	import { useState, useEffect } from 'react';

	export default function WebSpeech() {
	let recognition = null;
	let SpeechRecognition = null;
	let SpeechGrammarList = null;
	let speechRecognitionList = null;

	let voices = null;
	let synth = null;
	// const [voices, setVoices] = useState();
	useEffect(() => {
	// Client-side-only code
	SpeechRecognition =
	window.webkitSpeechRecognition \|\| window.SpeechRecognition;
	SpeechGrammarList =
	window.SpeechGrammarList \|\| window.webkitSpeechGrammarList;
	synth = window.speechSynthesis;
	recognition = new SpeechRecognition();
	speechRecognitionList = new SpeechGrammarList();

	recognition.grammars = speechRecognitionList;
	recognition.continuous = false;
	recognition.lang = 'zh-HK';
	recognition.interimResults = false;
	recognition.maxAlternatives = 1;
	});

	const [input, setInput] = useState('');

	function speak() {
	voices = synth.getVoices();

	const cantonese = voices.find((item) => item.lang === 'zh-HK');

	const utterThis = new SpeechSynthesisUtterance(input);
	utterThis.voice = cantonese;
	synth.speak(utterThis);
	}

	const renderSpeech = () => {
	recognition.start();
	recognition.onresult = (event) => {
	//handle result in here
	let word = event.results[0][0].transcript;
	setInput(word);
	};
	};

	return (
	<div>
	<Head>
	<title>Web Speech</title>
	</Head>
	<h2>Web Speech</h2>
	<div className="grid grid-cols-1">
	<div>
	<textarea
	className="resize border rounded-md w-9/12 min-height: 300px bg-gray-800"
	rows="8"
	value={input}
	onChange={(e) => setInput(e.target.value)}
	></textarea>
	</div>
	<div>
	<button
	className="bg-purple-500
	text-white
	active:bg-purple-600
	font-bold
	uppercase
	text-sm
	px-6
	py-3
	rounded
	shadow
	hover:shadow-lg
	outline-none
	focus:outline-none
	mr-1
	mb-1
	ease-linear
	transition-all
	duration-150"
	type="button"
	onClick={() => speak()}
	>
	Speak
	</button>
	<button
	className="bg-purple-500
	text-white
	active:bg-purple-600
	font-bold
	uppercase
	text-sm
	px-6
	py-3
	rounded
	shadow
	hover:shadow-lg
	outline-none
	focus:outline-none
	mr-1
	mb-1
	ease-linear
	transition-all
	duration-150"
	type="button"
	onClick={() => renderSpeech()}
	>
	Speech to Text
	</button>
	</div>
	</div>
	</div>
	);
	}