-
1Creating the HTML page
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!
-
2Creating the JavaScript Page
Create another notepad and save as : xxx.js [JavaScript file]
Where xxx can be any name.
-
3[Voice recognition] Create a html Button
<button id="button1" type="button">Click Me!</button
<button id="button1" type="button">Click Me!</button>
-
4[Voice recognition] Creating a voice recognition event
Create speech recognition objects
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; var recognition = new SpeechRecognition();
-
5[Voice recognition] Button click event
recognition.start();
This would start the voice recognition feature and stop when silence.
-
6[Voice recognition] Other various functions
There are other event call that can be used:
- recognition.onstart (Which I used)
- recognition.onspeechend
- recognition.onerror
-
7[Voice recognition] Create a transcript variable to store the text
var transcript = event.results[current][0].transcript;
var transcript = event.results[current][0].transcript;
-
8[Voice recognition] Populating the text box
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:
-
9[Voice recognition] Setting recognition continuous
(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;
-
10[Voice recognition] YOU ARE DONE!
The REST is UP TO YOU! The possibilities are limitless!
Discussions
Become a Hackaday.io Member
Create an account to leave a comment. Already have an account? Log In.