Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@speechly/browser-client

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@speechly/browser-client

Browser client for Speechly API

2.2.1
Source
npm

Version published: 2 years ago

Weekly downloads: 917; decreased by-9.83%

Maintainers: 6

Weekly downloads

Created: 5 years ago

Source

Real-time automatic speech recognition and natural language understanding tools in one flexible API

Website | Docs | Discussions | Blog | Podcast

Speechly browser client

🚧 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 repository for a demo app built using this client.

NOTE: If you are using React, you can use our React client instead. It provides the same functionalities, but provides a programming model that is idiomatic to React.

API Documentation

API documentation (TypeDoc generated)

Using in web sites built with eg. rollup

Install the package:

# Using Yarn
yarn add @speechly/browser-client

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

Start using the client:

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>
  <body>

    <input id="textBox" type="text" placeholder="Hold to talk..." autofocus />

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

      const widget = document.getElementById("textBox")

      // Create a Speechly client instance.
      // NOTE: Configure and get your appId from https://api.speechly.com/dashboard
      const speechly = new BrowserClient({
        appId: "your-app-id",
        debug: true,
        logSegments: true,
      })
      const microphone = new BrowserMicrophone()

      speechly.onSegmentChange(segment => {
        // Clean up and concatenate words
        let transcript = segment.words
          .map(w => w.value.toLowerCase())
          .join(" ");
        // Add trailing period upon segment end.
        if (segment.isFinal) transcript += ".";
        widget.value = transcript;
      });

      const startListening = async () => {
        if (microphone.mediaStream === undefined) {
          await microphone.initialize()
          speechly.attach(microphone.mediaStream)
        }
        return speechly.start();
      }

      const stopListening = async () => {
        if (speechly.isActive()) {
          return speechly.stop();
        }
      }

      // Bind start listening to a widget hold, release anywhere to stop
      widget.addEventListener("mousedown", startListening)
      document.addEventListener("mouseup", stopListening)
    </script>
  </body>

</html>

Documentation

You can find the detailed browser-client API documentation in the GitHub repository.

You can also refer to Speechly Docs for more information.

Contributing

See contribution guide in CONTRIBUTING.md.

Keywords

FAQs

What is @speechly/browser-client?

Is @speechly/browser-client popular?

Is @speechly/browser-client well maintained?

Package last updated on 02 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install