{"id":18563219,"url":"https://github.com/compulim/web-speech-cognitive-services","last_synced_at":"2026-01-03T00:17:58.080Z","repository":{"id":32654867,"uuid":"138948548","full_name":"compulim/web-speech-cognitive-services","owner":"compulim","description":"Polyfill Web Speech API with Cognitive Services for both speech-to-text and text-to-speech service.","archived":false,"fork":false,"pushed_at":"2025-01-21T09:12:53.000Z","size":61569,"stargazers_count":67,"open_issues_count":19,"forks_count":19,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-17T20:45:37.412Z","etag":null,"topics":["azure","cognitive-services","speech-recognition","speech-synthesis","speech-to-text","text-to-speech"],"latest_commit_sha":null,"homepage":"https://compulim.github.io/web-speech-cognitive-services","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/compulim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-28T00:56:16.000Z","updated_at":"2025-03-13T11:10:32.000Z","dependencies_parsed_at":"2023-02-18T03:16:25.228Z","dependency_job_id":null,"html_url":"https://github.com/compulim/web-speech-cognitive-services","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Fweb-speech-cognitive-services","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Fweb-speech-cognitive-services/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Fweb-speech-cognitive-services/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Fweb-speech-cognitive-services/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/compulim","download_url":"https://codeload.github.com/compulim/web-speech-cognitive-services/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253684403,"owners_count":21947297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["azure","cognitive-services","speech-recognition","speech-synthesis","speech-to-text","text-to-speech"],"created_at":"2024-11-06T22:12:05.603Z","updated_at":"2025-12-24T07:55:44.132Z","avatar_url":"https://github.com/compulim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# web-speech-cognitive-services\n\nWeb Speech API adapter to use Cognitive Services Speech Services for both speech-to-text and text-to-speech service.\n\n[![npm version](https://badge.fury.io/js/web-speech-cognitive-services.svg)](https://badge.fury.io/js/web-speech-cognitive-services) [![Build Status](https://travis-ci.org/compulim/web-speech-cognitive-services.svg?branch=master)](https://travis-ci.org/compulim/web-speech-cognitive-services)\n\n# Description\n\nSpeech technologies enables a lot of interesting scenarios, including Intelligent Personal Assistant and provide alternative inputs for assistive technologies.\n\nAlthough 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.\n\nThis 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.\n\n# Demo\n\n\u003e Before getting started, please obtain a Cognitive Services subscription key from your Azure subscription.\n\nTry 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.\n\nWe 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.\n\n## Browser requirements\n\nSpeech 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.\n\n### Special requirement for Safari\n\nSpeech 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.\n\n# How to use\n\nThere are two ways to use this package:\n\n1. [Using `\u003cscript\u003e` to load the bundle](#using-script-to-load-the-bundle)\n1. [Install from NPM](#install-from-npm)\n\n## Using `\u003cscript\u003e` to load the bundle\n\nTo use the ponyfill directly in HTML, you can use our published bundle from unpkg.\n\nIn the sample below, we use the bundle to perform text-to-speech with a voice named \"Aria24kRUS\".\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en-US\"\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://unpkg.com/web-speech-cognitive-services/umd/web-speech-cognitive-services.production.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript\u003e\n      const { speechSynthesis, SpeechSynthesisUtterance } = window.WebSpeechCognitiveServices.create({\n        credentials: {\n          region: 'westus',\n          subscriptionKey: 'YOUR_SUBSCRIPTION_KEY'\n        }\n      });\n\n      speechSynthesis.addEventListener('voiceschanged', () =\u003e {\n        const voices = speechSynthesis.getVoices();\n        const utterance = new SpeechSynthesisUtterance('Hello, World!');\n\n        utterance.voice = voices.find(voice =\u003e /Aria24kRUS/u.test(voice.name));\n\n        speechSynthesis.speak(utterance);\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003e We do not host the bundle. You should always use [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) to protect bundle integrity when loading from a third-party CDN.\n\nThe `voiceschanged` event come shortly after you created the ponyfill. You will need to wait until the event arrived before able to choose a voice for your utterance.\n\n## Install from NPM\n\nFor production build, run `npm install web-speech-cognitive-services`.\n\nFor development build, run `npm install web-speech-cognitive-services@master`.\n\n\u003e Since [Speech Services SDK](https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/quickstart-js-browser) is not on NPM yet, we will bundle the SDK inside this package for now. When Speech Services SDK release on NPM, we will define it as a peer dependency.\n\n## Polyfilling vs. ponyfilling\n\nIn JavaScript, polyfill is a technique to bring newer features to older environment. Ponyfill is very similar, but instead polluting the environment by default, we prefer to let the developer to choose what they want. This [article](https://ponyfoo.com/articles/polyfills-or-ponyfills) talks about polyfill vs. ponyfill.\n\nIn this package, we prefer ponyfill because it do not pollute the hosting environment. You are also free to mix-and-match multiple speech recognition engines under a single environment.\n\n## Options\n\nThe following list all options supported by the adapter.\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName and type\u003c/th\u003e\n      \u003cth\u003eDefault value\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eaudioConfig:\u0026nbsp;\u003ca href=\"https://docs.microsoft.com/en-us/javascript/api/microsoft-cognitiveservices-speech-sdk/audioconfig?view=azure-node-latest\"\u003eAudioConfig\u003c/a\u003e\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003ca href=\"https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/how-to-select-audio-input-devices#audio-device-ids-in-javascript\"\u003efromDefaultMicrophoneInput()\u003c/a\u003e\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://docs.microsoft.com/en-us/javascript/api/microsoft-cognitiveservices-speech-sdk/audioconfig?view=azure-node-latest\"\u003e\u003ccode\u003eAudioConfig\u003c/code\u003e\u003c/a\u003e object to use with speech recognition. Please refer to \u003ca href=\"https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/how-to-select-audio-input-devices#audio-device-ids-in-javascript\"\u003ethis article\u003c/a\u003e for details on selecting different audio devices.\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003ccode\u003eaudioContext:\u0026nbsp;\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/AudioContext\"\u003eAudioContext\u003c/a\u003e\u003c/code\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        The audio context is synthesizing speech on. If this is \u003ccode\u003eundefined\u003c/code\u003e, the \u003ccode\u003eAudioContext\u003c/code\u003e object will be created on first synthesis.\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003ccode\u003ecredentials:\u0026nbsp;(\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;ICredentials\u0026nbsp;||\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;Promise\u0026lt;ICredentials\u0026gt;\u0026nbsp;||\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;()\u0026nbsp;=\u003e\u0026nbsp;ICredentials\u0026nbsp;||\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;()\u0026nbsp;=\u003e\u0026nbsp;Promise\u0026lt;ICredentials\u0026gt;\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e)\u003c/code\u003e\u003cbr /\u003e\n        \u003cbr /\u003e\n        \u003ccode\u003eICredentials: {\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;authorizationToken: string,\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;region: string\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e} || {\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;region: string,\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;subscriptionKey: string\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e} || {\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;authorizationToken: string,\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;customVoiceHostname?: string,\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;speechRecognitionHostname: string,\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;speechSynthesisHostname: string\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e} || {\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;customVoiceHostname?: string,\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;speechRecognitionHostname: string,\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;speechSynthesisHostname: string,\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e\u0026nbsp;\u0026nbsp;subscriptionKey: string\u003c/code\u003e\u003cbr /\u003e\n        \u003ccode\u003e}\u003c/code\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e(Required)\u003c/td\u003e\n      \u003ctd\u003e\n        Credentials (including Azure region) from Cognitive Services. Please refer to \u003ca href=\"https://docs.microsoft.com/en-us/azure/cognitive-services/authentication\"\u003ethis article\u003c/a\u003e to obtain an authorization token.\u003cbr /\u003e\n        \u003cbr /\u003e\n        Subscription key is not recommended for production use as it will be leaked in the browser.\u003cbr /\u003e\n        \u003cbr /\u003e\n        For sovereign cloud such as Azure Government (United States) and Azure China, instead of specifying \u003ccode\u003eregion\u003c/code\u003e, please specify \u003ccode\u003espeechRecongitionHost\u003c/code\u003e and \u003ccode\u003espeechSynthesisHostname\u003c/code\u003e instead. You can find the \u003ca href=\"https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/sovereign-clouds\"\u003esovereign cloud connection parameters from this article\u003c/a\u003e.\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eenableTelemetry\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Pass-through option to enable or disable telemetry for Speech SDK recognizer as \u003ca href=\"https://github.com/Microsoft/cognitive-services-speech-sdk-js#data--telemetry\"\u003eoutlined in Speech SDK\u003c/a\u003e. This adapter does not collect any telemetry.\u003cbr /\u003e\u003cbr /\u003eBy default, Speech SDK will collect telemetry unless this is set to \u003ccode\u003efalse\u003c/code\u003e.\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003elooseEvents: boolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Specifies if the event order should strictly follow observed browser behavior (\u003ccode\u003efalse\u003c/code\u003e), or loosened behavior (\u003ccode\u003etrue\u003c/code\u003e). Regardless of the option, both behaviors \u003ca href=\"https://wicg.github.io/speech-api/#eventdef-speechrecognition-result\"\u003econform with W3C specifications\u003c/a\u003e.\n        \u003cbr /\u003e\u003cbr /\u003e\n        You can read more about this option in \u003ca href=\"#event-order\"\u003eevent order section\u003c/a\u003e.\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eponyfill.AudioContext:\u0026nbsp;\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/AudioContext\"\u003eAudioContext\u003c/a\u003e\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003ewindow.AudioContext\u0026nbsp;||\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003ewindow.webkitAudioContext\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Ponyfill for Web Audio API.\u003cbr /\u003e\u003cbr /\u003e\n        Currently, only Web Audio API can be ponyfilled. We may expand to WebRTC for audio recording in the future.\u003c/td\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ereferenceGrammars:\u0026nbsp;string[]\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Reference grammar IDs to send for speech recognition.\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003espeechRecognitionEndpointId:\u0026nbsp;string\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Endpoint ID for \u003ca href=\"https://azure.microsoft.com/en-us/services/cognitive-services/custom-speech-service/\"\u003eCustom Speech service\u003c/a\u003e.\n      \u003c/td\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003espeechSynthesisDeploymentId:\u0026nbsp;string\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Deployment ID for \u003ca href=\"https://speech.microsoft.com/customvoice\"\u003eCustom Voice service\u003c/a\u003e.\u003cbr /\u003e\u003cbr /\u003e\n        When you are using Custom Voice, you will need to specify your voice model name through \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice\"\u003e\u003ccode\u003eSpeechSynthesisVoice.voiceURI\u003c/code\u003e\u003c/a\u003e. Please refer to the \u003ca href=\"#custom-voice-support\"\u003e\"Custom Voice support\"\u003c/a\u003e section for details.\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003espeechSynthesisOutputFormat:\u0026nbsp;string\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"audio-24khz-160kbitrate-mono-mp3\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAudio format for speech synthesis. Please refer to \u003ca href=\"https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/rest-text-to-speech#audio-outputs\"\u003ethis article\u003c/a\u003e for list of supported formats.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003etextNormalization:\u0026nbsp;string\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"display\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Supported text normalization options:\u003cbr /\u003e\u003cbr /\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003ccode\u003e\"display\"\u003c/code\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ccode\u003e\"itn\"\u003c/code\u003e (inverse text normalization)\u003c/li\u003e\n          \u003cli\u003e\u003ccode\u003e\"lexical\"\u003c/code\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ccode\u003e\"maskeditn\"\u003c/code\u003e (masked ITN)\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Setting up for sovereign clouds\n\nYou can use the adapter to connect to sovereign clouds, including [Azure Government (United States)](#azure-government-united-states) and [Microsoft Azure China](#microsoft-azure-china).\n\nPlease refer to [this article on limitations](https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/sovereign-clouds) when using Cognitive Services Speech Services on sovereign clouds.\n\n### Azure Government (United States)\n\n```js\ncreatePonyfill({\n  credentials: {\n    authorizationToken: 'YOUR_AUTHORIZATION_TOKEN',\n    speechRecognitionHostname: 'virginia.stt.speech.azure.us',\n    speechSynthesisHostname: 'virginia.tts.speech.azure.us'\n  }\n});\n```\n\n### Microsoft Azure China\n\n```js\ncreatePonyfill({\n  credentials: {\n    authorizationToken: 'YOUR_AUTHORIZATION_TOKEN',\n    speechRecognitionHostname: 'chinaeast2.stt.speech.azure.cn',\n    speechSynthesisHostname: 'chinaeast2.tts.speech.azure.cn'\n  }\n});\n```\n\n# Code snippets\n\n\u003e For readability, we omitted the async function in all code snippets. To run the code, you will need to wrap the code using an async function.\n\n## Speech recognition (speech-to-text)\n\n```jsx\nimport { createSpeechRecognitionPonyfill } from 'web-speech-cognitive-services/lib/SpeechServices/SpeechToText';\n\nconst {\n  SpeechRecognition\n} = await createSpeechRecognitionPonyfill({\n  credentials: {\n    region: 'westus',\n    subscriptionKey: 'YOUR_SUBSCRIPTION_KEY'\n  }\n});\n\nconst recognition = new SpeechRecognition();\n\nrecognition.interimResults = true;\nrecognition.lang = 'en-US';\n\nrecognition.onresult = ({ results }) =\u003e {\n  console.log(results);\n};\n\nrecognition.start();\n```\n\n\u003e Note: most browsers requires HTTPS or `localhost` for WebRTC.\n\n### Integrating with React\n\nYou can use [`react-dictate-button`](https://github.com/compulim/react-dictate-button/) to integrate speech recognition functionality to your React app.\n\n```jsx\nimport createPonyfill from 'web-speech-cognitive-services/lib/SpeechServices';\nimport DictateButton from 'react-dictate-button';\n\nconst {\n  SpeechGrammarList,\n  SpeechRecognition\n} = await createPonyfill({\n  credentials: {\n    region: 'westus',\n    subscriptionKey: 'YOUR_SUBSCRIPTION_KEY'\n  }\n});\n\nexport default props =\u003e\n  \u003cDictateButton\n    onDictate={ ({ result }) =\u003e alert(result.transcript) }\n    speechGrammarList={ SpeechGrammarList }\n    speechRecognition={ SpeechRecognition }\n  \u003e\n    Start dictation\n  \u003c/DictateButton\u003e\n```\n\n## Speech synthesis (text-to-speech)\n\n```jsx\nimport { createSpeechSynthesisPonyfill } from 'web-speech-cognitive-services/lib/SpeechServices/TextToSpeech';\n\nconst {\n  speechSynthesis,\n  SpeechSynthesisUtterance\n} = await createSpeechSynthesisPonyfill({\n  credentials: {\n    region: 'westus',\n    subscriptionKey: 'YOUR_SUBSCRIPTION_KEY'\n  }\n});\n\nspeechSynthesis.addEventListener('voiceschanged', () =\u003e {\n  const voices = speechSynthesis.getVoices();\n  const utterance = new SpeechSynthesisUtterance('Hello, World!');\n\n  utterance.voice = voices.find(voice =\u003e /Aria24kRUS/u.test(voice.name));\n\n  speechSynthesis.speak(utterance);\n});\n```\n\n\u003e Note: `speechSynthesis` is camel-casing because it is an instance.\n\n\u003e List of supported regions can be found in [this article](https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/rest-apis#text-to-speech-api).\n\n`pitch`, `rate`, `voice`, and `volume` are supported. Only `onstart`, `onerror`, and `onend` events are supported.\n\n### Integrating with React\n\nYou can use [`react-say`](https://github.com/compulim/react-say/) to integrate speech synthesis functionality to your React app.\n\n```jsx\nimport createPonyfill from 'web-speech-cognitive-services/lib/SpeechServices';\nimport React, { useEffect, useState } from 'react';\nimport Say from 'react-say';\n\nexport default () =\u003e {\n  const [ponyfill, setPonyfill] = useState();\n\n  useEffect(async () =\u003e {\n    setPonyfill(await createPonyfill({\n      credentials: {\n        region: 'westus',\n        subscriptionKey: 'YOUR_SUBSCRIPTION_KEY'\n      }\n    }));\n  }, [setPonyfill]);\n\n  return (\n    ponyfill \u0026\u0026\n      \u003cSay\n        speechSynthesis={ ponyfill.speechSynthesis }\n        speechSynthesisUtterance={ ponyfill.SpeechSynthesisUtterance }\n        text=\"Hello, World!\"\n      /\u003e\n  );\n};\n```\n\n## Using authorization token\n\nInstead of exposing subscription key on the browser, we strongly recommend using authorization token.\n\n```jsx\nimport createPonyfill from 'web-speech-cognitive-services/lib/SpeechServices';\n\nconst ponyfill = await createPonyfill({\n  credentials: {\n    authorizationToken: 'YOUR_AUTHORIZATION_TOKEN',\n    region: 'westus'\n  }\n});\n```\n\nYou can also provide an async function that will fetch the authorization token and Azure region on-demand. You should cache the authorization token for subsequent request. For simplicity of this code snippets, we are not caching the result.\n\n```jsx\nimport createPonyfill from 'web-speech-cognitive-services/lib/SpeechServices';\n\nconst ponyfill = await createPonyfill({\n  credentials: () =\u003e fetch('https://example.com/your-token').then(res =\u003e ({\n    authorizationToken: res.text(),\n    region: 'westus'\n  }))\n});\n```\n\n\u003e List of supported regions can be found in [this article](https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/rest-apis#regions-and-endpoints).\n\n## Lexical and ITN support\n\n[Lexical and ITN support](https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/rest-apis#response-parameters) is unique in Cognitive Services Speech Services. Our adapter added additional properties `transcriptITN`, `transcriptLexical`, and `transcriptMaskedITN` to surface the result, in addition to `transcript` and `confidence`.\n\n## Biasing towards some words for recognition\n\nIn some cases, you may want the speech recognition engine to be biased towards \"Bellevue\" because it is not trivial for the engine to recognize between \"Bellevue\", \"Bellview\" and \"Bellvue\" (without \"e\"). By giving a list of words, teh speech recognition engine will be more biased to your choice of words.\n\nSince Cognitive Services does not works with weighted grammars, we built another `SpeechGrammarList` to better fit the scenario.\n\n```jsx\nimport createPonyfill from 'web-speech-cognitive-services/lib/SpeechServices';\n\nconst {\n  SpeechGrammarList,\n  SpeechRecognition\n} = await createPonyfill({\n  credentials: {\n    region: 'westus',\n    subscriptionKey: 'YOUR_SUBSCRIPTION_KEY'\n  }\n});\n\nconst recognition = new SpeechRecognition();\n\nrecognition.grammars = new SpeechGrammarList();\nrecognition.grammars.phrases = ['Tuen Mun', 'Yuen Long'];\n\nrecognition.onresult = ({ results }) =\u003e {\n  console.log(results);\n};\n\nrecognition.start();\n```\n\n## Custom Speech support\n\n\u003e Please refer to [\"What is Custom Speech?\"](https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/how-to-custom-speech) for tutorial on creating your first Custom Speech model.\n\nTo use custom speech for speech recognition, you need to pass the endpoint ID while creating the ponyfill.\n\n```js\nimport createPonyfill from 'web-speech-cognitive-services/lib/SpeechServices';\n\nconst ponyfill = await createPonyfill({\n  credentials: {\n    region: 'westus',\n    subscriptionKey: 'YOUR_SUBSCRIPTION_KEY'\n  },\n  speechRecognitionEndpointId: '12345678-1234-5678-abcd-12345678abcd',\n});\n```\n\n## Custom Voice support\n\n\u003e Please refer to [\"Get started with Custom Voice\"](https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/how-to-custom-voice) for tutorial on creating your first Custom Voice model.\n\nTo use Custom Voice for speech synthesis, you need to pass the deployment ID while creating the ponyfill, and pass the voice model name as voice URI.\n\n```js\nimport createPonyfill from 'web-speech-cognitive-services/lib/SpeechServices';\n\nconst ponyfill = await createPonyfill({\n  credentials: {\n    region: 'westus',\n    subscriptionKey: 'YOUR_SUBSCRIPTION_KEY'\n  },\n  speechSynthesisDeploymentId: '12345678-1234-5678-abcd-12345678abcd',\n});\n\nconst { speechSynthesis, SpeechSynthesisUtterance } = ponyfill;\n\nconst utterance = new SpeechSynthesisUtterance('Hello, World!');\n\nutterance.voice = { voiceURI: 'your-model-name' };\n\nawait speechSynthesis.speak(utterance);\n```\n\n## Event order\n\nAccording to [W3C specifications](https://wicg.github.io/speech-api/#eventdef-speechrecognition-result), the `result` event can be fire at any time after `audiostart` event.\n\nIn continuous mode, finalized `result` event will be sent as early as possible. But in non-continuous mode, we observed browsers send finalized `result` event just before `audioend`, instead of as early as possible.\n\nBy default, we follow event order observed from browsers (a.k.a. strict event order). For a speech recognition in non-continuous mode and with interims, the observed event order will be:\n\n1. `start`\n1. `audiostart`\n1. `soundstart`\n1. `speechstart`\n1. `result` (these are interim results, with `isFinal` property set to `false`)\n1. `speechend`\n1. `soundend`\n1. `audioend`\n1. `result` (with `isFinal` property set to `true`)\n1. `end`\n\nYou can loosen event order by setting `looseEvents` to `true`. For the same scenario, the event order will become:\n\n1. `start`\n1. `audiostart`\n1. `soundstart`\n1. `speechstart`\n1. `result` (these are interim results, with `isFinal` property set to `false`)\n1. `result` (with `isFinal` property set to `true`)\n1. `speechend`\n1. `soundend`\n1. `audioend`\n1. `end`\n\nFor `error` events (abort, `\"no-speech\"` or other errors), we always sent it just before the last `end` event.\n\nIn some cases, loosening event order may improve recognition performance. This will not break conformance to W3C standard.\n\n# Test matrix\n\nFor detailed test matrix, please refer to [`SPEC-RECOGNITION.md`](SPEC-RECOGNITION.md) or [`SPEC-SYNTHESIS.md`](SPEC-SYNTHESIS.md).\n\n# Known issues\n\n* Speech recognition\n   * Interim results do not return confidence, final result do have confidence\n      * We always return `0.5` for interim results\n   * Cognitive Services support grammar list but not in JSGF format, more work to be done in this area\n      * Although Google Chrome support grammar list, it seems the grammar list is not used at all\n* Speech synthesis\n   * `onboundary`, `onmark`, `onpause`, and `onresume` are not supported/fired\n   * `pause` will pause immediately and do not pause on word breaks due to lack of boundary\n\n# Roadmap\n\n* Speech recognition\n   * [x] Add tests for lifecycle events\n   * [x] Support `stop()` and `abort()` function\n   * [x] Add dynamic phrases\n   * [x] Add reference grammars\n   * [x] Add continuous mode\n   * [ ] ~Investigate support of Opus (OGG) encoding~\n      * Currently, there is a problem with `microsoft-speech-browser-sdk@0.0.12`, tracking on [this issue](https://github.com/Azure-Samples/SpeechToText-WebSockets-Javascript/issues/88)\n   * [x] Support custom speech\n   * [x] Support ITN, masked ITN, and lexical output\n* Speech synthesis\n   * [x] Event: add `pause`/`resume` support\n   * [x] Properties: add `paused`/`pending`/`speaking` support\n   * [x] Support [custom voice fonts](https://docs.microsoft.com/en-us/azure/cognitive-services/speech-service/rest-apis#text-to-speech-api)\n\n# Contributions\n\nLike us? [Star](https://github.com/compulim/web-speech-cognitive-services/stargazers) us.\n\nWant to make it better? [File](https://github.com/compulim/web-speech-cognitive-services/issues) us an issue.\n\nDon't like something you see? [Submit](https://github.com/compulim/web-speech-cognitive-services/pulls) a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompulim%2Fweb-speech-cognitive-services","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcompulim%2Fweb-speech-cognitive-services","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompulim%2Fweb-speech-cognitive-services/lists"}