
Содержание статьи
«За этот 10-летний промежуток времени, я считаю, что мы будем использовать не только клавиатуру и мышь для взаимодействия, но в течение этого времени мы усовершенствуем распознавание речи и вывод вещания настолько хорошо, что они станут стандартной частью интерфейса». — Билл Гейтс, 1 октября 1997 г.
Технологии прошли долгий путь, и с каждым новым прогрессом человечество становится все более привязанным к ним и стремится к новым интересным функциям на всех устройствах.
С появлением Siri, Alexa и Google Assistant пользователи технологий стремились к распознаванию речи во время ежедневного пользования Интернетом. В этой публикации я расскажу, как интегрировать распознавание и синтез речи в браузере с помощью JavaScript WebSpeech API.
В соответствии с веб-документами Mozilla:
Web Speech API позволяет включать голосовые данные в веб-приложения. Web Speech API состоит из двух частей: SpeechSynthesis (превращение текста в речь) и SpeechRecognition (асинхронное распознавание речи).
Требования, которые нам понадобятся для создания нашей программы
В этом простом приложении для распознавания речи мы будем работать только с тремя файлами, которые будут размещаться в одном каталоге:
index.html
содержит HTML для приложения.style.css
содержит стили CSS.index.js
содержит код JavaScript.
Кроме того, нам нужно иметь несколько вещей на месте. Они такие:
- Базовые знания JavaScript.
- Веб-сервер для запуска программы. Веб-сервер для Chrome будет достаточно для этой цели.
Настройка программы для распознавания речи
Давайте начнем с настройки HTML и CSS для программы. Ниже приведена разметка HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Speech Recognition</title>
<link rel="stylesheet" href="
<link href=" rel="stylesheet">
<!-- load font awesome here for icon used on the page -->
</head>
<body>
<div class="container"> <!--page container -->
<div class="text-box" contenteditable="true"></div> <!--text box which will contain spoken text -->
<i class="fa fa-microphone"></i> <!-- microphone icon to be clicked before speaking -->
</div>
<audio class="sound" src="chime.mp3"></audio> <!-- sound to be played when we click icon => -->
<script src="index.js"></script> <!-- link to index.js script -->
</body>
</html>
Вот его сопроводительный стиль CSS:
body {
background: #1e2440;
color: #f2efe2;
font-size: 16px;
font-family: 'Kaushan Script', cursive;
font-family: 'Shadows Into Light', cursive;
}
.container {
position: relative;
border: 1px solid #f2efe2;
width: 40vw;
max-width: 60vw;
margin: 0 auto;
border-radius: 0.1rem;
background: #f2efe2;
padding: 0.2rem 1rem;
color: #1e2440;
overflow: scroll;
margin-top: 10vh;
}
.text-box {
max-height: 70vh;
overflow: scroll;
}
.text-box:focus {
outline: none;
}
.text-box p {
border-bottom: 1px dotted black;
margin: 0px !important;
}
.fa {
color: white;
background: #1e2440;
border-radius: 50%;
cursor: pointer;
margin-top: 1rem;
float: right;
width: 2rem;
height: 2rem;
display: flex !important;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.container {
width: 85vw;
max-width: 85vw;
}
.text-box {
max-height: 55vh;
}
}
Копирование кода выше должно привести к чему-либо подобному:

Расширение нашей программы распознавания речи с помощью WebSpeech API
На момент написания статьи API WebSpeech доступен только в Firefox и Chrome. Его интерфейс синтеза речи живет в браузере window
объект как speechSynthesis
тогда как его интерфейс распознавания речи живет в браузере window
объект как SpeechRecognition
в Firefox и как webkitSpeechRecognition
в Chrome.
Мы настроим интерфейс распознавания на SpeechRecognition
независимо от используемого браузера:
window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
Далее мы создадим экземпляр интерфейса распознавания речи:
const recognition = new SpeechRecognition();
const icon = document.querySelector('i.fa.fa-microphone')
let paragraph = document.createElement('p');
let container = document.querySelector('.text-box');
container.appendChild(paragraph);
const sound = document.querySelector('.sound');
В приведенном выше коде, кроме распознавания речи, мы также выбрали icon
, text-box,
и sound
элементы на странице. Мы также создали элемент абзаца, который будет содержать слова, которые мы говорим, и мы добавили его в text-box
.
Каждый раз, когда мы нажимаем значок микрофона на странице, мы хотим воспроизвести звук и запустить службу распознавания речи. Чтобы достичь этого, мы добавляем к значку прослушивателя событий клика:
icon.addEventListener('click', () => {
sound.play();
dictate();
});
const dictate = () => {
recognition.start();
}
В прослушивателе событий после воспроизведения звука мы создали и вызвали a dictate
функция. The dictate
функция запускает службу распознавания речи, вызывая start
метод на экземпляре распознавания речи.
Чтобы вернуть результат для любого пользовательского слова, нам нужно добавить a result
события к нашему экземпляру распознавания речи. The dictate
тогда функция будет выглядеть так:
const dictate = () => {
recognition.start();
recognition.onresult = (event) => {
const speechToText = event.results[0][0].transcript;
paragraph.textContent = speechToText;
}
}
Полученный event
возвращает а SpeechRecognitionEvent
который содержит a results
объект. Это, в свою очередь, содержит transcript
свойство содержания распознанной речи в тексте. Мы сохраняем распознанный текст в переменной под названием speechToText
и поместите его в paragraph
элемент на странице.
Если мы запустим программу на этом этапе, нажмите icon
и скажите что-нибудь, оно должно появиться на странице.

