Applications Web qui parlent – Présentation de l'API Speech Synthesis

Eric Bidelman

L'API Web Speech ajoute la reconnaissance vocale et la synthèse vocale à JavaScript. Cet article aborde brièvement la deuxième version, car l'API a récemment été introduite dans Chrome 33 (pour mobile et ordinateur). Si la reconnaissance vocale vous intéresse, sachez qu'il y a quelque temps déjà, Glen Shires avait un excellent écrit sur la fonctionnalité de reconnaissance vocale Voice Driven Web Apps: Introduction to the Web Speech API.

Principes de base

L'utilisation la plus basique de l'API Synthesis consiste à transmettre le speechSynthesis.speak() et l'énoncé:

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

Toutefois, vous pouvez également modifier les paramètres pour influer sur le volume, la vitesse d'élocution, le ton, la voix et la langue:

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

Définir une voix

L'API vous permet également d'obtenir la liste des voix prises en charge par le moteur:

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

Définissez ensuite une voix différente en définissant .voice sur l'objet d'énoncé:

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

Démonstration

Lors de ma conférence Google I/O de 2013, "More Awesome Web: features you've still Want" (www.moreawesomeweb.com), j'ai présenté une démonstration de type Google Now/Siri qui montre comment utiliser le service SpeechRecognition de l'API Web Speech avec l'API Google Traduction pour traduire automatiquement l'entrée micro dans une autre langue:

DÉMO: http://www.moreawesomeweb.com/demos/speech_translate.html

Malheureusement, elle a utilisé une API non documentée (et non officielle) pour effectuer la synthèse vocale. Nous disposons désormais de l'API Web Speech complète pour répondre à la traduction. J'ai mis à jour la démonstration pour utiliser l'API Synthesis.

Navigateurs pris en charge

Chrome 33 est entièrement compatible avec l'API Web Speech, tandis que Safari pour iOS 7 est partiellement compatible.

Détection de fonctionnalités

Étant donné que les navigateurs peuvent être compatibles avec chaque partie de l'API Web Speech (par exemple, avec Chromium), vous pouvez activer la détection de chaque fonctionnalité séparément:

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

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