Voice Search for Magento 2

Voice Search for Magento 2

In one of our articles, we’ve already mentioned the growing popularity of the voice search among Internet users. Using your voice for completing some commands seems cool and still a bit futuristic. Moreover, the speech-recognition error is getting lower every day. Not long ago, Web Speech API has been introduced to Chrome, Opera and Firefox browsers. Google supports Web Speech by default, but on Opera or Firefox, you have to enable the support in config.

Advantages of Voice Search for Online Store

Voice Search is not only a cool feature for your store that will attract Generation Z customers. It also makes the store accessible for people with various physical and cognitive disabilities as well as for people with so-called temporary limitations, such as a broken arm. In this way, customers feel you care and pay with their loyalty.

Tutorial on Adding Voice Search to Magento 2

Web Speech API consists of Voice Synthesis and Speech Recognition. In this tutorial, we’re using only the latter one — Speech Recognition. Follow these five steps:

  1. Create a JavaScript file with the name, for example, voiceSearch.js in web/js folder. You have to include this file into requirejs-config.js to guarantee the correct loading when required. 

    var config = {
       map: {
           '*': {
               'voiceSearch': 'js/voiceSearch'
           }
       }
    };

  2. In the voiceSearch.js file, add the code that will perform the following Speech Recognition functions: 
  • Listening to the speaker
  • Parsing and transcribing the speech
  • Recognizing that the speaker has stopped
  • Inputting the transcripted speech to the search field 

define([
       'jquery',
       'domReady!'
   ], function ($) {
'use strict';
var $voiceSearchTrigger = $("#voice-search-trigger");
var $miniSearchForm = $("#search_mini_form");
var $searchInput = $("#search");
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

function _parseTranscript(e) {
return Array.from(e.results).map(result => result[0]).map(result => result.transcript).join('')
}

function _transcriptHandler(e) {
$searchInput.val(_parseTranscript(e));
if (e.results[0].isFinal) {
$miniSearchForm.submit();
}
}

if (window.SpeechRecognition) {
var recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.addEventListener('result', _transcriptHandler);
} else {
alert("Speech Recognition is not supported in your browser or it has been disabled.");
}

function startListening(e) {
e.preventDefault();
$searchInput.attr("placeholder", "Listening...");
recognition.start();
}

return function() {
$voiceSearchTrigger.on('click touch', startListening);
}
});

3. Your next step will be to go to <Vendor>/<theme>/Magento_Search/templates/form.mini.phtml. There, find the div element with the class of control and perform the following editing: 

<div class="control">
<button class="action primary" id="voice-search-trigger"><?= /* @escapeNotVerified */ __('Voice Search') ?></button>
<input id="search"
data-mage-init='{"quickSearch":{
"formSelector":"#search_mini_form",
"url":"<?= /* @escapeNotVerified */ $helper->getSuggestUrl()?>",
"destinationSelector":"#search_autocomplete"},
"voiceSearch":{}
}'
type="text"
name="<?= /* @escapeNotVerified */ $helper->getQueryParamName() ?>"
value="<?= /* @escapeNotVerified */ $helper->getEscapedQueryText() ?>"
placeholder="<?= /* @escapeNotVerified */ __('Search entire store here...') ?>"
class="input-text"
maxlength="<?= /* @escapeNotVerified */ $helper->getMaxQueryLength() ?>"
role="combobox"
aria-haspopup="false"
aria-autocomplete="both"
autocomplete="off"/>
<div id="search_autocomplete" class="search-autocomplete"></div>
<?= $block->getChildHtml() ?>
</div>

4. According to the place where you’ve added the voice-search-trigger button, you may have to modify the CSS too.
5. Check if the speech-recognition function is enabled in your browser, allow to use the microphone and check the result. If you’ve done everything in the right way, then the input text will be “Listening…”

More Possibilities for Speech Recognition

Voice search is not the only possible way to use the speech-recognition function. With this novelty, you can make your store more accessible. Speech recognition can be used in the navigation in the online store or for engaging interacting with the site, and so on. Share your ideas in the comments below!
In case you want to add a new cool feature to your Magento store or have any questions, don't hesitate to contact our Team of Certified Magento Developers!

You may also be interested in the following articles:

Comments (0):
Leave a comment:
*Your comment will be published after approval by site administrator.