Web-apps die praten - Inleiding tot de Spraaksynthese-API

De Web Speech API voegt stemherkenning (spraak naar tekst) en spraaksynthese (tekst naar spraak) toe aan JavaScript. Het bericht gaat kort in op dit laatste, aangezien de API onlangs in Chrome 33 (mobiel en desktop) is geland. Als je geïnteresseerd bent in spraakherkenning: Glen Shires heeft een tijdje geleden een geweldig artikel geschreven over de stemherkenningsfunctie, " Voice Driven Web Apps: Inleiding tot de Web Speech API ".

Basisprincipes

Het meest elementaire gebruik van de synthese-API is het doorgeven van de speechSynthesis.speak() en uiting:

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

U kunt echter ook parameters wijzigen om het volume, de spreeksnelheid, toonhoogte, stem en taal te beïnvloeden:

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
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(e) {
    console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

speechSynthesis.speak(msg);

Een stem instellen

Met de API kunt u ook een lijst krijgen met stemmen die de engine ondersteunt:

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

Stel vervolgens een andere stem in door .voice in te stellen op het uitingobject:

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

Demo

In mijn Google I/O 2013-toespraak, " Meer geweldige web: functies die je altijd al wilde hebben " ( www.moreawesomeweb.com ), liet ik een Google Now/Siri-achtige demo zien van het gebruik van de SpeechRecognition service van de Web Speech API met de Google Vertaal API om microfooninvoer automatisch naar een andere taal te vertalen:

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

Helaas gebruikte het een ongedocumenteerde (en niet-officiële API) om de spraaksynthese uit te voeren. Welnu, nu hebben we de volledige Web Speech API om de vertaling terug te spreken! Ik heb de demo bijgewerkt om de synthese-API te gebruiken.

Browserondersteuning

Chrome 33 biedt volledige ondersteuning voor de Web Speech API, terwijl Safari voor iOS7 gedeeltelijke ondersteuning biedt.

Functiedetectie

Omdat browsers elk deel van de Web Speech API afzonderlijk kunnen ondersteunen (bijvoorbeeld in het geval van Chromium), wilt u mogelijk elke functie afzonderlijk detecteren:

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

if ('SpeechRecognition' in window) {
    // Speech recognition support. Talk to your apps!
}