SpeechSynthesisUtterance

Интерфейс SpeechSynthesisUtterance из Web Speech API представляет собой запрос на озвучивание. Он содержит текст, который должна прочитать служба озвучивания, а также информацию о том, как его прочитать (например, язык, тембр и громкость).

SpeechSynthesisUtterance()

Возвращает новый экземпляр объекта SpeechSynthesisUtterance.

SpeechSynthesisUtterance также наследует свойства от своего родительского интерфейса, EventTarget.

SpeechSynthesisUtterance.lang

Получает и устанавливает язык высказывания.

SpeechSynthesisUtterance.pitch

Получает и устанавливает тембр, с которым будет произнесено высказывание.

SpeechSynthesisUtterance.rate

Получает и устанавливает скорость произнесения высказывания.

SpeechSynthesisUtterance.text

Получает и устанавливает текст, который будет синтезирован при озвучивании высказывания.

SpeechSynthesisUtterance.voice

Получает и устанавливает голос, который будет использоваться для озвучивания высказывания.

SpeechSynthesisUtterance.volume

Получает и устанавливает громкость, с которой будет произнесено высказывание.

Прислушивайтесь к этим событиям с помощью addEventListener() или назначив обработчик событий свойству oneventname этого интерфейса.

boundary

Срабатывает, когда произносимое высказывание достигает границы слова или предложения. Также доступно через свойство onboundary.

end

Срабатывает, когда высказывание закончено. Также доступно через свойство onend.

error

Срабатывает, когда возникает ошибка, которая препятствует успешному озвучиванию высказывания. Также доступно через свойство onerror

mark

Срабатывает, когда произносимое высказывание достигает именованного тега SSML "mark". Также доступно через свойство onmark.

pause

Срабатывает, когда высказывание приостановлено в процессе озвучивания. Также доступно через свойство onpause.

resume

Срабатывает, когда приостановленное высказывание возобновлено. Также доступно через свойство onresume.

start

Срабатывает, когда высказывание начинает озвучиваться. Также доступно через свойство onstart.

В нашей демонстрации базового синтезатора речи Демонстрация синтезатора речи, мы сначала получаем ссылку на контроллер SpeechSynthesis, используя window.speechSynthesis. После определения необходимых переменных, мы получаем список доступных голосов, используя SpeechSynthesis.getVoices(), и заполняем им выпадающий список, чтобы пользователь мог выбрать голос.

Внутри обработчика inputForm.onsubmit мы останавливаем отправку формы с помощью preventDefault(), используем constructor для создания нового экземпляра высказывания, содержащего текст из текстового <input>, устанавливаем голос высказывания voice на выбранный в элементе <select> и запускаем озвучивание высказывания через метод SpeechSynthesis.speak().

const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

let voices;

function loadVoices() {
  voices = synth.getVoices();
  for (let i = 0; i < voices.length; i++) {
    const option = document.createElement("option");
    option.textContent = `${voices[i].name} (${voices[i].lang})`;
    option.value = i;
    voiceSelect.appendChild(option);
  }
}

// in Google Chrome the voices are not ready on page load
if ("onvoiceschanged" in synth) {
  synth.onvoiceschanged = loadVoices;
} else {
  loadVoices();
}

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  utterThis.voice = voices[voiceSelect.value];
  synth.speak(utterThis);
  inputTxt.blur();
};

• API веб-речи