Jak vytvořit React Text to Speech službu

npx create-react-app 

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ChakraProvider } from '@chakra-ui/react';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);

// Zabalíme všechny komponenty, tedy ty, které jsou připojené ke 
// komponentu App v ChakraProdiver. 
// Díky tomu budeme moci ve všech zmíněných komponentech používat chakra-ui.
root.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

npm i microsoft-cognitiveservices-speech-sdk

// Importování Reactu a useState hooku
import React, { useState } from "react";

// Importování SpeechSynthesis modulu, který si za chvíli vytvoříme.
import SpeechSynthesis from "./SpeechSynthesis";

// Importování chakra-ui komponentů
import {
  Center,
  FormControl,
  Button,
  ButtonGroup,
  Input,
  Stack,
  Select,
} from "@chakra-ui/react";

// Hlavní funkce komponentu, který poté exportujeme na posledním řádku kódu.
const TextToSpeech = () => {

// Používání useState hooku; pro více informací o useState hooku přikládám dokumentaci:
// https://www.reactjstutorials.com/react-basics/25/react-usestate

  const [input, setInput] = useState("testing audio");
  const [text, setText] = useState("testing audio");
  const [language, setLanguage] = useState("English");

// Tvoření props; pro více informací o props přikládám dokumentaci.
// https://reactjs.org/docs/components-and-props.html
  const properties = {
    text: text,
    language: language,
  };

// Funkce, která se stará o výběr jazyka a ukládá ho do proměnné language.
  const buttonClickHandlerLanguage = (e) => setLanguage(e.target.value);

// Funkce, která nám dává text, jenž uživatel průběžně píše do proměnné input
  const inputHandler = (e) => setInput(e.target.value);

// funkce, která po kliknutí na tlačítko dá hodnotu inputu do proměnné text
  const buttonClickHandlerText = (e) => {
    e.preventDefault();
    setText(input);
  };

// Jak správně používat chakra-ui si můžete přečíst v oficiální dokumentaci: 
// https://chakra-ui.com/
  return (
    <>
      <Center h="100vh" w="100vw">
        <FormControl w="max">
          <Stack
            flexDir="column"
            w={{ base: "75vw", md: "75vw", lg: "50vw" }}
            spacing={4}
          >
            <Input
              htmlSize={4}
              variant="flushed"
              width="100%"
              type="text"
              id="input"
              placeholder="type something"
              onChange={inputHandler}
            ></Input>
            <ButtonGroup variant="outline" spacing="6" w="100vh">
              <Button colorScheme="black" onClick={buttonClickHandlerText}>
                Play Audio
              </Button>
              <Select
                id="language-chooser"
                w="20vh"
                onChange={buttonClickHandlerLanguage}
              >
                <option>English</option>
                <option>Czech</option>
              </Select>
            </ButtonGroup>
          </Stack>
        </FormControl>
      </Center>

{/* Voláme komponent SpeechSynthesis a vkládáme do něj props (text a jazyk) */}
      <SpeechSynthesis
        text={properties.text}
        language={properties.language}
      ></SpeechSynthesis>

    </>
  );
};
export default TextToSpeech;

// Importujeme všechno z microsoft-cognitiveservices-speech-sdk:
import * as sdk from "microsoft-cognitiveservices-speech-sdk";

// Importujeme hook useEffect; pro více informací o useEffectu přikládám dokumentaci:
// https://www.reactjstutorials.com/react-basics/26/react-useeffect
import { useEffect } from "react";

// Pro více informací o tomto kódu navšivte Azure dokumentaci pro text to speech:
// https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/get-started-text-to-speech?tabs=windowsinstall&pivots=programming-language-javascript
const SpeechSynthesis = (props) => {

// Do proměnné language vkládáme hodnotu podle toho, jaký jazyk si uživatel zvolil.
    let language = "en-US-JennyNeural";
    if (props.language === "English") {
        language = "en-US-JennyNeural";
    }
    else if (props.language === "Czech") {
        language = "cs-CZ-VlastaNeural";
    }

// Tento kód se spustí pouze v případě, že se změní props.text, viz.  konec useEffectu.
    useEffect(() => {
        const speechConfig = sdk.SpeechConfig

// Příkladem regionu může být northeurope.
            .fromSubscription("vasazureklic", "vasregion");
        speechConfig.speechSynthesisVoiceName = language;

        let synthesizer = new sdk.SpeechSynthesizer(speechConfig);
        synthesizer.speakTextAsync(
            props.text,
            (result) => {
                synthesizer.close();
                return result.audioData;
            }
        );
    }, [props.text])
}

// Export komponentu SpeechSynthesis:
export default SpeechSynthesis;

import TextToSpeech from "./TextToSpeech/TextToSpeech";

function App() {
  return (
    <>
// Připojíme komponent TextToSpeech k App, abychom v něm mohli používat chakra-ui 
// a aby se zobrazil na obrazovce.
      <TextToSpeech />
    </>
  );
}

export default App;

        const speechConfig = sdk.SpeechConfig
            .fromSubscription("semvloztevasklic", "semvlozteregion");
        speechConfig.speechSynthesisVoiceName = language;