Web Speech API позволяет веб-разработчикам программно генерировавать и распознавать речь на веб-странице. Для этого Web Speech API определяет два интерфейса: SpeechRecognition (для распознавания речи) и SpeechSynthesis (для синтеза речи). Данный API (на момент написания текущей статьи) еще не является официальным стандартом W3C, и его поддержка в различных браузерах может отличаться. Вначале рассмотрим синтез речи.
На уровне браузера синтез речи доступен через свойство speechSynthesis объекта window, которое представляет SpeechSynthesis и через которое можно проверить поддержку браузером синтеза речи:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
if(window.speechSynthesis) { console.log("Синтез речи поддерживается");} else { console.log("Синтез речи НЕ поддерживается");}// Альтернативный способ проверки if("speechSynthesis" in window) { console.log("Синтез речи поддерживается");} else { console.log("Синтез речи НЕ поддерживается");} |
Для синтеза речи применяется объект типа SpeechSynthesisUtterance, который представляет собой отдельное высказывание и который позволяет определить конфигурацию синтеза с помощью ряда свойств:
-
lang: получает и устанавливает язык высказывания.
-
pitch: получает и задает высоту звука, с которой будет произнесено высказывание.
-
rate: получает и задает скорость произнесения высказывания.
-
text: получает и задает текст, который будет синтезироваться при произнесении высказывания.
-
voice: получает и задает голос, который будет использоваться для произнесения высказывания.
-
volume: получает и задает громкость произнесения высказывания.
В общем случае нам достаточно установить свойство text:
|
1
2
|
const utterance = new SpeechSynthesisUtterance();utterance.text = "Hello World"; |
Непосредственно для синтеза речи и ее управлением вызывается один из методов типа SpeechSynthesis:
-
cancel(): удаляет все высказывания из очереди высказываний.
-
getVoices(): возвращает список объектов SpeechSynthesisVoice, представляющих все доступные голоса на текущем устройстве.
-
pause(): приостанавливает синтез речи.
-
resume(): возобновляет синтез речи (если он ранее был приостановлен).
-
speak(): добавляет высказывание в очередь высказываний для последующего произнесения
Например, синтезируем речь для простейшего текста:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>METANIT.COM</title></head><body><input id="text" value="Hello World" /><button id="btn">Speak</button><script>document.getElementById("btn").addEventListener("click", speak);function speak(){ if(window.speechSynthesis) { const utterance = new SpeechSynthesisUtterance(); utterance.text = document.getElementById("text").value; window.speechSynthesis.speak(utterance); } else{ console.log("Feature not supported"); }}</script></body></html> |
В данном случае по нажатию на кнопку будет синтезироваться речь для текста, который введен в текстовое поле. Стоит отметить, что в браузерах могут действовать ограничения на запуск синтеза, так в Google Chrome требуется, чтобы пользователь активировал действие. Именно поэтому здесь синтез выполняется по нажатию на кнопку, а не сразу при загрузке страницы.
Дополнительно можно настроить и другие настройки речи:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
document.getElementById("btn").addEventListener("click", speak);function speak(){ if(window.speechSynthesis) { const utterance = new SpeechSynthesisUtterance(); utterance.text = "Привет"; utterance.lang = "ru"; // аббревиатура языка utterance.volume = 0.5; // громкость utterance.rate = 0.5; // скорость utterance.pitch = 0.5; // высота window.speechSynthesis.speak(utterance); }} |
Выбор голоса
Если браузер поддерживает несколько голосов, то их можно выбрать с помощью метода getVoices() объекта SpeechSynthesis. Каждый голос имеет разные свойства, включая имя и связанное с ним сокращение страны или языка. И мы можем перебрать все голоса в цикле:
|
1
2
3
4
5
|
const voices = window.speechSynthesis.getVoices(); voices.forEach(function(voice) { console.log(voice.lang); console.log(voice.name);}); |
Выбрав нужный голос, его можно установить с помощью свойства voices объекта SpeechSynthesisUtterance
|
1
2
3
4
5
6
7
8
9
10
|
document.getElementById("btn").addEventListener("click", speak);function speak(){ if(window.speechSynthesis) { const utterance = new SpeechSynthesisUtterance(); utterance.text = "Привет"; const voices = window.speechSynthesis.getVoices(); const selectedVoice = voices[0]; // выбираем первый голос window.speechSynthesis.speak(utterance); }} |
Но стоит отметить, что в моем случае, хотя список выдавал три русскоязычных голоса, все они были идентичны первому.
События синтеза речи
В процессе синтеза речи могут возникать различные события (на объекте SpeechSynthesisUtterance):
-
boundary: возникает при достижении границы слова или фразы. Обработчик устанавливается с помощью свойства
onboundary -
end: возникает при завершении речи. Обработчик устанавливается с помощью свойства
onend -
error: возникает при воникновении ошибки. Обработчик устанавливается с помощью свойства
onerror -
mark: возникает, когда речь достигает именованного тега "метки" SSML. Обработчик устанавливается с помощью свойства
onmark -
pause: возникает, когда речь приостановлена. Обработчик устанавливается с помощью свойства
onpause -
resume: возникает, когда речь возобновлена. Обработчик устанавливается с помощью свойства
onresume -
start: возникает при начале речи. Обработчик устанавливается с помощью свойства
onstart
Для демонстрации обработаем пару событий:
|
1
2
3
4
5
6
7
8
9
10
|
document.getElementById("btn").addEventListener("click", speak);function speak(){ if(window.speechSynthesis) { const utterance = new SpeechSynthesisUtterance(); utterance.onstart = () => console.log("Начало речи"); utterance.onend = () => console.log("Конец речи"); utterance.text = "Привет"; window.speechSynthesis.speak(utterance); }} |