Распознавание речи и создание голосового поиска с помощью JavaScript

Чтобы добавить распознавание речи и голосовой поиск на веб-сайт с помощью JavaScript, вы можете использовать Web Speech API, встроенную функцию браузера, которая позволяет разработчикам получать доступ к микрофону и преобразовывать речь в текст.

Вот пример того, как использовать Web Speech API для добавления голосового поиска на сайт:

Сначала создайте HTML-форму с полем ввода текста, кнопкой для запуска распознавания речи и кнопкой для остановки распознавания речи.

<!DOCTYPE html>
<html>
<head>
  <title>Creating a voice search in JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container">
    <form>
      <input type="text" id="search-input" placeholder="Search...">
      <button type="button" id="start-button">Start</button>
      <button type="button" id="stop-button">Stop</button>
    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>

Стилизация разметки с помощью CSS (необязательно).

.container {
  width: 500px;
  margin: 10px auto;
  background-color: rgb(235, 235, 235);
  padding: 20px;
  border-radius: 5px;
  font-size: 18px;
}

#search-input{
  padding: 7px;
  border: 1px solid rgb(111, 111, 111);
  width: 300px;
  border-radius: 5px;
  font-size: 18px;
}

button {
  padding: 10px 0;
  border: none;
  margin-left: 5px;
  border-radius: 5px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-transform: uppercase;
  width: 80px;
  transition: all 0.5s;
}

button:hover {
  cursor: pointer;
  opacity: 0.8;
}

#start-button{
  background-color: rgb(13, 156, 0);
}

#stop-button{
  background-color: rgb(156, 34, 0);
}

В файле JavaScript проверьте, поддерживает ли браузер Web Speech API, проверив наличие объекта webkitSpeechRecognition:

if ('webkitSpeechRecognition' in window) {
  // Web Speech API is supported
} else {
  // Web Speech API is not supported
}

Если Web Speech API поддерживается, создайте новый экземпляр объекта webkitSpeechRecognition и добавьте прослушиватели событий для событий результата (result) и окончания (end):

const recognition = new webkitSpeechRecognition();

recognition.lang = 'en-US';
recognition.interimResults = true;

recognition.addEventListener('result', function(e) {
  // Get the transcript of the speech
  const transcript = e.results[0][0].transcript;
  // Set the value of the text input field to the transcript
  document.getElementById("search-input").value = transcript;
});

recognition.addEventListener('end', recognition.start);

Добавьте прослушиватель событий щелчка (click) к кнопке запуска, который запускает сеанс распознавания при нажатии:

document.getElementById("start-button").addEventListener("click", () => {
    recognition.start();
});

Добавьте к кнопке остановки прослушиватель событий щелчка (click), который останавливает сеанс распознавания при нажатии:

document.getElementById("stop-button").addEventListener("click", () => {
    recognition.stop();
});

Затем вы можете использовать значение расшифровки в функции поиска или AJAX-вызове сервера, чтобы вернуть результаты поиска на страницу.

function search(){
  const searchTerm = document.getElementById("search-input").value;
  // call ajax function to send searchTerm to the server and fetch search results
}

Важно отметить, что Web Speech API может не распознавать все языки или диалекты. Если вы планируете поддерживать большое количество языков, рекомендуется проверить, может ли API распознавать выбранный язык, протестировав его перед использованием в реальном проекте.

Также стоит отметить, что модель распознавания речи, которую использует Web Speech API, также будет играть роль в том, насколько хорошо он может понимать разные языки. Если вы хотите улучшить распознавание разных языков, вы можете использовать стороннюю службу распознавания речи, такую как Google Speech-to-Text, которая может поддерживать широкий спектр языков и диалектов.

Ниже приведен полный код JavaScript файла.

if ('webkitSpeechRecognition' in window) {
  const recognition = new webkitSpeechRecognition();

  recognition.lang = 'en-US';
  recognition.interimResults = true;

  recognition.addEventListener('result', (e) => {
    // Get the transcript of the speech
    const transcript = e.results[0][0].transcript;
    // Set the value of the text input field to the transcript
    document.getElementById("search-input").value = transcript;
    document.getElementById("search-text").innerHTML = transcript;
  });

  recognition.addEventListener('end', recognition.start);
  
  document.getElementById("start-button").addEventListener("click", () => {
    recognition.start();
  });

  document.getElementById("stop-button").addEventListener("click", () => {
      recognition.stop();
  });

  function search(){
    const searchTerm = document.getElementById("search-input").value;
    // call ajax function to send searchTerm to the server and fetch search results
  }

} else {
  // Web Speech API is not supported
  alert("Web Speech API is not supported");
}