Создайте простое приложение ReactJS для диктовки речи в текст

Функция преобразования речи в текст ReactJS сегодня является распространенным вариантом использования разработчиками. Будь то для общего использования или доступности, потребность в преобразовании речи в текст в ваших проектах — это то, что, скорее всего, возникнет в тот или иной момент, и это функция, которую мы, как разработчики, должны быть готовы реализовать в наших приложениях.

import React, { useState, useEffect } from 'react';

const DictationApp = () => {
  const [transcription, setTranscription] = useState('');
  const [isListening, setIsListening] = useState(false);

  useEffect(() => {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    const recognition = new SpeechRecognition();

    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.lang = 'en-US';

    recognition.addEventListener('result', e => {
      let interimTranscript = '';
      let finalTranscript = '';

      for (let i = e.resultIndex, len = e.results.length; i < len; i++) {
        const transcript = e.results[i][0].transcript;
        if (e.results[i].isFinal) finalTranscript += transcript;
        else interimTranscript += transcript;
      }
      setTranscription(finalTranscript + interimTranscript);
    });

    return () => recognition.removeEventListener('result', () => {});
  }, []);

  const startListening = () => {
    recognition.start();
    setIsListening(true);
  }

  const stopListening = () => {
    recognition.stop();
    setIsListening(false);
  }

  return (
    <div>
      <button onClick={startListening} disabled={isListening}>Start</button>
      <button onClick={stopListening} disabled={!isListening}>Stop</button>
      <p>{transcription}</p>
    </div>
  );
};

export default DictationApp;

Этот код создает простой компонент React с двумя кнопками для запуска и остановки прослушивания и элементом p для отображения транскрипции. Ловушка useEffect используется для настройки объекта SpeechRecognition и прослушивателя событий для события результата, которое запускается всякий раз, когда служба распознавания речи возвращает результат. Функции startListening и stopListening используются для запуска и остановки службы распознавания, а переменная состояния транскрипции обновляется с помощью окончательной и промежуточной расшифровок.