![\"Logo\"](\"https://raw.githubusercontent.com/OvidijusParsiunas/speech-to-element/HEAD/assets/banner-white.png\")
\n\nSpeech To Element is an all purpose [npm](https://www.npmjs.com/package/speech-to-element) library that can transcribe speech into text right out of the box! Try it out in the [official website](https://speechtoelement.com).\n\n### :zap: Services\n\n- [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)\n- [Azure Cognitive Speech Services API](https://learn.microsoft.com/en-us/azure/ai-services/speech-service/speech-to-text)\n\nhttps://github.com/OvidijusParsiunas/speech-to-element/assets/18709577/e2e618f8-b61c-4877-804b-26eeefbb0afa\n\n### :computer: How to use\n\n[NPM](https://www.npmjs.com/package/speech-to-element):\n\n```\nnpm install speech-to-element\n```\n\n```\nimport SpeechToElement from 'speech-to-element';\n\nconst targetElement = document.getElementById('target-element');\nSpeechToElement.toggle('webspeech', {element: targetElement});\n```\n\n[CDN](https://cdn.jsdelivr.net/gh/ovidijusparsiunas/speech-to-element@master/component/bundle/index.min.js):\n\n```\n\n```\n\n```\nconst targetElement = document.getElementById('target-element');\nwindow.SpeechToElement.toggle('webspeech', {element: targetElement});\n```\n\nWhen using Azure, you will also need to install its speech [SDK](https://www.npmjs.com/package/microsoft-cognitiveservices-speech-sdk). Read more in the [Azure SDK](#floppy_disk-azure-sdk) section. \n\n##### AutoLanguage:\n\nObject used to configure automatic [language identification](https://learn.microsoft.com/en-us/azure/ai-services/speech-service/language-identification) based on a list of candidate `languages`:\n\n| Name | Type | Description |\n| :-------- | :-------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| languages | `string[]` | An array of candidate languages that that will be present in the audio. See available languages [here](https://learn.microsoft.com/en-us/azure/ai-services/speech-service/language-support?tabs=language-identification). Need at least 1 language. When using `AtStart`, the maximum number of languages is 4, when using `Continuous` the maximum is 10. |\n| type | `'AtStart' \\| 'Continuous'` | Optional property that defines if the language can be identified in the first 5 seconds and does not change via `AtStart`, or if there can be multiple languages throughout the speech via `Continuous`. `AtStart` set by default. |\n\n
\n\nExample server templates for the `retrieveToken` property:\n\n| Express | Nest | Flask | Spring | Go | Next |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n|
![](\"https://raw.githubusercontent.com/OvidijusParsiunas/speech-to-element/HEAD/assets/expressLogo.png\")
| ![](\"https://raw.githubusercontent.com/OvidijusParsiunas/speech-to-element/HEAD/assets/nestLogo.png\")
| ![](\"https://raw.githubusercontent.com/OvidijusParsiunas/speech-to-element/HEAD/assets/flaskLogo.png\")
| ![](\"https://raw.githubusercontent.com/OvidijusParsiunas/speech-to-element/HEAD/assets/springBootLogo.png\")
| ![](\"https://raw.githubusercontent.com/OvidijusParsiunas/speech-to-element/HEAD/assets/goLogo.png\")
| ![](\"https://raw.githubusercontent.com/OvidijusParsiunas/speech-to-element/HEAD/assets/nextLogo.png\")
|\n\n\n\nLocation of `subscriptionKey` and `region` details in Azure Portal:\n\n
![\"Credentials](\"https://raw.githubusercontent.com/OvidijusParsiunas/speech-to-element/HEAD/assets/azure-credentials.png\")
\n\n\n\n### :floppy_disk: Azure SDK\n\nTo use the [Azure Cognitive Speech Services API](https://learn.microsoft.com/en-us/azure/ai-services/speech-service/speech-to-text), you will need to add the official [Azure Speech SDK](https://www.npmjs.com/package/microsoft-cognitiveservices-speech-sdk) into your project and assign it to the `window.SpeechSDK` variable. Here are some simple ways you can achieve this:\n\n- Import from a dependancy:\n If you are using a dependancy manager, import and assign it to window.SpeechSDK:\n\n ```\n import * as sdk from 'microsoft-cognitiveservices-speech-sdk';\n window.SpeechSDK = sdk;\n ```\n\n- Dynamic import from a dependancy\n If you are using a dependancy manager, dynamically import and assign it to window.SpeechSDK:\n\n ```\n import('microsoft-cognitiveservices-speech-sdk').then((module) => {\n window.SpeechSDK = module;\n });\n ```\n\n- Script from a CDN\n You can add a script tag to your markup or create one via javascript. The window.SpeechSDK property will be populated automatically:\n\n ```\n \n\n const script = document.createElement(\"script\");\n script.src = \"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js\";\n document.body.appendChild(script);\n ```\n\nIf your project is using `TypeScript`, add this to the file where the module is used:\n\n```\nimport * as sdk from 'microsoft-cognitiveservices-speech-sdk';\ndeclare global {\n interface Window {\n SpeechSDK: typeof sdk;\n }\n}\n```\n\nExamples:\n\nExample React project that uses a package bundler. It should work similarly for other UI frameworks:\n\n[Click for Live Example](https://stackblitz.com/edit/stackblitz-starters-ujkq7j?file=src%2FApp.tsx)\n\nVanillaJS approach with no bundler (this can also be used as fallback if above doesn't work):\n\n[Click for Live Example](https://codesandbox.io/s/speech-to-element-azure-vanillajs-gvj9v4?file=/index.html)\n\n## :star: Example Product\n\n[Deep Chat](https://deepchat.dev/) - an AI oriented chat component that is using Speech To Element to power its Speech To Text capabilities.\n\n## :heart: Contributions\n\nOpen source is built by the community for the community. All contributions to this project are welcome!
\nAdditionally, if you have any suggestions for enhancements, ideas on how to take the project further or have discovered a bug, do not hesitate to create a new issue ticket and we will look into it as soon as possible!\n","readmeFilename":"README.md"}