dictaphone | Free phonetic dictionaries for automatic speech recognition | Speech library

I want my website to get audio input from a user who's talking into their mic, and then output what they said onto the screen. I have implemented speech recognition into my react website, but I am unable to see the transcript when I speak into my mic.

Here is my code related to speech recognition I have

This is in my main App.js file inside a class called App, this is part of what's being rendered:

I'm making an input form and I would like to use the React Speech Recognition package to give users the option to record their input instead of typing it for two fields in the form - "review" and "order". I've made two versions of my dictaphone, as ReviewDict and OrderDict, and pass them respectively a "changeReview/changeOrder" prop to update the field.

However, whenever I click to start recording on one, it starts them both, and pulls the transcript of what I say into both input fields.

Is there a simple way to make the button for each only effect that instance of the package?

Here's the relevant parts of my code:

Input form:

Goal

I am aiming to get the transcript value, from the function Dictaphone and pass it into to the SearchBar class, and finally set the state term to transcript.

Current code

I am using navigator.mediaDevices.getUserMedia to record an audio clip. The user can play the audio clip and/or download it after stopping recording. Is this information stored in the user’s browser?

There is a similar question but I can't comment on it so I opening a new one. I am new to React and try to implement React SpeechRecognition component for my app. The text should be in an input box. the code for it (from react doc [https://www.npmjs.com/package/react-speech-recognition][1] - with span tag instead of an input):

I am trying to set up web-dictaphone to record audio then save it to the server.

My goal is to simply have them save the audio file to the wordpress server when clicking the save button.

It works and creates the blob. However, I can't get it to post to php so I can save it. The blob is set when the player stops, then when the save button is clicked I try to save it to the server.