Всем привет! В недавней статье РАСПОЗНАВАНИЕ ГОЛОСА JAVASCRIPT мы с вами узнали как используя Web Speech API распознавать речь произнесенную в микрофон. Теперь же ситуация немного другая. Мы научимся речь в текстовом представлении переводить в звуковое. Здесь опять же используется речевая служба Web Speech API. Итак, поехали!

Проверяем поддержку в браузере:

if(window.speechSynthesis !== undefined){
    console.log('Чтение речи поддерживается в данной браузере');
}else{
    console.log('Чтение речи не поддерживается в данном браузере');
}

За чтение речи в Web Speech API отвечает объект speechSynthesis. Он в отличии от того же SpeechRecognition поддерживается всеми современными браузерами.

Но здесь есть один нюанс. Если мы посмотрим количество поддерживающих языков для чтения речи в разных браузерах.

var synth = window.speechSynthesis || window.mozspeechSynthesis || window.webkitspeechSynthesis;
    synth.onvoiceschanged = function(){
        var lang = synth.getVoices();
        console.log(lang);
    };

С помощью данного кода мы получим массив в котором будут перечислены языки которые мы можем прочитать используя Web Speech API.

В браузере google поддерживаются около нескольких десятков различных языков включая Русский. Тогда как во всех остальных поддерживается только один, Английский. Это прежде всего связано с тем что Google является разработчиком Web Speech API.

Давайте с помощью Web Speech API прочитаем всеми любимую фразу Hello world!

var synth = window.speechSynthesis,
    message = new SpeechSynthesisUtterance();
message.lang = 'en-US';
message.text = 'Hello world!';
synth.speak(message);

Обратите внимание здесь помимо основного объекта speechSynthesis мы создали объект класса SpeechSynthesisUtterance. С помощью данного объекта мы можем задавать параметры для чтения речи(текст, высоту голоса, язык, скорость произношения, громкость и т.д.) Мы ограничились только параметрами text(текст) и lang(язык).

Далее с помощью метода speak() объекта speechSynthesis:

synth.speak(message);

Web Speech API проговорил наш текст 'Hello world!'.

Мы можем сократить наш код до двух строчек:

var synth = window.speechSynthesis;
synth.speak(new SpeechSynthesisUtterance('Hello world!'));

Данная запись менее предпочтительна, так как мы не сможем изменять параметры речи.

Повторюсь что в браузере google поддерживается Русский язык:

var synth = window.speechSynthesis,
    message = new SpeechSynthesisUtterance();
message.lang = 'ru-RU';
message.text = 'Привет мир!';
synth.speak(message);

Здесь мы поменяли значение параметра lang на 'Русский язык' , а text на 'Привет мир!'. В результате у нас была произнесена фраза 'Привет мир!'.

Помимо параметров lang и text существуют:

pitch - возвращает и задает высоту голоса примерно в интервале от(0.1 до 1.8)

rate - возвращает и задает скорость произношения фразы (0.1-1.8)

voice - акцент голоса

volume - громкость голоса

Метод speak() служить для произнесения фразы, также есть методы:

cancel() - удаляет все высказывания из очереди

getVoices() - возвращает список языков которые могут распознаваться и произносится

pause() - останавливает произношение речи

resume() - задает объекту speechSynthesis режим без пауз, если речь была остановлена с помощью pause() возобновляет ее произношение с того места где она была остановлена.

Также у объекта класса SpeechSynthesisUtterance есть обработка событий:

onboundary - срабатывает когда произнесенное высказывание достигает границы слова или предложения.

onend - Срабатывает когда речь произнесена полностью

onerror - срабатывает при возникновении ошибки

onmark - срабатывает когда речь достигает тега метки SSML

onpause - срабатывает когда речь частично приостановлена

onresume - срабатывает когда речь после остановки возобновляется

onstart - срабатывает когда начинается произнесение речи

var synth = window.speechSynthesis,
    message = new SpeechSynthesisUtterance();
    message.onstart = function(){
        console.log('start');
    };
    message.onend = function(){
        console.log('end');
    };
    message.lang = 'en-US';
    message.text = 'Good bye!';
    synth.speak(message);

Сегодня мы рассмотрели как используя возможности Web Speech API можно озвучивать текстовые данные.

Если у вас остались вопросы вы можете оставить их в комментариях или в моей

группе в ВК Также переходите на мой канал youtube и подписывайтесь.

На этом друзья у меня на сегодня все.

Желаю вам успехов и удачи! Пока!