Несколько дней назад я заметил в одной из своих статей на Medium то, чего никогда раньше не замечал, — кнопку « слушать » в верхней части поста. Когда я нажал на нее, моя статья была прочитана браузером вслух. Я подумал, что это крутая функция, и задался вопросом, как я могу создать что-то подобное самостоятельно.

Исследовательская работа

Небольшое исследование привело меня к Web Speech API . Этот API состоит из двух разных компонентов. Распознавание речи и синтез речи . Сегодня нас интересует только последнее.

Кроме того, я наткнулся на поддержку браузером этого API. Мы можем без проблем использовать Speech API во всех современных браузерах.

Функции

SpeechSynthesis API позволяет нам указать браузеру преобразовывать переданный текст в речь. Мы можем приостановить/возобновить эту речь по желанию и можем управлять голосами, скоростью речи и высотой тона.

Доступные голоса зависят от используемого браузера и операционной системы.

Демо

Давайте пройдемся по коду JavaScript и посмотрим, как работает демо.

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

В начале этого скрипта мы проверяем, поддерживает ли браузер SpeechSynthesis API. Если браузер не поддерживает этот API, весь наш скрипт не будет работать, поэтому мы выходим из функциональности.

Настройка голосовых параметров браузера

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

Получение выбранной опции голоса

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

Воспроизведение и приостановка преобразования текста в речь

Когда пользователь нажимает кнопку воспроизведения, мы проверяем, находится ли объект SpeechSynthesis браузера в настоящее время в состоянии паузы. Если это так, мы просто продолжаем говорить.

Если он не находится в состоянии паузы, мы создаем новый экземпляр SpeechSynthesisUtterance. Мы передаем текст и выбранный голос и вызываем speakметод.

Когда пользователь нажимает кнопку паузы, мы просто вызываем pause()метод SpeechSynthesis API.

Дополнительные опции

У нас есть ряд других опций в этом API под нашим контролем.

• Высота тона — получение и настройка высоты тона голоса, делая его ниже или выше.
• Скорость — получение и установка скорости, с которой будет произноситься текст.
• Громкость — Получите и установите громкость, с которой будет произноситься текст.
• Lang — получить и установить язык текста, на котором будет произноситься текст.

• Поддержка браузера API синтеза речи
• MDN — API веб-речи

Web Speech API — очень интересное дополнение к набору инструментов веб-разработчика. Я надеюсь, что эта демонстрация и объяснение были вам полезны. Дайте мне знать в комментариях, для чего вы будете использовать этот API!

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

И если вы хотите, вы можете связаться со мной в LinkedIn или Twitter !

Создавайте приложения с повторно используемыми компонентами, такими как Lego.

Инструмент Bit с открытым исходным кодом помогает более чем 250 000 разработчиков создавать приложения с помощью компонентов.

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

→ Узнать больше

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

→ Микро-интерфейсы

→ Дизайн-система

→ Совместное использование кода и повторное использование

→ Монорепо

Учить больше