https://github.com/compulim/web-speech-cognitive-services
Polyfill Web Speech API with Cognitive Services for both speech-to-text and text-to-speech service.
https://github.com/compulim/web-speech-cognitive-services
azure cognitive-services speech-recognition speech-synthesis speech-to-text text-to-speech
Last synced: 7 months ago
JSON representation
Polyfill Web Speech API with Cognitive Services for both speech-to-text and text-to-speech service.
- Host: GitHub
- URL: https://github.com/compulim/web-speech-cognitive-services
- Owner: compulim
- License: mit
- Created: 2018-06-28T00:56:16.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2025-01-21T09:12:53.000Z (over 1 year ago)
- Last Synced: 2025-04-17T20:45:37.412Z (over 1 year ago)
- Topics: azure, cognitive-services, speech-recognition, speech-synthesis, speech-to-text, text-to-speech
- Language: JavaScript
- Homepage: https://compulim.github.io/web-speech-cognitive-services
- Size: 58.7 MB
- Stars: 67
- Watchers: 3
- Forks: 19
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# web-speech-cognitive-services
Web Speech API adapter to use Cognitive Services Speech Services for both speech-to-text and text-to-speech service.
[](https://badge.fury.io/js/web-speech-cognitive-services) [](https://travis-ci.org/compulim/web-speech-cognitive-services)
# Description
Speech technologies enables a lot of interesting scenarios, including Intelligent Personal Assistant and provide alternative inputs for assistive technologies.
Although W3C standardized speech technologies in browser, speech-to-text and text-to-speech support are still scarce. However, cloud-based speech technologies are very mature.
This polyfill provides W3C [Speech Recognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) and [Speech Synthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis) API in browser by using [Azure Cognitive Services Speech Services](https://azure.microsoft.com/en-us/services/cognitive-services/speech-services/). This will bring speech technologies to all modern first-party browsers available on both PC and mobile platforms.
# Demo
> Before getting started, please obtain a Cognitive Services subscription key from your Azure subscription.
Try out our demo at https://compulim.github.io/web-speech-cognitive-services. If you don't have a subscription key, you can still try out our demo in a speech-supported browser.
We use [`react-dictate-button`](https://github.com/compulim/react-dictate-button/) and [`react-say`](https://github.com/compulim/react-say/) to quickly setup the playground.
## Browser requirements
Speech recognition requires WebRTC API and the page must hosted thru HTTPS or `localhost`. Although iOS 12 support WebRTC, native apps using `WKWebView` do not support WebRTC.
### Special requirement for Safari
Speech synthesis requires Web Audio API. For Safari, user gesture (click or tap) is required to play audio clips using Web Audio API. To ready the Web Audio API to use without user gesture, you can synthesize an empty string, which will not trigger any network calls but playing an empty hardcoded short audio clip. If you already have a "primed" `AudioContext` object, you can also pass it as an option.
# How to use
There are two ways to use this package:
1. [Using `` to load the bundle](#using-script-to-load-the-bundle)
1. [Install from NPM](#install-from-npm)
## Using `<script>` to load the bundle
To use the ponyfill directly in HTML, you can use our published bundle from unpkg.
In the sample below, we use the bundle to perform text-to-speech with a voice named "Aria24kRUS".
```html
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://unpkg.com/web-speech-cognitive-services/umd/web-speech-cognitive-services.production.min.js">
const { speechSynthesis, SpeechSynthesisUtterance } = window.WebSpeechCognitiveServices.create({
credentials: {
region: 'westus',
subscriptionKey: 'YOUR_SUBSCRIPTION_KEY'
}
});
speechSynthesis.addEventListener('voiceschanged', () => {
const voices = speechSynthesis.getVoices();
const utterance = new SpeechSynthesisUtterance('Hello, World!');
utterance.voice = voices.find(voice => /Aria24kRUS/u.test(voice.name));
speechSynthesis.speak(utterance);
});