Web Speech API позволяет веб-разработчикам программно генерировавать и распознавать речь на веб-странице. Для этого Web Speech API определяет два интерфейса: SpeechRecognition (для распознавания речи) и SpeechSynthesis (для синтеза речи). Данный API (на момент написания текущей статьи) еще не является официальным стандартом W3C, и его поддержка в различных браузерах может отличаться. Вначале рассмотрим синтез речи.
На уровне браузера синтез речи доступен через свойство speechSynthesis объекта window,
которое представляет SpeechSynthesis и через которое можно проверить поддержку браузером синтеза речи:
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:
const utterance = new SpeechSynthesisUtterance(); utterance.text = "Hello World";
Непосредственно для синтеза речи и ее управлением вызывается один из методов типа SpeechSynthesis:
cancel(): удаляет все высказывания из очереди высказываний.
getVoices(): возвращает список объектов SpeechSynthesisVoice, представляющих все доступные голоса на текущем устройстве.
pause(): приостанавливает синтез речи.
resume(): возобновляет синтез речи (если он ранее был приостановлен).
speak(): добавляет высказывание в очередь высказываний для последующего произнесения
Например, синтезируем речь для простейшего текста:
<!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 требуется, чтобы пользователь активировал действие. Именно поэтому здесь синтез выполняется по нажатию на кнопку, а не сразу при загрузке страницы.
Дополнительно можно настроить и другие настройки речи:
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. Каждый голос имеет разные свойства, включая имя и связанное с ним сокращение страны или языка. И мы можем перебрать все голоса в цикле:
const voices = window.speechSynthesis.getVoices();
voices.forEach(function(voice) {
console.log(voice.lang);
console.log(voice.name);
});
Выбрав нужный голос, его можно установить с помощью свойства voices объекта SpeechSynthesisUtterance
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
Для демонстрации обработаем пару событий:
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);
}
}