SpeechSynthesis

Интерфейс SpeechSynthesis API речи веб-страниц — это интерфейс-контроллер для службы речи; он может использоваться для получения информации о доступных на устройстве голосах синтеза, запуска и приостановки речи и других команд.

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

SpeechSynthesis.paused Только для чтения

Булево значение, которое возвращает true , если объект SpeechSynthesis находится в приостановленном состоянии.

SpeechSynthesis.pending Только для чтения

Булево значение, которое возвращает true , если очередь произнесений содержит ещё не произнесённые произнесения.

SpeechSynthesis.speaking Только для чтения

Булево значение, которое возвращает true , если произнесение в настоящее время находится в процессе произнесения — даже если SpeechSynthesis находится в приостановленном состоянии.

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

SpeechSynthesis.cancel()

Удаляет все произнесения из очереди произнесений.

SpeechSynthesis.getVoices()

Возвращает список объектов SpeechSynthesisVoice, представляющих все доступные голоса на текущем устройстве.

SpeechSynthesis.pause()

Переводит объект SpeechSynthesis в состояние паузы.

SpeechSynthesis.resume()

Переводит объект SpeechSynthesis в состояние без паузы: возобновляет его, если он уже был приостановлен.

SpeechSynthesis.speak()

Добавляет utterance в очередь произнесений; он будет произнесён, когда все другие произнесения, стоящие в очереди перед ним, будут произнесены.

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

voiceschanged

Вызывается, когда изменился список объектов SpeechSynthesisVoice, которые будут возвращены методом SpeechSynthesis.getVoices(). Также доступно через свойство onvoiceschanged.

Сначала пример:

let utterance = new SpeechSynthesisUtterance("Hello world!");
speechSynthesis.speak(utterance);

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

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

const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");
const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");

let voices = [];

function populateVoiceList() {
  voices = synth.getVoices();

  for (let i = 0; i < voices.length; i++) {
    const option = document.createElement("option");
    option.textContent = `${voices[i].name} (${voices[i].lang})`;

    if (voices[i].default) {
      option.textContent += " — DEFAULT";
    }

    option.setAttribute("data-lang", voices[i].lang);
    option.setAttribute("data-name", voices[i].name);
    voiceSelect.appendChild(option);
  }
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

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

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
};

• API речи веб-страниц