speechrecognition js

JavaScript Speech Recognition Example (Speech to Text)

With the Web Speech API, we can recognize speech using JavaScript . It is super easy to recognize speech in a browser using JavaScript and then getting the text from the speech to use as user input. We have already covered How to convert Text to Speech in Javascript .

But the support for this API is limited to the Chrome browser only . So if you are viewing this example in some other browser, the live example below might not work.

This tutorial will cover a basic example where we will cover speech to text. We will ask the user to speak something and we will use the SpeechRecognition object to convert the speech into text and then display the text on the screen.

The Web Speech API of Javascript can be used for multiple other use cases. We can provide a list of rules for words or sentences as grammar using the SpeechGrammarList object, which will be used to recognize and validate user input from speech.

For example, consider that you have a webpage on which you show a Quiz, with a question and 4 available options and the user has to select the correct option. In this, we can set the grammar for speech recognition with only the options for the question, hence whatever the user speaks, if it is not one of the 4 options, it will not be recognized.

We can use grammar, to define rules for speech recognition, configuring what our app understands and what it doesn't understand.

JavaScript Speech to Text

In the code example below, we will use the SpeechRecognition object. We haven't used too many properties and are relying on the default values. We have a simple HTML webpage in the example, where we have a button to initiate the speech recognition.

The main JavaScript code which is listening to what user speaks and then converting it to text is this:

In the above code, we have used:

recognition.start() method is used to start the speech recognition.

Once we begin speech recognition, the onstart event handler can be used to inform the user that speech recognition has started and they should speak into the mocrophone.

When the user is done speaking, the onresult event handler will have the result. The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object. The SpeechRecognitionResultList object contains SpeechRecognitionResult objects. It has a getter so it can be accessed like an array. The first [0] returns the SpeechRecognitionResult at the last position. Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results. These also have getters so they can be accessed like arrays. The second [0] returns the SpeechRecognitionAlternative at position 0 . We then return the transcript property of the SpeechRecognitionAlternative object.

Same is done for the confidence property to get the accuracy of the result as evaluated by the API.

We have many event handlers, to handle the events surrounding the speech recognition process. One such event is onspeechend , which we have used in our code to call the stop() method of the SpeechRecognition object to stop the recognition process.

Now let's see the running code:

When you will run the code, the browser will ask for permission to use your Microphone , so please click on Allow and then speak anything to see the script in action.

Conclusion:

So in this tutorial we learned how we can use Javascript to write our own small application for converting speech into text and then displaying the text output on screen. We also made the whole process more interactive by using the various event handlers available in the SpeechRecognition interface. In future I will try to cover some simple web application ideas using this feature of Javascript to help you usnderstand where we can use this feature.

If you face any issue running the above script, post in the comment section below. Remember, only Chrome browser supports it .

You may also like:

• JavaScript Window Object
• JavaScript Number Object
• JavaScript Functions
• JavaScript Document Object

IF YOU LIKE IT, THEN SHARE IT

Related posts.

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Chrome for Developers

Voice driven web apps - Introduction to the Web Speech API

The new JavaScript Web Speech API makes it easy to add speech recognition to your web pages. This API allows fine control and flexibility over the speech recognition capabilities in Chrome version 25 and later. Here's an example with the recognized text appearing almost immediately while speaking.

DEMO / SOURCE

