Apps da Web que falam: introdução à API Speech Synthesis

A API Web Speech adiciona reconhecimento de voz (conversão de voz em texto) e síntese de fala (conversão de texto em voz) ao JavaScript. A postagem aborda brevemente a segunda, já que a API foi lançada recentemente no Chrome 33 (para dispositivos móveis e computadores). Se você tem interesse em reconhecimento de fala, Glen Shires escreveu um ótimo artigo sobre o recurso de reconhecimento de voz, "Voice Driven Web Apps: Introduction to the Web Speech API" (em inglês).

Noções básicas

O uso mais básico da API de síntese é transmitir a speechSynthesis.speak() e a declaração:

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

No entanto, você também pode alterar os parâmetros para afetar o volume, a velocidade de fala, o tom, a voz e o idioma:

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);

Como definir uma voz

A API também permite que você receba uma lista de vozes compatíveis com o mecanismo:

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

Em seguida, defina uma voz diferente definindo .voice no objeto de frase:

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

Demonstração

Na minha palestra do Google I/O 2013, "Mais recursos incríveis da Web: recursos que você sempre quis" (www.moreawesomeweb.com), mostrei uma demonstração semelhante ao Google Now/Siri do uso do serviço SpeechRecognition da API Web Speech com a API Google Translate para traduzir automaticamente a entrada do microfone para outro idioma:

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

Infelizmente, ele usou uma API não documentada (e não oficial) para realizar a síntese de fala. Agora temos a API Web Speech completa para falar a tradução. Atualizei a demonstração para usar a API Synthesis.

Compatibilidade com navegadores

O Chrome 33 tem suporte total à API Web Speech, enquanto o Safari para iOS 7 tem suporte parcial.

Detecção de recursos

Como os navegadores podem oferecer suporte a cada parte da API Web Speech separadamente (por exemplo, o caso do Chromium), talvez seja melhor detectar cada recurso separadamente:

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

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