How it works SpeechRecognition is a class that wraps one of your React components. In doing so, it injects some additional properties into the component that allow it to access a transcript of speech picked up from the user's microphone.
Under the hood, it uses Web Speech API. Currently, this component will work in Chrome,firefox,safari,edge
You will need a dependency manager like Browserify or Webpack to bundle this module with your web code.
For firefox and other browser it takes audio and convert into flac format and flac file is been passed to Gapi which converts to speech for rest of the browser
You need to add below script to your index.html to access gapi
https://apis.google.com/js/api.js" src="./gapi.js"
create gapi.js and add it to the public folder and paste the below code
function start() { window.gapi.client.init({ 'apiKey': 'Your API Key' }).then(function () { window.gapi.client.load('speech', 'v1beta1'); }, function (reason) { console.log('Error: ' + reason.result.error.message); }); }; window.gapi.load('client', start);
Now, Import Speech from speech_recognition_all_browser
and create instance of speech and call start method with callback;
new Speech().start(getText)
function getText(text){ document.getElementbyId('voice').value=text; }