Converting Speech to Text Input

Speech recognition has become a popular requested feature as of recently. This tutorial will walk you through how to use Web Speech API for allowing access to your device’s microphone to dictate text into an input field. 

Important Notes: These instructions are only supported in Chrome. Additionally, the Web Speech API is only supported over HTTPS. Be sure you’re installed SSL on your m-Power server. Finally, due to privacy concerns the API requires the end user to allow browser access to the device microphone before the logic will function.

To begin, download the required speech-text files and install the folder on your m-Power server. I placed mine in /mrcjava/mrcclasses.

Open m-Painter for your maintainer page and insert the external link to the new ‘speech-text.css’ stylesheet in the head section of your HTML.

<link href="/mrcjava/mrcclasses/speech-text/speech-text.css" rel="stylesheet" type="text/css">

You will also need to insert the external script link to the ‘speech-text.js’ file at the bottom of the HTML, directly above the ‘mpowerapps.js’ link.

<script type="text/javascript" src="/mrcjava/mrcclasses/speech-text/speech-text.js"></script>
<script type="text/javascript" src="/mrcjava/assets/js/mpowerapps.js"></script>

Once the files are in place, you simply need to indicate which textarea element should store the verbal text. You do this by changing the id to “note-textarea”:

<textarea id="note-textarea" class="form-control" cols="30" maxlength="999999" name="NOTE" rows="5">${row.NOTE?html}</textarea>

Now we must insert buttons in order to trigger the speech-to-text logic to begin “listening”. You may write your own HTML or you may use the m-Painter GUI. I enabled Grid Mode and inserted a new form row below the text area form row. Using the Element Window Editor I inserted two Bootstrap buttons. One for beginning the recording and another for pausing. To trigger the appropriate action, you must add the ids of “start-record-btn” and “pause-record-btn” to the appropriate <a> elements:

<a id="start-record-btn" href="#" class="btn btn-lg btn-success">Begin Recording</a>
<a id="pause-record-btn" href="#" class="btn btn-lg btn-danger">Pause Recording</a>

Finally, you may add instructions for your user that will automatically change based on the button clicked. I simply replaced the entire <label> line with a <p> element with your desired text on page load. To automatically change the text based on button click, you will need to add the id of “recording-instructions”:

<p id="recording-instructions">Click <strong>Begin Recording</strong> to begin speaking.</p>

That’s it! You can now run your maintainer and click the ‘Begin Recording’ button. Once you allow the browser to access your microphone, you may begin dictating text to your input. 

Having trouble?

  • Are you using a Chrome browser? These instruction are written for Chrome support only.
  • Are you working over an SSL connection? The Web Speech API is only supported over HTTPS.
  • Have you allowed browser access to the device microphone? You should be prompted to allow access the first time attempting to use the feature.

Related Posts:

  • No Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *