Обучить ребенка чтению – труд не из легких. Стал замечать, что часто не хватает терпения, и дочитываю слова за него сам. Помощь сомнительная, поэтому решил исключить себя, как слабое, лишенное терпения звено, из процесса обучения. Накатал приложение, встал вопрос: как ребенок сможет проверять себя самостоятельно. Решил для этого подключить API синтеза речи. Вот об этом поподробнее.
Быстрый поиск навел на Yandex SpeechKit JavaScript WebAPI. При беглом просмотре из явных преимуществ: правильные интонация и произношение, возможность расстановки ударений в тексте, более богатый выбор голосов. Все это делает данный API предпочтительней для русскоязычного контента. Из минусов: необходимость получения лицензионного ключа, 30-дневный пробный период (для некоммерческих проектов, возможно дальнейшее пользование сервисом на бесплатной основе, для этого необходимо обратиться в поддержку), медленнее Web Speech API (насчет быстродействия оценка субъективна, поскольку в дебри не лез, подключал “на коленке”, как итог – большая задержка или вовсе, отсутствие результата). На данный момент Яндекс представляет возможность подключения HTTP API – SpeechKit Cloud, смысл и условия использования те же. Демонстрация работы API – Yandex SpeechKit JS API.
Web Speech API
В итоге прижился второй вариант – Web Speech API. Из плюсов: работает в принципе без сбоев, не надо заморачиваться с ключами, в общем для поставленных целей хватает “за глаза”.
Немного теории: Web Speech API – интерфейс, позволяющий распознавать речь (компонент SpeechRecognition), а также синтезировать речь из текста (компонент SpeechSynthesis). Технология экспериментальная, и поддерживается, увы, не всеми браузерами. Компонент SpeechRecognition совместим с Chrome, Edge, Firefox. SpeechSynhesis поддерживают все популярные браузеры.
Нас интересует синтез речи из текста. Подключается он довольно просто: для воспроизведения текста достаточно передать текст и параметры методу SpeechSynthesis.speak(). Для этого необходимо создать новый объект SpeechSynthesisUtterance, включить в него необходимо воспроизводимый текст, а также при желании такие параметры, как язык, высоту, частоту, громкость, голос.
1 2 3 4 5 6 |
var utterance = new SpeechSynthesisUtterance utterance.text = 'Жили-были на свете три поросенка' utterance.lang = 'ru-RU' utterance.pitch = 1 utterance.rate = 1 utterance.volume = 1 |
Свойства SpeechSynthesisUtterance:
- text – содержит в себе текст, предназначенный для воспроизведения. Максимальное количество знаков 32767.
- lang – язык воспроизведения. По умолчанию берется язык указанный в HTML или дефолтный браузерный. Формат “ru-RU”.
- pitch – высота голоса. Дефолтное значение “1”. Диапазон изменения от 0 до 2.
- rate – скорость воспроизведения. Дефолтное значение “1”. Диапазон изменения от 0 до 10.
- volume – громкость воспроизведения. Дефолтное значение “1”. Диапазон изменения от 0 до 1.
Далее передать данный объект методу SpeechSynthesis.speak():
1 |
speechSynthesis.speak(utterance); |
Также есть возможность выбора голоса воспроизведения с помощью параметра utterance.voice. Данный параметр является объектом и содержит в себе ряд свойств, к примеру:
1 2 3 4 5 6 7 |
[object SpeechSynthesisVoice] { default: true, lang: "en-US", localService: true, name: "Microsoft Anna - English (United States)", voiceURI: "Microsoft Anna - English (United States)" } |
Получить полный список доступных голосов можно с помощью speechSynthesis.getVoices().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function createVoices() { //получение списка доступных голосов var allvoices = speechSynthesis.getVoices(); //цикл вывода имен доступных голосов на страницу allvoices.forEach(function(voice) { document.body.innerHTML += '<li>'+voice.name+'</li>'; }) } //запуск функции создания списка доступных голосов window.createVoices(); //для Chrome асинхронная загрузка window.speechSynthesis.onvoiceschanged = function() { createVoices(); }; |
Ниже демонстрация работы Web speech API, с возможностью смены голоса и параметров воспроизведения.
See the Pen WOV_web _speech_api_synthesis_0004 by Paul (@1110000) on CodePen.