Přejít k navigační liště

Zdroják » JavaScript » Když webová aplikace promluví… Představujeme Speech Synthesis API

Když webová aplikace promluví… Představujeme Speech Synthesis API

Články JavaScript

Mobilní i desktopové aplikace mohou s uživatelem již dávno komunikovat pomocí hlasu, proč by to neměly umět i aplikace webové? Můžou, připravuje se totiž API, které jim to umožní, a můžete si ho dnes vyzkoušet v prohlížeči Chrome.

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.

Komentáře

Subscribe
Upozornit na
guest
2 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Cejvik

Mikrofon na vyhledávání jsem taky párkrát zkoušel a je to super.

jano

Pokial je podpora prehliadacov problem, tak sa da na syntezu reci pouzit aj existujuci polyfill https://github.com/janantala/speech-synthesis

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.