Tento článek je překladem textu Web apps that talk – Introduction to the Speech Synthesis API z HTML5rocks, jehož autorem je Eric Bidelman a je zde zveřejněn pod licencí CC BY 3,.0.

Pozn. překl.: Zkoušejte syntézu na anglických textech, v případě použití českých znaků mi syntéza v Chrome 33 padala.

API Web Speech přidává do JavaScriptu rozpoznávání hlasu (speech to text) a hlasovou syntézu (text to speech). Tento článek se zabývá tou druhou částí, která byla nedávno přidána do Chrome 33 (jak mobilního tak desktopového). Pokud vás zajímá rozpoznávání hlasu, přečtěte si související článek Webové stránky dostanou rozpoznávání řeči – přichází Web Speech API.

Základy

V tom nejjednodušším případě postačí, když předáte výrok (utterance) API metodě speechSynthesis.speak():

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

Vyzkoušejte si to:

Pozn. překl.: Pokud máte Chrome 33, měli byste po kliknutí na tlačítko slyšet přečtení anglického nadpisu článku. Český nadpis nešel použít – při pokusu o přečtení textu s českými znaky se syntéza řeči zasekne a přestane fungovat až do restartu prohlížeče.

Můžete také změnit parametry, které ovlivňují hlasitost (volume), rychlost řeči (rate), hlas (voice), výšku hlasu (pitch) a jazyk (lang):

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Pozn.: některé hlasy nepodporují změnu parametrů
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';

msg.onend = function(event) {
  console.log('Přečteno za ' + event.elapsedTime + ' vteřin.');
};

speechSynthesis.speak(msg);

Nastavení hlasu

Pomocí API můžete také zjistit seznam hlasů, které hlasový engine prohlížeče podporuje:

speechSynthesis.getVoices().forEach(function(voice) {
  console.log(voice.name, voice.default ? '(default)' :'');
});

A nastavením vlastnosti .voice u objektu s textem můžete vybrat jiný hlas:

var msg = new SpeechSynthesisUtterance('I see dead people!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
speechSynthesis.speak(msg);

Demo

V přednášce „More Awesome Web: features you’ve always wanted“ na Google I/O 2013 jsem předvedl demo s Web Speech API’s SpeechRecognition používající Google Translate API pro automatický překlad vstupu z mikrofonu do jiného jazyka:

DEMO: http://www.moreawesomeweb.com/demos/speech_translate.html

Bohužel pro syntézu se používalo nedokumentované (a neoficiální) API. Dnes tu ale máme kompletní Web Speech API a můžeme přeložený text opět přečíst. Demo jsem aktualizoval, aby používalo oficiální API pro syntézu řeči.

Podpora prohlížečů

Chrome 33 má plnou podporu Web Speech API a Safari pro iOS7 obsahuje částečnou podporu.

Detekce podpory

Jelikož prohlížeče mohou podporovat jednotlivé části API zvlášť (to je případ prohlížeče Chromium), můžete chtít detekovat zvlášť každou z těchto částí:

if ('speechSynthesis' in window) {
 // Podpora syntézy. Vaše aplikace může mluvit!
}

if ('SpeechRecognition' in window) {
  // Podpora rozpoznávání řeči. Můžete mluvit na vaši aplikaci!
}

A to je vše. Pokud vás téma dál zajímá, přečtěte si související Webové stránky dostanou rozpoznávání řeči – přichází Web Speech API.