@speechly/browser-client

Complete your touch user interface with voice

Speechly website   |   Docs   |   Blog

speechly-browser-client

This repository contains source code for the browser client for Speechly SLU API.

NOTE: If you are using React, you can use React client instead.

Usage

Install the package:

# Using Yarn
yarn add @speechly/browser-client

# Using NPM
npm install --save @speechly/browser-client

Start using the client:

import { Client, Segment } from '@speechly/browser-client'

// Create a new Client. appId is configured in the dashboard.
const client = new Client({
  appId: 'your-app-id',
})

// Also Client can be created with a projectId
const client = new Client({
  projectId: 'your-project-id',
})

// Initialize the client - this will ask the user for microphone permissions and establish the connection to Speechly API.
// Make sure you call `initlialize` from a user action handler (e.g. from a button press handler).
await client.initialize()

// 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.
// Ideally this should be bound to e.g. a button press.
await client.startContext()

// If Client been created with a projectId then call the function with an appId
await client.startContext('your-app-id)

// Stop recording after a timeout.
// Ideally this should be bound to e.g. a button press.
setTimeout(async function() {
  await client.stopContext()
}, 3000)

Check out the browser-client-example repository for a demo app built using this client.

Documentation

You can find the detailed API documentation in GitHub repository. You can also refer to Speechly Docs for more information.

Client states

Contributing

See contribution guide in CONTRIBUTING.md.

About Speechly

Speechly is a developer tool for building real-time multimodal voice user interfaces. It enables developers and designers to enhance their current touch user interface with voice functionalities for better user experience. Speechly key features:

Speechly key features

• Fully streaming API
• Multi modal from the ground up
• Easy to configure for any use case
• Fast to integrate to any touch screen application
• Supports natural corrections such as "Show me red – i mean blue t-shirts"
• Real time visual feedback encourages users to go on with their voice

Example application	Description
	Instead of using buttons, input fields and dropdowns, Speechly enables users to interact with the application by using voice. User gets real-time visual feedback on the form as they speak and are encouraged to go on. If there's an error, the user can either correct it by using traditional touch user interface or by voice.