### Real-time automatic speech recognition and natural language understanding tools in one flexible API
[Website](https://www.speechly.com/)
|
[Docs](https://docs.speechly.com/)
|
[Discussions](https://github.com/speechly/speechly/discussions)
|
[Blog](https://www.speechly.com/blog/)
|
[Podcast](https://anchor.fm/the-speechly-podcast)
---
# Speechly browser client
[](https://badge.fury.io/js/%40speechly%2Fbrowser-client)
[](LICENSE)
> 🚧 Browser Client v2.0 is a breaking change. Read more about the major changes and how to upgrade from our blog: https://speechly.com/blog/speechly-browser-client-v2-released
With the browser-client you can add voice features to any website. It handles authentication, audio capture, network streaming and connection management with the Speechly Voice API.
Check out the [browser-client-example](https://github.com/speechly/speechly/tree/main/examples/browser-client-example) repository for a demo app built using this client.
NOTE: If you are using React, you can use our [React client](https://github.com/speechly/speechly/tree/main/libraries/react-client) instead. It provides the same functionalities, but provides a programming model that is idiomatic to React.
## API Documentation
- [API documentation (TypeDoc generated)](https://github.com/speechly/speechly/blob/main/libraries/browser-client/docs/classes/client.BrowserClient.md)
## Using in web sites built with eg. rollup
Install the package:
```shell
# Using Yarn
yarn add @speechly/browser-client
# Using NPM
npm install --save @speechly/browser-client
```
Start using the client:
```typescript
import { BrowserClient, BrowserMicrophone, Segment } from '@speechly/browser-client'
// Create a new client.
// NOTE: Configure and get your appId from https://api.speechly.com/dashboard
// NOTE: Set vad.enable to true for hands free use
const client = new BrowserClient({
appId: 'your-app-id'
vad: { enabled: false, noiseGateDb: -24.0 }
})
// Create a microphone
const microphone = new BrowserMicrophone()
// Initialize the microphone - this will ask the user for microphone permissions
// and establish the connection to Speechly API.
// Make sure you call `initialize` from a user action handler
// (e.g. from a button press handler).
await microphone.initialize()
// bind the microphone to the client
await client.attach(microphone.mediaStream)
// React to the updates from the API.
client.onSegmentChange((segment: Segment) => {
console.log('Received new segment from the API:',
segment.intent,
segment.entities,
segment.words,
segment.isFinal
)
})
// Start recording.
// This can be bound to e.g. a button press.
await client.start()
// Stop recording after a timeout.
// This can be bound to e.g. a button press.
setTimeout(async function () {
await client.stop()
}, 3000)
```
## Usage in HTML
This sample HTML loads Speechly's `browser-client` ES modules via a CDN that mirrors npm packages. The page displays a text field that you dictate text into. See browser's console log for raw segment feed from Speechly.
Please use a HTML server to view the example. Running it as a file will not work due to browser's security restrictions. For example run `serve .` on command line and open `localhost:3000` in your browser.
```HTML