Окно: свойство speechSynthesis

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2018 года.

Чтение только свойство speechSynthesis объекта Window возвращает объект SpeechSynthesis, являющийся точкой входа для использования функциональности синтеза речи API Web Speech.

Значение

Объект SpeechSynthesis.

Примеры

В нашем базовом демо синтеза речи мы сначала получаем ссылку на контроллер 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("input");
const voiceSelect = document.querySelector("select");

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

  for (const voice of voices) {
    const option = document.createElement("option");
    option.textContent = `${voice.name} (${voice.lang})`;

    if (voice.default) {
      option.textContent += " — DEFAULT";
    }

    option.setAttribute("data-lang", voice.lang);
    option.setAttribute("data-name", voice.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");
  utterThis.voice = voices.find((v) => v.name === selectedOption);
  synth.speak(utterThis);
  inputTxt.blur();
};

Спецификации

Спецификация
API Web Speech # tts-section

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`speechSynthesis`	33	14	49	20	7	33	62	Нет	7	2.0	Нет

См. также

API Web Speech

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis