@speechly/browser-client
Advanced tools
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.
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. NOTE: Configure and get your appId from https://api.speechly.com/dashboard
const client = new Client({appId: 'your-app-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()
// Stop recording after a timeout.
// Ideally this should be bound to e.g. a button press.
setTimeout(async function() {
await client.stopContext()
}, 3000)
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 { Client, ClientState } from "https://unpkg.com/@speechly/browser-client/core/speechly.es.js"
const widget = document.getElementById("textBox")
let clientState = ClientState.Disconnected;
// Create a Speechly client instance. NOTE: Configure and get your appId from https://api.speechly.com/dashboard
const client = new Client({
appId: "your-app-id",
debug: true,
logSegments: true,
})
client.onStateChange(state => {
clientState = state;
});
client.onSegmentChange(segment => {
// Clean up and concatenate words
let transcript = segment.words.map(w => w.value.toLowerCase()).filter(w => w !== "").join(" ");
// Add trailing period upon segment end.
if (segment.isFinal) transcript += ".";
widget.value = transcript;
});
const startListening = async () => {
switch (clientState) {
case ClientState.Disconnected:
await client.initialize();
// fall through
case ClientState.Connected:
widget.value = "Listening..."
client.startContext();
break;
}
}
const stopListening = () => {
switch (clientState) {
case ClientState.Starting:
case ClientState.Recording:
client.stopContext();
break;
}
}
// Bind start listening to a widget hold, release anywhere to stop
widget.addEventListener("mousedown", startListening)
document.addEventListener("mouseup", stopListening)
</script>
</body>
</html>
You can find the detailed browser-client API documentation in the GitHub repository.
You can also refer to Speechly Docs for more information.
See contribution guide in CONTRIBUTING.md.
FAQs
JavaScript client for Speechly Streaming API
The npm package @speechly/browser-client receives a total of 877 weekly downloads. As such, @speechly/browser-client popularity was classified as not popular.
We found that @speechly/browser-client demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
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.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."