Превращение текста в речь
Чтобы добавить текст к вещанию в нашу программу, мы воспользуемся speechSynthesis
интерфейс API WebSpeech. Мы начнем с его создания:
const synth = window.speechSynthesis;
Далее мы создадим функцию speak
которую мы будем вызывать, когда захотим, чтобы программа что-то сказала:
const speak = (action) => {
utterThis = new SpeechSynthesisUtterance(action());
synth.speak(utterThis);
};
The speak
функция принимает функцию под названием the action
как параметр. Функция возвращает передаваемую строку SpeechSynthesisUtterance
. SpeechSynthesisUtterance
это интерфейс API WebSpeech, содержащий содержимое, которое должно прочитать служба распознавания речи. Синтез речи speak
затем вызывается метод в его экземпляре и передается содержимое чтения.
Чтобы проверить это, нам нужно знать, когда пользователь закончил разговор и сказал a keyword.
К счастью, есть способ проверить это:
const dictate = () => {
...
if (event.results[0].isFinal) {
if (speechToText.includes('what is the time')) {
speak(getTime);
};
if (speechToText.includes('what is today\'s date
')) {
speak(getDate);
};
if (speechToText.includes('what is the weather in')) {
getTheWeather(speechToText);
};
}
...
}
const getTime = () => {
const time = new Date(Date.now());
return `the time is ${time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}`
};
const getDate = () => {
const time = new Date(Date.now())
return `today is ${time.toLocaleDateString()}`;
};
const getTheWeather = (speech) => {
fetch(` ')[5]}&appid=58b6f7c78582bffab3936dac99c31b25&units=metric`)
.then(function(response){
return response.json();
})
.then(function(weather){
if (weather.cod === '404') {
utterThis = new SpeechSynthesisUtterance(`I cannot find the weather for ${speech.split(' ')[5]}`);
synth.speak(utterThis);
return;
}
utterThis = new SpeechSynthesisUtterance(`the weather condition in ${weather.name} is mostly full of ${weather.weather[0].description} at a temperature of ${weather.main.temp} degrees Celcius`);
synth.speak(utterThis);
});
};
В вышеприведенном коде мы назвали isFinal
метод для нашего результата возвращающего события true
или false
в зависимости от того, закончил ли пользователь говорить.
Если пользователь закончил говорить, мы проверяем, содержит ли стенограмма сказанного такие ключевые слова, как what is the time
, и так дальше. Если да, мы звоним нашим speak
и передайте ей одну из трех функций getTime
, getDate
или getTheWeather
которые все возвращают строчку для чтения браузером.
Наши index.js
теперь файл должен выглядеть так:
window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
const synth = window.speechSynthesis;
const recognition = new SpeechRecognition();
const icon = document.querySelector('i.fa.fa-microphone')
let paragraph = document.createElement('p');
let container = document.querySelector('.text-box');
container.appendChild(paragraph);
const sound = document.querySelector('.sound');
icon.addEventListener('click', () => {
sound.play();
dictate();
});
const dictate = () => {
recognition.start();
recognition.onresult = (event) => {
const speechToText = event.results[0][0].transcript;
paragraph.textContent = speechToText;
if (event.results[0].isFinal) {
if (speechToText.includes('what is the time')) {
speak(getTime);
};
if (speechToText.includes('what is today\'s date')) {
speak(getDate);
};
if (speechToText.includes('what is the weather in')) {
getTheWeather(speechToText);
};
}
}
}
const speak = (action) => {
utterThis = new SpeechSynthesisUtterance(action());
synth.speak(utterThis);
};
const getTime = () => {
const time = new Date(Date.now());
return `the time is ${time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}`
};
const getDate = () => {
const time = new Date(Date.now())
return `today is ${time.toLocaleDateString()}`;
};
const getTheWeather = (speech) => {
fetch(` ')[5]}&appid=58b6f7c78582bffab3936dac99c31b25&units=metric`)
.then(function(response){
return response.json();
})
.then(function(weather){
if (weather.cod === '404') {
utterThis = new SpeechSynthesisUtterance(`I cannot find the weather for ${speech.split(' ')[5]}`);
synth.speak(utterThis);
return;
}
utterThis = new SpeechSynthesisUtterance(`the weather condition in ${weather.name} is mostly full of ${weather.weather[0].description} at a temperature of ${weather.main.temp} degrees Celcius`);
synth.speak(utterThis);
});
};
Давайте щелкнем значок и попробуем одну из следующих фраз:
- Который час?
- Какое сегодня число?
- Какая погода в Лагосе?
Мы должны получить ответ от программы.
Вывод
В этой статье мы смогли создать простую программу для распознавания речи. Есть еще несколько интересных вещей, которые мы можем сделать, например, выбрать другой голос для чтения пользователям, но я оставляю это делать вам.
Если у вас есть вопросы или отзывы, оставьте их в комментариях ниже. Я не могу дождаться, чтобы увидеть, что вы создадите из этого. Вы можете написать мне в Twitter @developia_.