Research
Security News
Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
web-speech-cognitive-services
Advanced tools
Polyfill Web Speech API with Cognitive Services Speech-to-Text service
Polyfill Web Speech API with Cognitive Services Bing Speech for both speech-to-text and text-to-speech service.
This scaffold is provided by react-component-template
.
Try out our demo at https://compulim.github.io/web-speech-cognitive-services?s=your-subscription-key.
We use react-dictate-button
and react-say
to quickly setup the playground.
Web Speech API is not widely adopted on popular browsers and platforms. Polyfilling the API using cloud services is a great way to enable wider adoption. Nonetheless, Web Speech API in Google Chrome is also backed by cloud services.
Microsoft Azure Cognitive Services Bing Speech service provide speech recognition with great accuracy. But unfortunately, the APIs are not based on Web Speech API.
This package will polyfill Web Speech API by turning Cognitive Services Bing Speech API into Web Speech API. We test this package with popular combination of platforms and browsers.
First, run npm install web-speech-cognitive-services
for latest production build. Or npm install web-speech-cognitive-services@master
for latest development build.
import { SpeechRecognition, SubscriptionKey } from 'web-speech-cognitive-services';
const recognition = new SpeechRecognition();
recognition.lang = 'en-US';
recognition.speechToken = new SubscriptionKey('your subscription key');
recognition.onresult = ({ results }) => {
console.log(results);
};
recognition.start();
Note: most browsers requires HTTPS or
localhost
for WebRTC.
You can use react-dictate-button
to integrate speech recognition functionality to your React app.
import { SpeechGrammarList, SpeechRecognition, SubscriptionKey } from 'web-speech-cognitive-services';
import DictateButton from 'react-dictate-button';
const extra = { subscriptionKey: new SubscriptionKey('your subscription key') };
export default props =>
<DictateButton
extra={ extra }
onDictate={ ({ result }) => alert(result.transcript) }
speechGrammarList={ SpeechGrammarList }
speechRecognition={ SpeechRecognition }
>
Start dictation
</DictateButton>
You can also look at our playground page to see how it works.
You can prime the speech recognition by giving a list of words.
Since Cognitive Services does not works with weighted grammars, we built another SpeechGrammarList
to better fit the scenario.
import { SpeechGrammarList, SpeechRecognition, SubscriptionKey } from 'web-speech-cognitive-services';
const recognition = new SpeechRecognition();
recognition.grammars = new SpeechGrammarList();
recognition.grammars.words = ['Tuen Mun', 'Yuen Long'];
recognition.speechToken = new SubscriptionKey('your subscription key');
recognition.onresult = ({ results }) => {
console.log(results);
};
recognition.start();
Note: you can also pass
grammars
toreact-dictate-button
viaextra
props.
import { speechSynthesis, SpeechSynthesisUtterance, SubscriptionKey } from 'web-speech-cognitive-services';
const subscriptionKey = new SubscriptionKey('your subscription key');
const utterance = new SpeechSynthesisUtterance('Hello, World!');
speechSynthesis.speechToken = subscriptionKey;
// Need to wait until token exchange is complete before speak
await subscriptionKey.authorized;
await speechSynthesis.speak(utterance);
Note:
speechSynthesis
is camel-casing because it is an instance.
pitch
, rate
, voice
, and volume
are supported. Only onstart
, onerror
, and onend
events are supported.
You can use react-say
to integrate speech synthesis functionality to your React app.
import { speechSynthesis, SpeechSynthesisUtterance, SubscriptionKey } from 'web-speech-cognitive-services';
import React from 'react';
import Say from 'react-say';
export default class extends React.Component {
constructor(props) {
super(props);
speechSynthesis.speechToken = new SubscriptionKey('your subscription key');
speechSynthesis.speechToken.authorized.then(() => this.setState(() => ({ ready: true })));
this.state = { ready: false };
}
render() {
return (
this.state.ready &&
<Say
speechSynthesis={ speechSynthesis }
speechSynthesisUtterance={ SpeechSynthesisUtterance }
text="Hello, World!"
/>
);
}
}
For detailed test matrix, please refer to SPEC-RECOGNITION.md
or SPEC-SYNTHESIS.md
.
0.5
for interim resultsonboundary
, onmark
, onpause
, and onresume
are not supported/firedstop()
function
abort()
is supportedmicrosoft-speech-browser-sdk@0.0.12
, tracking on this issuepause
/resume
supportpaused
/pending
/speaking
supportLike us? Star us.
Want to make it better? File us an issue.
Don't like something you see? Submit a pull request.
FAQs
Polyfill Web Speech API with Cognitive Services Speech-to-Text service
The npm package web-speech-cognitive-services receives a total of 6,189 weekly downloads. As such, web-speech-cognitive-services popularity was classified as popular.
We found that web-speech-cognitive-services demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.