Создавайте веб-приложения, которые умеют говорить! ????

Сегодня трудно себе представить жизнь без Интернета. Интернет даёт огромные возможности. Он позволяет поддерживать связь с миром, не вставая с дивана. Аудиосегмент Интернета растёт с каждым днём. Благодаря ему мы имеем возможность слушать аудиокниги во время путешествий, а люди с ограничениями по зрению — читать книги и статьи.

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

Технология Web Speech API позволяет добавлять голосовые данные в веб-приложения. Web Speech API состоит из двух частей:

Синтез речи (преобразование текста в речь).

Асинхронное распознавание речи.

Давайте рассмотрим SpeechSynthesis API.

Интерфейс SpeechSynthesisUtterence даёт возможность отправить речевой запрос в браузер, а главное — он позволяет управлять голосом, переключаться на иностранные языки, регулировать громкость и даже темп и высоту голоса!

Свойства SpeechSynthesisUtterance:

SpeechSynthesisUtterance.lang: возможность установить язык, на котором воспроизводится речь.

SpeechSynthesisUtterance.pitch: возможность установить высоту воспроизводимой речи.

SpeechSynthesisUtterance.text: получение синтезируемого текста.

SpeechSynthesisUtterance.rate: возможность установить скорость воспроизводимой речи.

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

SpeechSynthesisUtterance.volume: возможность установить громкость речи.

Давайте разберём простенькую демо-версию API преобразования текста в речь.

В приведённом выше фрагменте мы использовали интерфейс SpeechSynthesisUtterance, чтобы отправить браузеру команду произнести «Hello World!».

Но если вы запустите этот код прямо в теге <script> в HTML-файле, то не услышите ни звука! Прежде чем бежать проверять, работают ли колонки, или грешить на код, откройте инструменты разработчика в своём браузере. Там в консоли вы можете увидеть или не увидеть (в зависимости от браузера) предупреждение.

Всегда рекомендую использовать Google Chrome, так как в нем лучший, по моему мнению, набор инструментов разработчика.

Вы увидите такое предупреждение, если запустите приведённый выше фрагмент кода прямо в теге <script>.

Это часть новой политики Google Chrome, ограничивающей воспроизведение звука со вкладок этого браузера. И это здорово, потому что некоторые веб-сайты воспроизводили рекламу и другие звуки без взаимодействия с пользователем или без разрешения пользователя.

За весь жизненный цикл документа должно произойти хотя бы однократное взаимодействие пользователя с вашей страницей, прежде чем с неё начнётся воспроизведение звука.

Проще говоря, на странице должен быть какой-нибудь элемент пользовательского интерфейса, позволяющий вашим пользователям произвести какое-то действие на странице, прежде чем вы вызовете этот метод. Давайте добавим его в наш код.

Теперь в это окошко можно ввести какой-то текст, и браузер повторит его!

Вот как должен выглядеть наш пользовательский интерфейс.

Используем другой голос

Вы можете поэкспериментировать с голосовыми параметрами, если захотите использовать другие голоса.

Можно просмотреть список всех доступных голосов, запустив цикл for-loop в click listener.

for (let voice of window.speechSynthesis.getVoices()) { console.log('voice', voice.name); }

Обратите внимание, что эти голоса загружаются асинхронно, поэтому при первом нажатии вы можете услышать голос, установленный по умолчанию. После этого вы должны услышать выбранный голос.

Давайте услышим, например, мужской голос с британским акцентом английского Google UK English Male. Добавьте следующий код в строку 25 в click listener.

Попробуйте поменять значения msg.volume, msg.rate и msg.pitch, чтобы получились разные версии этого голоса!

Поддержка браузеров

Chrome 33+, Firefox 49+ и Safari 7+ поддерживают все функции Web Speech API, и вы можете проверить сами, имеется ли поддержка каждой из них:

if ('speechSynthesis' in window) { console.log('Speech Synthesis available!'); }

Теперь вы можете ещё немного увеличить доступность своего сайта. Всегда здорово, когда разработчики и дизайнеры думают о своих пользователях и прилагают дополнительные усилия, чтобы их продуктами могли пользоваться все люди!

Создавайте веб-приложения, которые умеют говорить. Это весело! ???? ❤️

---

Перевод статьи Varun Joshi: Create Web Apps That Talk! 🔊