Speechly React Client

!build

Add voice features to any React app with Speechly React Client. It handles authentication, audio capture, network streaming and connection management with the Speechly Streaming API.

Documentation

- Getting started with Speechly
- Building a React app using Speechly React Client
- View example application
- API reference

Install

Using npm:

``bash
npm install @speechly/react-client
`

Using yarn:

`bash
yarn add @speechly/react-client
`

Usage

Wrap your app with the SpeechProvider context provider:

`jsx
import { SpeechProvider } from '@speechly/react-client';

// Get your App ID from Speechly Dashboard (https://api.speechly.com/dashboard/)
// or by using Speechly CLI list command.

appId="YOUR-APP-ID"
debug
logSegments
>


`

Capture browser microphone audio:

`jsx
import { useSpeechContext } from '@speechly/react-client';

function App() {
const { listening, segment, attachMicrophone, start, stop } = useSpeechContext();

// Make sure that you call attachMicrophone from a user initiated
// action handler, like a button press.

const handleClick = async () => {
if (listening) {
await stop();
} else {
await attachMicrophone();
await start();
}
};

return (

Start/stop microphone

);
}
`

React to API updates:

`jsx
// Use segment.isFinal to check the segment state. When false,the segment might
// be updated several times. When true, the segment won’t be updated anymore and
// subsequent callbacks within the same audio context refer to the next segment.

useEffect(() => {
if (segment) {
console.log('Tentative segment:', segment)
if (segment.isFinal) {
console.log('Final segment:', segment)
}
}
}, [segment]);
``

Contributing

- See contribution guide in CONTRIBUTING.md.
- Ask questions on GitHub Discussions