Let’s take a look under the hood. First, we check to see if the browser supports the Web Speech API by checking if the webkitSpeechRecognition object exists. If not, we suggest the user upgrades their browser. (Since the API is still experimental, it's currently vendor prefixed.) Lastly, we create the webkitSpeechRecognition object which provides the speech interface, and set some of its attributes and event handlers.

The default value for continuous is false, meaning that when the user stops talking, speech recognition will end. This mode is great for simple text like short input fields. In this demo , we set it to true, so that recognition will continue even if the user pauses while speaking.

The default value for interimResults is false, meaning that the only results returned by the recognizer are final and will not change. The demo sets it to true so we get early, interim results that may change. Watch the demo carefully, the grey text is the text that is interim and does sometimes change, whereas the black text are responses from the recognizer that are marked final and will not change.

To get started, the user clicks on the microphone button, which triggers this code:

We set the spoken language for the speech recognizer "lang" to the BCP-47 value that the user has selected via the selection drop-down list, for example “en-US” for English-United States. If this is not set, it defaults to the lang of the HTML document root element and hierarchy. Chrome speech recognition supports numerous languages (see the “ langs ” table in the demo source), as well as some right-to-left languages that are not included in this demo, such as he-IL and ar-EG.

After setting the language, we call recognition.start() to activate the speech recognizer. Once it begins capturing audio, it calls the onstart event handler, and then for each new set of results, it calls the onresult event handler.

This handler concatenates all the results received so far into two strings: final_transcript and interim_transcript . The resulting strings may include "\n", such as when the user speaks “new paragraph”, so we use the linebreak function to convert these to HTML tags <br> or <p> . Finally it sets these strings as the innerHTML of their corresponding <span> elements: final_span which is styled with black text, and interim_span which is styled with gray text.

interim_transcript is a local variable, and is completely rebuilt each time this event is called because it’s possible that all interim results have changed since the last onresult event. We could do the same for final_transcript simply by starting the for loop at 0. However, because final text never changes, we’ve made the code here a bit more efficient by making final_transcript a global, so that this event can start the for loop at event.resultIndex and only append any new final text.

That’s it! The rest of the code is there just to make everything look pretty. It maintains state, shows the user some informative messages, and swaps the GIF image on the microphone button between the static microphone, the mic-slash image, and mic-animate with the pulsating red dot.

The mic-slash image is shown when recognition.start() is called, and then replaced with mic-animate when onstart fires. Typically this happens so quickly that the slash is not noticeable, but the first time speech recognition is used, Chrome needs to ask the user for permission to use the microphone, in which case onstart only fires when and if the user allows permission. Pages hosted on HTTPS do not need to ask repeatedly for permission, whereas HTTP hosted pages do.

So make your web pages come alive by enabling them to listen to your users!

We’d love to hear your feedback...

• For comments on the W3C Web Speech API specification: email , mailing archive , community group
• For comments on Chrome’s implementation of this spec: email , mailing archive

Refer to the Chrome Privacy Whitepaper to learn how Google is handling voice data from this API.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2013-01-13 UTC.

Member-only story

Perform Speech Recognition in Your Javascript Applications

An introduction to web speech recognition apis.

Jennifer Fu

Better Programming

Speech recognition is an interdisciplinary subfield of computer science and computational linguistics. It recognizes and translates spoken language into text. It is also known as automatic speech recognition (ASR), computer speech recognition, or speech to text (STT).

Machine learning (ML) is an application of artificial intelligence (AI) that provides systems with the ability to automatically learn and improve from experience without being explicitly programmed. Machine learning has provided the majority of speech recognition breakthroughs in this century. Today, speech recognition technology is everywhere, such as Apple Siri , Amazon Echo , and Google Nest .

Speech recognition, along with voice response — also known as speech synthesis, or text to speech (TTS) — is powered by Web speech APIs.

In this article, we focus on speech recognition in JavaScript applications. Speech synthesis is described in another article .

SpeechRecognition Interface

SpeechRecognition is the controller interface for the recognition service. It is called webkitSpeechRecognition in Chrome. SpeechRecognition handles the SpeechRecognitionEvent sent from…

Written by Jennifer Fu

UI tech lead who enjoys cutting-edge technologies https://www.linkedin.com/in/jennifer-fu-53357b/

Text to speech

DEV Community

Posted on Aug 22, 2022 • Updated on Aug 25, 2022

Speech Recognition with JavaScript

Cover image credits: dribbble

Some time ago, speech recognition API was added to the specs and we got partial support on Chrome, Safari, Baidu, android webview, iOS safari, samsung internet and Kaios browsers ( see browser support in detail ).

Disclaimer: This implementation won't work in Opera (as it doesn't support the constructor) and also won't work in FireFox (because it doesn't support a single thing of it) so if you're using one of those, I suggest you to use Chrome -or any other compatible browser- if you want to take a try.

