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

L'API Web Speech ajoute la reconnaissance vocale (STT) et la synthèse vocale (TTS) à JavaScript. L'article aborde brièvement cette dernière, car l'API est récemment arrivée dans Chrome 33 (mobile et ordinateur). Si vous êtes intéressé par la reconnaissance vocale, Glen Shires a récemment publié un article très intéressant sur cette fonctionnalité, intitulé Voice Driven Web Apps: Introduction to the Web Speech API (Applications Web basées sur la voix : présentation de l'API Web Speech).

Principes de base

L'utilisation la plus élémentaire de l'API de synthèse consiste à transmettre speechSynthesis.speak() et l'énoncé:

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

Vous pouvez également modifier des paramètres pour modifier le volume, la vitesse d'élocution, la hauteur de la voix, 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 compatibles avec le moteur:

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

Définissez ensuite une autre voix 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émo

Lors de ma conférence Google I/O 2013 intitulée More Awesome Web: features you've always wanted (www.moreawesomeweb.com), j'ai présenté une démonstration de l'utilisation du service SpeechRecognition de l'API Web Speech avec l'API Google Translate pour traduire automatiquement les entrées du micro dans une autre langue, comme Google Now ou Siri:

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

Malheureusement, il utilisait une API non documentée (et non officielle) pour effectuer la synthèse vocale. Nous disposons maintenant de l'API Web Speech complète pour lire la traduction. J'ai mis à jour la démo pour qu'elle utilise l'API de synthèse.

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 prendre en charge chaque partie de l'API Web Speech séparément (par exemple, avec Chromium), vous pouvez détecter 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!
}