From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001
From: Alexey Istomin Web Speech API позволяет веб приложениям управлять голосовыми данными. Существует два компонента к этому API: Web Speech API предоставляет 2 основных типа функционала — распознавание речи пользователя и речевое воспроизведение текста. Это предоставляет новые возможности для взаимодействия с интерфейсом и открывает перед нами новые горизонты создания уникального пользовательского опыта. Эта статья дает краткое описание обоих направлений с примерами кода и ссылкой на работающее приложение онлайн. Web Speech API предоставляет 2 основных типа функционала — распознавание речи пользователя и речевое воспроизведение текста. Это предоставляет новые возможности для взаимодействия с интерфейсом и открывает перед нами новые горизонты создания уникального пользовательского опыта. Эта статья даёт краткое описание обоих направлений с примерами кода и ссылкой на работающее приложение онлайн. Механизм распознавания речи способен принимать речевой поток через микрофон устройства, а затем проверять его, используя свои внутренние алгоритмы. Для более точной работы рекомендуется использовать интерфейс SpeechGrammar, предоставляющий контейнер для определенного набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью JSpeech Grammar Format(JSGF.). Механизм распознавания речи способен принимать речевой поток через микрофон устройства, а затем проверять его, используя свои внутренние алгоритмы. Для более точной работы рекомендуется использовать интерфейс SpeechGrammar, предоставляющий контейнер для определённого набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью JSpeech Grammar Format(JSGF.). После того, как пользовательская речь была распознана, алгоритм возвращает результат (список результатов) в качестве текстовой строки, с которой мы можем продолжить работу. Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом: Поддержка интерфейса ещё только распространяется на основные браузеры, и на текущий момент ограничена следующим образом: Разметка и стили предельно просты. У нас есть значок микрофона, на который мы можем кликнуть для начала записи, анимация звукозаписи, которая включается после клика, и фоновый контейнер, который будет изменять свой цвет, в зависимости от того, что озвучит пользователь. CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах CSS задаёт простые отзывчивые стили, для корректного отображения и работы на всех устройствах Вторая строка указывает значение, которое мы хотим распознать. public объявляет, что это общедоступное правило, строка в угловых скобках определяет распознанное имя для этого значения (цвет), а список элементов, следующих за знаком равенства, - это альтернативные варианты, которые будут распознаны и могут быть приняты в качестве возможного значения. Обратите внимание, как каждый из них разделяется вертикальной линией (“|” - “pipe character”). У вас может быть множество значений, определенных отдельно, как указано выше, и содержащих довольно сложные определения грамматики. Для нашего демонстрационного примера мы делаем все просто. У вас может быть множество значений, определённых отдельно, как указано выше, и содержащих довольно сложные определения грамматики. Для нашего демонстрационного примера мы делаем все просто. Следующее, что нужно сделать, это определить экземпляр объекта распознавания речи для управления записью нашего приложения. Это делается с помощью конструктора Это делается с помощью конструктора Затем мы добавляем Затем мы добавляем Внимание: Внимание: Вы можете получить аналогичный результат, просто прекратив распознавание после получения первого результата. После получения ссылок на DOM-элементы, необходимые нам для обработки пользовательских событий и обновления цвета фона приложения, мы реализуем обработчик После получения ссылок на DOM-элементы, необходимые нам для обработки пользовательских событий и обновления цвета фона приложения, мы реализуем обработчик После того, как процесс распознавания речи был запущен, есть много обработчиков событий, которые могут быть использованы для работы с результатом и другой сопутствующей информацией (см. Список обработчиков событий SpeechRecognition.) Наиболее распространенный, который вы, вероятно, и будете использовать, это SpeechRecognition.onresult, который запускается сразу после получения успешного результата. Значение цвета получаем вызовом функции После того, как процесс распознавания речи был запущен, есть много обработчиков событий, которые могут быть использованы для работы с результатом и другой сопутствующей информацией (см. Список обработчиков событий SpeechRecognition.) Наиболее распространённый, который вы, вероятно, и будете использовать, это SpeechRecognition.onresult, который запускается сразу после получения успешного результата. Значение цвета получаем вызовом функции Третья строка здесь выглядит немного усложненной, поэтому давайте разберемся с ней подробнее. Свойство Третья строка здесь выглядит немного усложнённой, поэтому давайте разберёмся с ней подробнее. Свойство Мы также используем свойство Последние два обработчика используются для отлова ошибок: когда речь была признана не в соответствии с определенной грамматикой или произошла ошибка. По логике, Последние два обработчика используются для отлова ошибок: когда речь была признана не в соответствии с определённой грамматикой или произошла ошибка. По логике, Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом: Поддержка интерфейса ещё только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:
-
diff --git a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html
index 27aa08113f..c78a987ba5 100644
--- a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html
+++ b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html
@@ -9,11 +9,11 @@ tags:
- Синтез речи
translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API
---
-Распознавание речи
-Браузерная поддержка
-
@@ -108,7 +108,7 @@ const grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colorsLi
JavaScript
@@ -74,8 +74,8 @@ const SpeechRecognitionEvent = window.SpeechRecognitionEvent || window.webkitSpe
const colors = {
красный: 'red',
оранжевый: 'orange',
- желтый: 'yellow',
- зеленый: 'green',
+ жёлтый: 'yellow',
+ зелёный: 'green',
голубой: 'blue',
синий: 'darkblue',
фиолетовый: 'violet'
@@ -100,7 +100,7 @@ const grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colorsLi
SpeechRecognition()
. Мы также создаем новый речевой грамматический список, чтобы содержать нашу грамматику, используя конструктор SpeechGrammarList()
.SpeechRecognition()
. Мы также создаём новый речевой грамматический список, чтобы содержать нашу грамматику, используя конструктор SpeechGrammarList()
.const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
@@ -118,7 +118,7 @@ const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
-SpeechGrammarList
к уже созданному объекту распознавания речи, присваивая его значение свойству SpeechRecognition.grammars
. Также зададим еще несколько свойств объекту, прежде чем двигаться дальше:SpeechGrammarList
к уже созданному объекту распознавания речи, присваивая его значение свойству SpeechRecognition.grammars
. Также зададим ещё несколько свойств объекту, прежде чем двигаться дальше:
SpeechRecognition.continuous
задает, отслеживаются ли продолжающиеся результаты или только 1 результат, каждый раз, когда запись начата. Это закомментировано, поскольку данное свойство в еще не реализовано в Gecko.SpeechRecognition.continuous
задаёт, отслеживаются ли продолжающиеся результаты или только 1 результат, каждый раз, когда запись начата. Это закомментировано, поскольку данное свойство в ещё не реализовано в Gecko.Запуск распознавания речи
-onclick
, чтобы при нажатии на значок микрофона сервис распознавания речи начинал работу. Запуск происходит путем вызова функции SpeechRecognition.start()
.onclick
, чтобы при нажатии на значок микрофона сервис распознавания речи начинал работу. Запуск происходит путём вызова функции SpeechRecognition.start()
.microphoneIcon.onclick = function() {
recognition.start();
@@ -162,7 +162,7 @@ recognition.onaudiostart = function() {
Получение и обработка результата
-getColor()
getColor()
function getColor(speechResult) {
for (let index = 0; index < colorsList.length; index += 1) {
@@ -182,7 +182,7 @@ recognition.onresult = function(event) {
console.log('Confidence: ' + event.results[0][0].confidence);
};
-SpeechRecognitionEvent.results
возвращает объект SpeechRecognitionResultList
, содержащий в себе другие объекты типа SpeechRecognitionResult
. У него есть геттер, поэтому он может быть доступен как массив, поэтому переменная last
определяет ссылку на SpeechRecognitionResult
из списка. Каждый объект SpeechRecognitionResult
содержит объекты SpeechRecognitionAlternative
, которые содержат отдельные распознанные слова. Они также имеют геттеры, поэтому к ним можно получить доступ как к массивам, поэтому логично, что [0] возвращает значение SpeechRecognitionAlternative
по индексу 0. Затем мы возвращаем строку, содержащую индивидуально распознанный результат, используя который и можем установить цвет фона.SpeechRecognitionEvent.results
возвращает объект SpeechRecognitionResultList
, содержащий в себе другие объекты типа SpeechRecognitionResult
. У него есть геттер, поэтому он может быть доступен как массив, поэтому переменная last
определяет ссылку на SpeechRecognitionResult
из списка. Каждый объект SpeechRecognitionResult
содержит объекты SpeechRecognitionAlternative
, которые содержат отдельные распознанные слова. Они также имеют геттеры, поэтому к ним можно получить доступ как к массивам, поэтому логично, что [0] возвращает значение SpeechRecognitionAlternative
по индексу 0. Затем мы возвращаем строку, содержащую индивидуально распознанный результат, используя который и можем установить цвет фона.SpeechRecognition.speechend
, чтобы задать обработчик на завершение работы распознавателя речи (вызов SpeechRecognition.stop()
), как только одно слово было распознано, и входящий речевой поток был остановлен.Обработка ошибок
-SpeechRecognition.onnomatch
, должен обрабатывать первый случай, но обратите внимание, что на данный момент он не срабатывает правильно в Firefox или Chrome, он просто возвращает все, что было распознано в любом случае:SpeechRecognition.onnomatch
, должен обрабатывать первый случай, но обратите внимание, что на данный момент он не срабатывает правильно в Firefox или Chrome, он просто возвращает все, что было распознано в любом случае:recognition.onnomatch = function(event) {
alert("I didn't recognise that color.");
@@ -229,7 +229,7 @@ recognition.onresult = function(event) {
Браузерная поддержка
-
Элемент <select>
изначально пуст, но заполняется с помощью <option>
через JavaScript (см. ниже).
CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах
+CSS задаёт простые отзывчивые стили, для корректного отображения и работы на всех устройствах
<section> <h1>Синтез речи</h1> @@ -292,7 +292,7 @@ recognition.onresult = function(event) {Задание переменных
-Прежде всего, создаем ссылки на все нужные нам DOM-элементы.
+Прежде всего, создаём ссылки на все нужные нам DOM-элементы.
Входная точка API -
@@ -308,9 +308,9 @@ let voices = [];window.speechSynthesis
, возвращает экземплярSpeechSynthesis
, интерфейс контроллера для синтеза речи в вебе.
Чтобы заполнить элемент <select>
различными вариантами голоса, доступных на устройстве, напишем функцию populateVoiceList()
. Сначала мы вызываем SpeechSynthesis.getVoices()
, который возвращает список всех доступных вариантов голосов, представленных объектами SpeechSynthesisVoice
. Затем мы проходимся по списку, создавая элемент <option>
для каждого отдельного случая, задаем его текстовое содержимое, соответствующее названию голоса (взято из SpeechSynthesisVoice.name
), языка голоса (из SpeechSynthesisVoice.lang
), и “по умолчанию”, если голос является голосом по умолчанию для механизма синтеза (проверяется, если функция SpeechSynthesisVoice.default
возвращает значение true
.)
Чтобы заполнить элемент <select>
различными вариантами голоса, доступных на устройстве, напишем функцию populateVoiceList()
. Сначала мы вызываем SpeechSynthesis.getVoices()
, который возвращает список всех доступных вариантов голосов, представленных объектами SpeechSynthesisVoice
. Затем мы проходимся по списку, создавая элемент <option>
для каждого отдельного случая, задаём его текстовое содержимое, соответствующее названию голоса (взято из SpeechSynthesisVoice.name
), языка голоса (из SpeechSynthesisVoice.lang
), и “по умолчанию”, если голос является голосом по умолчанию для механизма синтеза (проверяется, если функция SpeechSynthesisVoice.default
возвращает значение true
.)
Мы также задаем data-
атрибуты для каждого варианта, содержащие имя и язык связанного голоса, благодаря чему мы можем легко их собрать их позже, а затем вложить все варианты в качестве дочерних элементов нашего списка (<select>
).
Мы также задаём data-
атрибуты для каждого варианта, содержащие имя и язык связанного голоса, благодаря чему мы можем легко их собрать их позже, а затем вложить все варианты в качестве дочерних элементов нашего списка (<select>
).
function populateVoiceList() { voices = synth.getVoices(); @@ -340,11 +340,11 @@ let voices = [];speechSynthesis.onvoiceschanged = populateVoiceList; } -
Затем мы создаем обработчик событий, чтобы начать “произносить” текст, введенный в текстовом поле, при нажатии на кнопку Enter/Return
или на Play
. Для этого используем обработчик onsubmit
в html-формы. В функции-обработчике speak()
мы создаем новый экземпляр SpeechSynthesisUtterance()
, передавая значение текстового поля в конструктор.
Затем мы создаём обработчик событий, чтобы начать “произносить” текст, введённый в текстовом поле, при нажатии на кнопку Enter/Return
или на Play
. Для этого используем обработчик onsubmit
в html-формы. В функции-обработчике speak()
мы создаём новый экземпляр SpeechSynthesisUtterance()
, передавая значение текстового поля в конструктор.
Затем нам нужно выяснить, какой голос использовать. Мы используем свойство HTMLSelectElement
selectedOptions
для получения выбранного элемента <option>
, у которого берем атрибут data-name, и находим объект SpeechSynthesisVoice
, имя которого соответствует значению имеющегося атрибута. После этого устанавливаем соответствующий “голосовой” объект как значение свойства SpeechSynthesisUtterance.voice
.
Затем нам нужно выяснить, какой голос использовать. Мы используем свойство HTMLSelectElement
selectedOptions
для получения выбранного элемента <option>
, у которого берём атрибут data-name, и находим объект SpeechSynthesisVoice
, имя которого соответствует значению имеющегося атрибута. После этого устанавливаем соответствующий “голосовой” объект как значение свойства SpeechSynthesisUtterance.voice
.
Наконец, мы устанавливаем SpeechSynthesisUtterance.pitch
(высота тона) и SpeechSynthesisUtterance.rate
(скорость) в соответствии со значениями соответствующих элементов формы. Затем, после всего проделанного, мы запускаем произношение речи, вызывая SpeechSynthesis.speak()
, и передавая ему экземпляр SpeechSynthesisUtterance
в качестве аргумента.
В последней части функции мы включаем обработчик SpeechSynthesisUtterance.onpause
, чтобы показать пример применения SpeechSynthesisEvent
в различных ситуациях. Вызов SpeechSynthesis.pause()
возвращает сообщение с информацией о номере символа и слове, на котором была вызвана пауза.
Наконец, мы назовем blur()
у текстового поля. Это, прежде всего, для того, чтобы скрыть клавиатуру в ОС Firefox.
Наконец, мы назовём blur()
у текстового поля. Это, прежде всего, для того, чтобы скрыть клавиатуру в ОС Firefox.
function speak() { if (synth.speaking) { -- cgit v1.2.3-54-g00ecf