JavaScript может говорить! Использование API синтеза речи

Очень мало используемая функция в браузерах — преобразование текста в речь. С помощью Speech Synthesis API вы можете использовать JavaScript, чтобы «заставить браузер говорить». Вот пример:

const message = new SpeechSynthesisUtterance(
    "Hi! This is an example of the Speech Synthesis API"
);
message.lang = "en-US";

const voices = speechSynthesis
    .getVoices()
    .filter(voice => voice.lang === "en-US");
message.voice = voices[0];

speechSynthesis.speak(message);
Войти в полноэкранный режим Выход из полноэкранного режима

Посмотреть пример в реальном времени: https://jsfiddle.net/holanicozerpa/4h2sf9gL/6/

Как видно из примера, одной из ключевых частей API синтеза речи является класс SpeechSynthesisUtterance. Объект этого класса представляет текст, который впоследствии браузер будет читать вслух.

Другой ключевой частью является объект speechSynthesis. Это глобальный объект, который служит в качестве контроллера. Этот объект, помимо прочего, содержит список доступных голосов. Он также содержит важный метод speak.

Когда вы создаете SpeechSynthesisUtterance, вы можете задать текст двумя способами. Первый — поместить текст в конструктор (как в примере), а второй — использовать свойство text.

Хотя это и не обязательно, вы также должны установить язык. Это необходимо для того, чтобы иностранные пользователи не слушали текст на неправильном языке и с неправильным произношением.

В Firefox и Chrome достаточно установить текст и язык. Если вы используете метод speechSynthesis.speak, отправив в качестве параметра высказывание, вы услышите текст. Но это, вероятно, не будет работать в Safari. Вы также должны установить, какой голос использовать.

К счастью, вы можете использовать метод speechSynthesis.getVoices() для получения списка доступных голосов. Он возвращает массив объектов SpeechSynthesisVoice. Каждый из этих объектов имеет свойство lang, и вы должны выбрать голос с тем же языком, что и объект произнесения.

Наконец, вы можете связать голос с объектом utterance с помощью свойства voice. После этого синтез речи будет работать и в Safari.


Если вам понравилась эта статья, вам понравится моя рассылка новостей JavaScript.
Каждый второй понедельник я буду присылать вам простые и выполнимые шаги для повышения уровня ваших навыков JavaScript. Посмотрите: https://nicozerpa.com/newsletter

Оцените статью
devanswers.ru
Добавить комментарий