Speech recognition code and PoC

Edit: I realised that for any reason it won't work when embedded so here's the link to open it directly .

The implementation I made currently supports English and Spanish just to showcase.

Quick instructions and feature overview:

• Choose one of the languages from the drop down.
• Hit the mic icon and it will start recording (you'll notice a weird animation).
• Once you finish a sentence it will write it down in the box.
• When you want it to stop recording, simply press the mic again (animation stops).
• You can also hit the box to copy the text in your clipboard.

Speech Recognition in the Browser with JavaScript - key code blocks:

This implementation currently supports the following languages for speech recognition:

If you want me to add support for more languages tell me in the comment sections and I'm updating it in a blink so you can test it on your own language 😁

That's all for today, hope you enjoyed I sure did doing that

Top comments (22)

Templates let you quickly answer FAQs or store snippets for re-use.

• Location İstanbul, Turkey
• Joined Apr 28, 2022

This is really awesome. Could you please add the Turkish language? I would definitely like to try this in my native language and use it in my projects.

• Location Spain
• Education Higher Level Education Certificate on Web Application Development
• Work Tech Lead/Lead Dev
• Joined Apr 19, 2019

• Location 3000
• Work Mr at StartUp
• Joined Aug 17, 2019

It's cool mate. Very good

Thank you! 🤖

Can u add Telugu a Indian language:)

I can try, do you know the IETF/ISO language code for it? 😁

• Location Cyprus
• Work CEO at AINIRO AS
• Joined Mar 13, 2022

Cool. I once created a speech based speech recognition thing based upon MySQL and SoundEx allowing me to create code by speaking through my headphones. It was based upon creating a hierarchical “menu” where I could say “Create button”. Then the machine would respond with “what button”, etc. The thing of course produced Hyperlambda though. I doubt it can be done without meta programming.

One thing that bothers me is that this was 5 years ago, and speech support has basically stood 100% perfectly still in all browsers since then … 😕

Not in all of them, (e.g. Opera mini, FireFox mobile), it's a nice to have in browsers, specially targeting accessibility, but screen readers for blind people do the job and, on the other hand, most implementations for any other purpose send data to a backend using streams so they can process the incoming speech plus use the user feedback to train an IA among others and without hurting the performance.

...allowing me to create code by speaking through my headphones... ... I doubt it can be done without meta programming.

I agree on this. The concept "metaprogramming" is extense and covers different ways in which it can work (or be implemented) and from its own definition it is a building block for this kind of applications.

• Location Rio de Janeiro, RJ
• Education Master Degree
• Work FullStack and Mobile Developer
• Joined May 18, 2021

Thank you 🙏. I'd like that you put in Brazilian Portuguse too.

Added both Portugal and Brazilian portuguese 😁

• Work Student
• Joined Jul 21, 2022

Thanks you 🙏. I'd like that you put in french too.

Thank you! 😁

• Education Cameroon
• Joined Aug 26, 2022

I added support for some extra languages in the mean time 😁

• Work Technical Manager @ Gabrieli Media Group
• Joined Aug 29, 2022

Thank you very much for your useful article and implementation. Does it support Greek? Have a nice (programming) day

Hi Symeon, added support for Greek el-GR , try it out! 😃

• Joined Jan 15, 2023

Can you please add urdu language

Hi @aheedkhan I'm not maintaining this anymore but feel free to fork the pen! 😄

• Joined Jul 7, 2024

Help me??? stackoverflow.com/questions/755279...

• Joined Sep 7, 2024

Could you pls add tamil in it

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Figma Plugins for Developers in 2024

Luke Stahl - Sep 18

🌐 Unleashing GraphQL in Next.js: Effortless Data Fetching! 🚀

Hamza Khan - Sep 14

Leveling Up My GraphQL Skills: Real Time Subscriptions

John Vester - Sep 18

Quão difícil é subir uma aplicação simples e monetizá-la em 2024?

Arthur Diesel - Sep 13

We're a place where coders share, stay up-to-date and grow their careers.

Voice commands and speech synthesis made easy

