在这篇博客中,我们将介绍如何使用语音识别API来实现Magento 2的语音搜索功能。

 

语音识别功能的优点

根据W3C Web可访问性计划,以下人员将依赖此功能,并发现对他们的用户体验至关重要:

  • 身体残疾的人不能使用键盘或鼠标。
  • 患有慢性疾病的人,例如重复性压力损伤(RSI),需要限制或避免使用键盘或鼠标。
  • 有认知和学习障碍的人需要使用语音而不是打字。
  • 有暂时性限制的人,如手臂骨折。

此外,喜欢使用语音命令(在移动设备上)而不是键入的人也可以从快速输入搜索词的选项中受益。

 

应用语音搜索到Magento 2

首先,在web/js文件夹中,我们需要创建一个JavaScript文件,我们将在其中添加语音识别功能。我们创建了一个名为voiceSearch.js的文件,其中包含以下代码:将事件附加到按钮(我们将添加到模板中),侦听语音,解析语音,将中间结果输出到搜索文本输入,输出搜索输入的最终结果,并在用户完成说话后提交搜索表单。

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);
	}
});

当然,我们需要将此文件添加到requirejs- config.js,以便在需要时正确加载。 

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

之后,我们将编辑(或覆盖)我们的form.mini.phtml文件,该文件位于<Vendor>/<theme>/Magento_Search/templates/form.mini.phtml使用control搜索div元素,并添加id为voice-search-trigger的按钮, 并在加载搜索输入时调用voiceSearch 您可以在下面看到已编辑代码的示例。

<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>

 

结果

在测试该功能之前,您可能还想编辑CSS,这取决于您将按钮定位在哪里,并确保使用支持并启用语音识别的浏览器。如果一切都做得正确,我们可以看到显示以下内容。

通过单击“语音搜索”,将出现一个提示,询问您是否允许使用麦克风(如果您的浏览器支持此功能)。如果您的浏览器不支持语音识别功能,则会出现一个提示,其中包含有关功能支持的信息。授予权限后,输入文本将更改为“Listening ...”并等待您的输入。浏览器还应指示麦克风正在使用和正在录制的状态。 

例如,如果我们说 “行李袋”我们随后引导到了“行李袋”搜索结果页面。如果您安装了Magento 2样本数据,下面的产品可能会作为您的搜索结果出现。