API Web Speech добавляет к JavaScript:

  • Распознавание голоса (речь в текст)
  • Синтез речи (текст в речь)

Здесь мы поговорим о синтезе речи (преобразование текста в речь)

Начнем с базового кода:

Шаг 1. Запишите этот код Javascript в HTML-файл

var message = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(message);

Шаг 2. Откройте файл в Chrome

Давайте изменим некоторые настройки и посмотрим, что произойдет:

Шаг 1. Запишите этот код Javascript в HTML-файл

var message = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
message.voice = voices[10]; // Note: some voices don't support altering params
message.voiceURI = 'native';
message.volume = 1; // 0 to 1
message.rate = 1; // 0.1 to 10
message.pitch = 2; //0 to 2
message.text = 'Hello World';
message.lang = 'en-US';
message.onend = function(e) {
  console.log('Finished in ' + event.elapsedTime + ' seconds.');
};
speechSynthesis.speak(message);

Шаг 2. Откройте файл в Chrome

Обнаружение, поддерживает ли браузер

Веб-браузеры могут поддерживать каждую часть Web Speech API по отдельности, лучше определять каждую функцию отдельно. Например, здесь мы определяем, поддерживает ли браузер синтез речи:

if ('speechSynthesis' in window) {
 // Synthesis support. Make your web apps talk!
}

Вот мой код для справки:

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