Artyom.js is an useful wrapper of the speechSynthesis and webkitSpeechRecognition APIs.

Besides, artyom.js also lets you to add voice commands to your website easily, build your own Google Now, Siri or Cortana !

Download .js

Get on bower, installation.

If you don't use any module bundler like browserify, require etc, just include the artyom window script in the head tag of your document and you are ready to go !

The Artyom class would be now available and you can instantiate it:

Note You need to load artyom.js in the head tag to preload the voices in case you want to use the speechSynthesis API. otherwise you can still load it in the end of the body tag.

About Artyom in this Browser

Loading info ....

According to your browser, speech synthesis and speech recognition may be available or not separately, use artyom.speechSupported and artyom.recognizingSupported methods to know it.

These are the available voices of artyom in this browser. See the initialization codes in the initialization area or read the docs.

Our Code Editor

Give artyom some orders in this website Since you're in this website artyom has been enabled. Try using any of the demo commands in the following list to test it !

Voice commands

Before the initialization, we need to add some commands for being processed. Use the artyom.addCommands(commands) method to add commands.

A command is a literal object with some properties. There are 2 types of commands normal and smarts .

A smart command allow you to retrieve a value from a spoken string as a wildcard. Every command can be triggered for any of the identifiers given in the indexes array.

Pro tip You can add commands dinamically while artyom is active. The commands are stored in an array so you can add them whenever you want and they'll be processed.

Start artyom

Now that artyom has commands, these can be processed. Artyom can work in continuous and uncontinuous mode.

Remember that artyom provides you the possibility to process the commands with a server language instead of javascript, you can enable the remote mode of artyom and use the artyom.remoteProcessorService method.

Note You'll need an SSL certificate in your website (https connection) in order to use the continuous mode, otherwise you'll be prompted for the permission to access the microphone everytime the recognition ends.

Pro tip Set always the debug property to true if you're working with artyom locally , you'll find convenient, valuable messages and information in the browser console.

Speech text

Use artyom.say to speak text. The language is retrieven at the initialization from the lang property.

Note Artyom removes the limitation of the traditional API ( about 150 characters max. Read more about this issue here ). With artyom you can read very extense text chunks without being blocked and the onEnd and onStart callbacks will be respected.

Pro tip Split the text by yourself in the way you want and execute and use artyom.say many times to decrease the probability of limitation of characters in the spoken text.

Test it by yourself paste all the text you want in the following textarea and click on speak to hear it !

Speech to text

Convert what you say into text easily with the dictation object.

Note You'll need to stop artyom before start a new dictation using artyom.fatality as 2 instances of webkitSpeechRecognition cannot run at time.

Simulate instructions without say a word

