Simply open notepad, add in the basic HTML structures as follows:

<html>

  <head>

  </head>

  <body>

  </body>

</html>

HTML – Basic structure for a HTML page

Head – Includes all your links, less important information, scripts.

Body – Where everything else goes!

Create another notepad and save as : xxx.js [JavaScript file]

Where xxx can be any name.

<button id="button1" type="button">Click Me!</button

<button id="button1" type="button">Click Me!</button>

Create speech recognition objects

var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

var recognition = new SpeechRecognition();

recognition.start();

This would start the voice recognition feature and stop when silence.

There are other event call that can be used:

• recognition.onstart (Which I used)
• recognition.onspeechend
• recognition.onerror

var transcript = event.results[current][0].transcript;

var transcript = event.results[current][0].transcript;

Firstly declare 2 variables from the text box id:

var noteTextarea = $('#note-textarea');

var noteTextarea = $('#note-textarea');

var noteContent='';

Upon recognition, send the text to fill the textbox:

(False) This setting basically allows the recording to be stopped after a few seconds of silence.

(True) This would allow for longer interaction

recognition.continuous = false;

The REST is UP TO YOU! The possibilities are limitless!