С появлением искусственного интеллекта и распознавания голоса мы можем добавить голосовой поиск непосредственно в поле ввода формы и выполнять такие функции, как поиск, ввод данных и т. д. Здесь мы покажем HTML-код, а затем предоставим бесплатный модуль Opencart.
Ниже приведены коды, которые предоставят вам голос для поля ввода.
<style>
.speech {
float: left;
border: 1px solid #ccc;
border-radius: 10px 0px 0px 10px;
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
border-right: 0px;
align-items: center;
display: flex;
height: 40px;
padding: 0px 10px;
}
.speech img {
width: 20px;
position: relative;
margin: auto;
}
#search .input-lg {
height: 42px;
line-height: 20px;
padding: 0 10px;
border-radius: 0px;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
border-left-width: 0px;
}
.btn {
height: 42px;
border: 1px solid #ccc;
padding: 0px 10px;
border-radius: 0px 10px 10px 0px;
}
</style>
<script>
function startDictation() {
if (window.hasOwnProperty('webkitSpeechRecognition')) {
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.lang = 'en-US';
recognition.start();
recognition.onresult = function (e) {
document.getElementsByClassName('form-control')[0].value = e.results[0][0].transcript;
recognition.stop();
document.getElementsByClassName('btn-default')[0].submit();
};
recognition.onerror = function (e) {
recognition.stop();
};
}
}
</script>
<form>
<div style="display:inline-flex">
<div class="speech">
<img onclick="startDictation()"
src="https://webocreation.com/wp-content/uploads/2022/02/voice-icons.png" />
</div>
<div id="search" class="input-group">
<input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
</div>
<div class="input-group-btn">
<button type="button" class="btn ">GO</button>
</div>
</div>
</form>
Мы реализовали приведенный выше код и сделали бесплатное расширение для Opencart. Загрузите и установите расширение Opencart.
Как только вы загрузите и установите это расширение opencart, вы увидите значок микрофона в поле ввода поиска.
После того, как вы нажмете значок микрофона, вам будет предложено дать разрешение на использование микрофона в браузере.
Один раз вы нажимаете «Разрешить», теперь он готов к использованию, и вы можете начать говорить, и он отобразит текст в поле ввода поиска. Когда мы видим красную точку в браузере, мы можем сказать, что браузер слушает. Вот пример, мы говорим «iPhone», а поле ввода заполнено «iPhone»
Окончательный код в catalog/view/theme/default/template/common/search.twig будет выглядеть следующим образом:
<div id="search" class="input-group">
<style>
.speech {
width: 15%;
float: left;
border: 1px solid #ccc;
border-radius: 10px 0px 0px 10px;
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
border-right: 0px;
align-items: center;
display: flex;
height: 40px;
}
.speech img {
width: 20px;
position: relative;
margin: auto;
}
#search .input-lg {
height: 40px;
line-height: 20px;
padding: 0 10px;
border-left-width: 0px;
border-radius: 0px;
width:85%;
}
</style>
<script>
function startDictation() {
if (window.hasOwnProperty('webkitSpeechRecognition')) {
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.lang = 'en-US';
recognition.start();
recognition.onresult = function (e) {
document.getElementsByClassName('form-control')[0].value = e.results[0][0].transcript;
recognition.stop();
document.getElementsByClassName('btn-default')[0].submit();
};
recognition.onerror = function (e) {
recognition.stop();
};
}
}
</script>
<div class="speech">
<img onclick="startDictation()"
src="https://webocreation.com/wp-content/uploads/2022/02/voice-icons.png" />
</div>
<input type="text" name="search" value="{{ search }}" placeholder="{{ text_search }}" class="form-control input-lg" />
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
</span>
</div>
Надеюсь, этот модуль поможет вам улучшить ваш веб-сайт и пользовательский опыт.