You can simulate a command without use the microphone using artyom.simulateInstruction("command identifier") for test purposes (or you don't have any microphone for test).

Try simulating any of the commands of this document like "hello","go to github" etc.

Get spoken text while artyom is active

If you want to show the user the recognized text while artyom is active, you can redirect the output of the speech recognition of artyom using artyom.redirectRecognizedTextOutput .

All that you say on this website will be shown in the following box:

Pause and resume commands recognition

You can pause the commands recognition, not the original speechRecognition. The text recognition will continue but the commands execution will be paused using the artyom.dontObey method.

To resume the command recognition use the artyom.obey . Alternatively, use the obeyKeyword property to enable with the voice at the initialization.

Useful keywords

Use the executionKeyword at the initialization to execute immediately a command though you are still talking. Use the obeyKeyword to resume the commands recognition if you use the pause method ( artyom.dontObey ). If you say this keyword while artyom is paused, artyom will be resumed and it will continue processing commands automatically.

Trending tops in Our Code World

Top 7 : best free web development ide for javascript, html and css.

See the review from 7 of the best free IDE (and code editors) for web proyects development in Our Code World.

Top 5 : Best jQuery scheduler and events calendar for web applications

See the review from 5 of the best dynamics scheduler and events calendar for Web applications with Javascript and jQuery in Our Code World

Top 20: Best free bootstrap admin templates

See the collection from 20 of the most imponent Admin templates built in bootstrap for free in Our Code World.

Thanks for read everything !

Support the project, did you like artyom.

If you did, please consider in give a star on the github repository and share this project with your developer friends !

We are already persons supporting artyom.js

I'm here to help you

Issues and troubleshooting.

If you need help while you're trying to implement artyom and something is not working, or you have suggestions please report a ticket in the issues are on github and i'll try to help you ASAP.

react-speech-recognition

• 0 Dependencies
• 69 Dependents
• 41 Versions

A React hook that converts speech from the microphone to text and makes it available to your React components.

How it works

useSpeechRecognition is a React hook that gives a component access to a transcript of speech picked up from the user's microphone.

SpeechRecognition manages the global state of the Web Speech API, exposing functions to turn the microphone on and off.

Under the hood, it uses Web Speech API . Note that browser support for this API is currently limited, with Chrome having the best experience - see supported browsers for more information.

This version requires React 16.8 so that React hooks can be used. If you're used to version 2.x of react-speech-recognition or want to use an older version of React, you can see the old README here . If you want to migrate to version 3.x, see the migration guide here .

Useful links

Basic example, why you should use a polyfill with this library, cross-browser example, supported browsers, troubleshooting.

• Version 3 migration guide
• TypeScript declaration file in DefinitelyTyped

Installation

To install:

npm install --save react-speech-recognition

To import in your React code:

import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'

The most basic example of a component using this hook would be:

You can see more examples in the example React app attached to this repo. See Developing .

By default, speech recognition is not supported in all browsers, with the best native experience being available on desktop Chrome. To avoid the limitations of native browser speech recognition, it's recommended that you combine react-speech-recognition with a speech recognition polyfill . Why? Here's a comparison with and without polyfills:

• ✅ With a polyfill, your web app will be voice-enabled on all modern browsers (except Internet Explorer)
• ❌ Without a polyfill, your web app will only be voice-enabled on the browsers listed here
• ✅ With a polyfill, your web app will have a consistent voice experience across browsers
• ❌ Without a polyfill, different native implementations will produce different transcriptions, have different levels of accuracy, and have different formatting styles
• ✅ With a polyfill, you control who is processing your users' voice data
• ❌ Without a polyfill, your users' voice data will be sent to big tech companies like Google or Apple to be transcribed
• ✅ With a polyfill, react-speech-recognition will be suitable for use in commercial applications
• ❌ Without a polyfill, react-speech-recognition will still be fine for personal projects or use cases where cross-browser support is not needed

react-speech-recognition currently supports polyfills for the following cloud providers:

You can find the full guide for setting up a polyfill here . Alternatively, here is a quick (and free) example using Speechly:

• Install @speechly/speech-recognition-polyfill in your web app
• You will need a Speechly app ID. To get one of these, sign up for free with Speechly and follow the guide here
• Here's a component for a push-to-talk button. The basic example above would also work fine.

Detecting browser support for Web Speech API

If you choose not to use a polyfill, this library still fails gracefully on browsers that don't support speech recognition. It is recommended that you render some fallback content if it is not supported by the user's browser:

Without a polyfill, the Web Speech API is largely only supported by Google browsers. As of May 2021, the following browsers support the Web Speech API:

• Chrome (desktop): this is by far the smoothest experience
• Safari 14.1
• Microsoft Edge
• Chrome (Android): a word of warning about this platform, which is that there can be an annoying beeping sound when turning the microphone on. This is part of the Android OS and cannot be controlled from the browser
• Android webview
• Samsung Internet

For all other browsers, you can render fallback content using the SpeechRecognition.browserSupportsSpeechRecognition function described above. Alternatively, as mentioned before, you can integrate a polyfill .

Detecting when the user denies access to the microphone

Even if the browser supports the Web Speech API, the user still has to give permission for their microphone to be used before transcription can begin. They are asked for permission when react-speech-recognition first tries to start listening. At this point, you can detect when the user denies access via the isMicrophoneAvailable state. When this becomes false , it's advised that you disable voice-driven features and indicate that microphone access is needed for them to work.

Controlling the microphone

Before consuming the transcript, you should be familiar with SpeechRecognition , which gives you control over the microphone. The state of the microphone is global, so any functions you call on this object will affect all components using useSpeechRecognition .

Turning the microphone on

To start listening to speech, call the startListening function.

This is an asynchronous function, so it will need to be awaited if you want to do something after the microphone has been turned on.

Turning the microphone off

To turn the microphone off, but still finish processing any speech in progress, call stopListening .

To turn the microphone off, and cancel the processing of any speech in progress, call abortListening .

Consuming the microphone transcript

To make the microphone transcript available in your component, simply add:

Resetting the microphone transcript

To set the transcript to an empty string, you can call the resetTranscript function provided by useSpeechRecognition . Note that this is local to your component and does not affect any other components using Speech Recognition.

To respond when the user says a particular phrase, you can pass in a list of commands to the useSpeechRecognition hook. Each command is an object with the following properties:

• command : This is a string or RegExp representing the phrase you want to listen for. If you want to use the same callback for multiple commands, you can also pass in an array here, with each value being a string or RegExp
• command : The command phrase that was matched. This can be useful when you provide an array of command phrases for the same callback and need to know which one triggered it
• resetTranscript : A function that sets the transcript to an empty string
• matchInterim : Boolean that determines whether "interim" results should be matched against the command. This will make your component respond faster to commands, but also makes false positives more likely - i.e. the command may be detected when it is not spoken. This is false by default and should only be set for simple commands.
• The value of command (with any special characters removed)
• The speech that matched command
• The similarity between command and the speech
• The object mentioned in the callback description above
• fuzzyMatchingThreshold : If the similarity of speech to command is higher than this value when isFuzzyMatch is turned on, the callback will be invoked. You should set this only if isFuzzyMatch is true . It takes values between 0 (will match anything) and 1 (needs an exact match). The default value is 0.8 .
• bestMatchOnly : Boolean that, when isFuzzyMatch is true , determines whether the callback should only be triggered by the command phrase that best matches the speech, rather than being triggered by all matching fuzzy command phrases. This is useful for fuzzy commands with multiple command phrases assigned to the same callback function - you may only want the callback to be triggered once for each spoken command. You should set this only if isFuzzyMatch is true . The default value is false .

Command symbols

To make commands easier to write, the following symbols are supported:

• Example: 'I would like to order *'
• The words that match the splat will be passed into the callback, one argument per splat
• Example: 'I am :height metres tall'
• The one word that matches the named variable will be passed into the callback
• Example: 'Pass the salt (please)'
• The above example would match both 'Pass the salt' and 'Pass the salt please'

Example with commands

Continuous listening.

By default, the microphone will stop listening when the user stops speaking. This reflects the approach taken by "press to talk" buttons on modern devices.

If you want to listen continuously, set the continuous property to true when calling startListening . The microphone will continue to listen, even after the user has stopped speaking.

Be warned that not all browsers have good support for continuous listening. Chrome on Android in particular constantly restarts the microphone, leading to a frustrating and noisy (from the beeping) experience. To avoid enabling continuous listening on these browsers, you can make use of the browserSupportsContinuousListening state from useSpeechRecognition to detect support for this feature.

Alternatively, you can try one of the polyfills to enable continuous listening on these browsers.

Changing language

To listen for a specific language, you can pass a language tag (e.g. 'zh-CN' for Chinese) when calling startListening . See here for a list of supported languages.

regeneratorRuntime is not defined

If you see the error regeneratorRuntime is not defined when using this library, you will need to ensure your web app installs regenerator-runtime :

• npm i --save regenerator-runtime
• If you are using NextJS, put this at the top of your _app.js file: import 'regenerator-runtime/runtime' . For any other framework, put it at the top of your index.js file

How to use react-speech-recognition offline?

Unfortunately, speech recognition will not function in Chrome when offline. According to the Web Speech API docs : On Chrome, using Speech Recognition on a web page involves a server-based recognition engine. Your audio is sent to a web service for recognition processing, so it won't work offline.

If you are building an offline web app, you can detect when the browser is offline by inspecting the value of navigator.onLine . If it is true , you can render the transcript generated by React Speech Recognition. If it is false , it's advisable to render offline fallback content that signifies that speech recognition is disabled. The online/offline API is simple to use - you can read how to use it here .

You can run an example React app that uses react-speech-recognition with:

On http://localhost:3000 , you'll be able to speak into the microphone and see your speech as text on the web page. There are also controls for turning speech recognition on and off. You can make changes to the web app itself in the example directory. Any changes you make to the web app or react-speech-recognition itself will be live reloaded in the browser.

View the API docs here or follow the guide above to learn how to use react-speech-recognition .

• recognition

Package Sidebar

npm i react-speech-recognition

Git github.com/JamesBrill/react-speech-recognition

webspeechrecognition.com/

Downloads Weekly Downloads

Unpacked size, total files, last publish.

2 years ago

Collaborators

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Web Speech API SpeechRecognition not defined when using React.js

I am using React.js along with the Web Speech API's SpeechRecognition, however, it does not work and I get the error "ReferenceError: SpeechRecognition is not defined." The code I am using is directly from the SpeechRecognition documentation:

The first line causes the error, but without it, the second line will cause the same error. How can I fix this?

• speech-recognition
• webspeech-api

2 Answers 2

try window.SpeechRecognition || window.webkitSpeechRecognition;

See Using the Web Speech API for further explanation why you need the window. prefix.

• 1 Your answer is correct, but it will be more helpful if you add explanation. –  Armen Sanoyan Commented Apr 3, 2021 at 13:04
• It's not yet standardize and supported in Firefox. Therefore the prefix –  Thanh Trung Commented Feb 7, 2022 at 9:08

This helped me!

• Please explain how this helped you? –  David Commented May 21 at 10:32

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged javascript reactjs speech-recognition webspeech-api or ask your own question .

• The Overflow Blog
• Masked self-attention: How LLMs learn relationships between tokens
• Deedy Das: from coding at Meta, to search at Google, to investing with Anthropic
• Featured on Meta
• User activation: Learnings and opportunities
• Preventing unauthorized automated access to the network
• Should low-scoring meta questions no longer be hidden on the Meta.SO home...
• Feedback Requested: How do you use the tagged questions page?
• Announcing the new Staging Ground Reviewer Stats Widget

Hot Network Questions

• Where is the best place to get bows in TotK?
• Is there a fast/clever way to return a logical vector if elements of a vector are in at least one interval?
• Does a passenger jet detect excessive weight in the tail after it's just landed?
• If two subgroups intersect in only the identity, do their cosets intersect in at most one element?
• Does the Rogue's Evasion cost a reaction?
• Five Hundred Cigarettes
• Do we have volitional control over our level of skepticism?
• Vacuous statements as a useful convention
• The most common one (L)
• Why do evacuations result in so many injuries?
• How to format units inside math environment?
• What exactly do I buy when I buy an index-following ETF?
• Neil Tyson: gravity is the same every where on the geoid
• What cameos did Stan Lee have in the DC universe?
• I want a smooth orthogonalization process
• Is this a balanced way to implement the "sparks" spell from Skyrim into D&D?
• Place some or all of the White Chess pieces on a chessboard in such a way that none of them can legally move
• How similar were the MC6800 and MOS 6502?
• removing dead citrix apps from applications menu?
• Do early termination fees hold up in court?
• Undamaged tire repeatedly deflating
• The word "чайный" as a substantive
• What evidence exists for the historical name of Kuwohi Mountain (formerly Clingmans Dome)?
• Why would an escrow/title company not accept ACH payments?

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Remember language

SpeechRecognition: continuous property

Limited availability.

This feature is not Baseline because it does not work in some of the most widely-used browsers.

• See full compatibility
• Report feedback

The continuous property of the SpeechRecognition interface controls whether continuous results are returned for each recognition, or only a single result.

It defaults to single results ( false .)

A boolean value representing the current SpeechRecognition 's continuous status. true means continuous, and false means not continuous (single result each time.)

This code is excerpted from our Speech color changer example.

Specifications

Browser compatibility

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Web Speech API