How to Add Speech Recognition to the Website – JavaScript

With the use of Speech Recognition API, you can enable the web browser to take speech input on the page and convert it into text.

For accessing this on the page need to allow microphone access by the user.

In this tutorial, I am creating an example where allowing the users to search posts by speech. On the basis of speech recognition display response on the screen using jQuery AJAX.

1. Table structure

I am using posts table in the tutorial example.

CREATE TABLE `posts` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `title` varchar(100) NOT NULL, `content` text NOT NULL, `link` varchar(255) NOT NULL

2. Configuration

Create a config.php for database connection.

Completed Code

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) { die("Connection failed: " . mysqli_connect_error());


Create a textbox to display the words user said and a button to enable speech recognition.

Display search response in <div class='container'> using jQuery AJAX.

Completed Code

<div class='search_container'> <!-- Search box--> <input type='text' id='speechText' > &nbsp; <input type='button' id='start' value='Start' onclick='startRecording();'>
</div> <!-- Search Result -->
<div class="container"></div>

4. CSS

.search_container{ margin: 0 auto; width: 55%;
} .search_container #speechText{ width: 80%; padding-top: 5px; padding-bottom: 5px;
} .search_container #start{ padding-top: 5px; padding-bottom: 5px;
} .container{ width: 55%; margin: 0 auto; border: 0px solid black; padding: 10px 0px;
} /* post */
.post{ width: 97%; min-height: 200px; padding: 5px; border: 1px solid gray; margin-bottom: 15px;
} .post h1{ letter-spacing: 1px; font-weight: normal; font-family: sans-serif;
} .post p{ letter-spacing: 1px; text-overflow: ellipsis; line-height: 25px;
} /* more link */
.more{ color: blue; text-decoration: none; letter-spacing: 1px; font-size: 16px;

5. PHP

Create a getData.php file.

Search the POST value on the posts table – title, content, and link fields.

Read fetched records and create HTML string. Return the $html.

Completed Code

<?php include 'config.php'; $searchText = $_POST['speechText']; // search query
$query = 'SELECT * FROM posts_1 WHERE title like "%'.$searchText.'%" or content like "%'.$searchText.'%" or link like "%'.$searchText.'%"'; $result = mysqli_query($con,$query); $html = '';
if(mysqli_num_rows($result) > 0){ while($row = mysqli_fetch_array($result)){ $id = $row['id']; $title = $row['title']; $content = $row['content']; $shortcontent = substr($content, 0, 160)."..."; $link = $row['link']; // Creating HTML structure $html .= '<div id="post_'.$id.'" class="post">'; $html .= '<h1>'.$title.'</h1>'; $html .= '<p>'.$shortcontent.'</p>'; $html .= '<a href="'.$link.'" class="more" target="_blank">More</a>'; $html .= '</div>'; }
}else{ $html .= '<div >'; $html .= '<p>No Record Found.</p>'; $html .= '</div>';
} echo $html;

6. Script

Create an Object of webkitSpeechRecognition Class.

Start Recording –

The startRecording() function call on Start button click. From the function call recognition.start() method.

If the microphone access not allowed on the page then browser ask the use of the microphone.

How to Add Speech Recognition to the Website – JavaScript

The user can allow or block it. If allowed then the browser can take input from the microphone.

Read Speech input –

The recognition.onresult function is called after recognition the said text.

Get the speech text and assign in the search box element.

Pass the saidText in the searchPosts() function to fetch records using AJAX.

Fetch Records –

From searchPosts() method send an AJAX request and on successful callback append the response in $('.container').

Complete Code

var recognition = new webkitSpeechRecognition(); recognition.onresult = function(event) { var saidText = ""; for (var i = event.resultIndex; i < event.results.length; i++) { if (event.results[i].isFinal) { saidText = event.results[i][0].transcript; } else { saidText += event.results[i][0].transcript; } } // Update Textbox value document.getElementById('speechText').value = saidText; // Search Posts searchPosts(saidText);
} function startRecording(){ recognition.start();
} // Search Posts
function searchPosts(saidText){ $.ajax({ url: 'getData.php', type: 'post', data: {speechText: saidText}, success: function(response){ $('.container').empty(); $('.container').append(response); } });

7. Conclusion

The user can enable and disable microphone access on the page whenever wants and it is only working on those web browsers which supports webkitSpeechRecognition API.

It is better to also display input box to take input from the keyboard if you are using the data for processing.

If you found this tutorial helpful then don’t forget to share.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request.

Related Posts