Package Exports

@speechly/browser-client
@speechly/browser-client/core/speechly.es.js
@speechly/browser-client/core/speechly.umd.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@speechly/browser-client) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

speechly-logo-duo-black

Website · Docs · Support · Blog · Login

Speechly Browser Client

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

If you are using React, you can use the Speechly React Client instead. It provides the same functionalities, but provides a programming model that is idiomatic to React.

Documentation

Install

Using npm:

npm install @speechly/browser-client

Using yarn:

yarn add @speechly/browser-client

Using unpkg CDN:

<script type="module">
  import { BrowserClient, BrowserMicrophone } from "//unpkg.com/@speechly/browser-client?module=true"
</script>

Usage

Create new BrowserMicrophone and BrowserClient instances:

import { BrowserClient, BrowserMicrophone } from '@speechly/browser-client';

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

const microphone = new BrowserMicrophone();
const client = new BrowserClient({
  appId: 'YOUR-APP-ID',
  logSegments: true,
  debug: true,
});

Capture browser microphone audio:

const myButton = document.getElementById('myButton');

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

const attachMicrophone = async () => {
  if (microphone.mediaStream) return;
  await microphone.initialize();
  await client.attach(microphone.mediaStream);
};

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

myButton.addEventListener('click', handleClick);

React to API updates:

// 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.

client.onSegmentChange((segment) => {
  console.log('Tentative segment:', segment)
  if (segment.isFinal) {
    console.log('Final segment:', segment)
  }
})

Contributing

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