useSpeechRecognition.md

useSpeechSynthesis

A hook that provides an interface for using the Web_Speech_API to recognize and transcribe speech in a user's browser.

Why? 💡

• Abstracts the implementation details of the Web Speech API into a single reusable function.

Basic Usage:

import { Button, Space, Tag, Typography, Input } from 'antd';
import useSpeechRecognition from 'beautiful-react-hooks/useSpeechRecognition';

const SpeechSynthesisDemo = () => {
  const [name, setName] = React.useState('Antonio');
  const { startRecording, transcript, stopRecording, isRecording, isSupported } = useSpeechRecognition();

  return (
    <DisplayDemo title="useSpeechSynthesis">
      <Space direction="vertical">
        <Typography.Paragraph>
          Supported: <Tag color={isSupported ? 'green' : 'red'}>{isSupported ? 'Yes' : 'No'}</Tag>
        </Typography.Paragraph>
        <Button onClick={!isRecording ? startRecording : stopRecording} type="primary">
          {isRecording ? 'Stop' : 'Start'} recording
        </Button>
        <Typography.Paragraph>
          {transcript}
        </Typography.Paragraph>
      </Space>
    </DisplayDemo>
  );
};

<SpeechSynthesisDemo />