pbakondy / cordova-plugin-speechrecognition

:microphone: Cordova Plugin for Speech Recognition
MIT License
197 stars 117 forks source link

How to control speech-to-text so it displays in a specific form field? #64

Closed pdubuc closed 6 years ago

pdubuc commented 6 years ago

Hello! I am a beginner and running into an issue with the startListening function:

Problem: I am unable to apply the speech recognition feature so that a user's speech gets transcribed into a specific field when the user clicks a button.

Larger scenario: the html page contains multiple input fields and I need to associate a button click event to capture the user's speech for each individual field.

Details: I am working with an Android tethered device using Cordova CLI and Android Studio. I am able to trigger Speech Recognition successfully upon a button click using "startRecognition()", but the user's speech gets automatically inserted into the first form field on the page. I am not able to control in which form field the speech text gets inserted.

Code sample: This illustrates my attempt to populate the user's speech into the "country1" field, but it shows up in the "name1" field instead.

<script type="text/javascript">
/* This launches the Speech Recognition pop-up dialog: */
function startRecognition(){
    window.plugins.speechRecognition.startListening(function(result)
    {
        console.log(result);
        // Attempting to associate this function with the 2nd input field (this does not work):
        document.getElementById('country1')[0].setAttribute("value", result);

    }, function(err)
    {
        console.error(err);
    }, 
    {
        language: "en-US",
        prompt: "Please state your country",        
        showPopup: true
    });
}
</script>

<form>
    <input type="text" id="name1">
    <button onclick="startRecognition()">State your name</button>
    <br><br>
    <input type="text" id="country1">
    <button onclick="startRecognition()">State your country</button>
</form>

Could I ask for any suggestions about how to create a simple HTML form that calls the Speech Recognition function successfully and allows me to control into which field the user's speech gets transcribed based on a button click?

Thank you in advance for any help you can provide!

pdubuc commented 6 years ago

With a little research, we were able to figure out the solution to this challenge. Closing this issue.
Great plug-in!

humblecoder commented 5 years ago

@pdubuc Please share your research. Specifically, were you able to mimic the "waveform" display on most platforms or give any indication of recording while recording? 🤔