Aplikacje internetowe, które mówią – wprowadzenie do Speech Synthesis API

Interfejs Web Speech API dodaje do JavaScriptu rozpoznawanie mowy (zamiana mowy na tekst) i syntezę mowy (tekst na mowę). W tym poście pokrótce omawiamy tę kwestię, ponieważ interfejs API był ostatnio dostępny w Chrome 33 (na urządzeniach mobilnych i komputerach). Jeśli interesuje Cię rozpoznawanie mowy, Glen Shires miał jakiś czas temu świetny artykuł na temat funkcji rozpoznawania mowy: „Aplikacje internetowe oparte na Voice: wprowadzenie do interfejsu Web Speech API”.

Podstawowe informacje

Podstawowym zastosowaniem interfejsu synthesis API jest przekazywanie speechSynthesis.speak() i wyrażenia:

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

Możesz też zmienić parametry, by uzyskać wpływ na głośność, szybkość mowy, ton, głos i język:

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

Ustawianie głosu

Interfejs API pozwala też uzyskać listę głosów obsługiwanych przez silnik:

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

Następnie ustaw inny głos, ustawiając .voice w obiekcie wypowiedzi:

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

Demonstracyjny

W mojej prezentacji na Google I/O 2013 zatytułowanej „More Awesome Web: features, you’ve all you’ve time” (Więcej świetnych sieci: funkcje, których zawsze chciałeś) (www.moreawesomeweb.com), zademonstrowałem Google Now/Siri, jak w przypadku interfejsu Web Speech API – SpeechRecognition interfejsu Google Translate API w celu automatycznego tłumaczenia danych wejściowych z mikrofonu na inny język:

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

Do syntezy mowy użyto nieudokumentowanego (i nieoficjalnego) interfejsu API. Teraz dysponujemy pełnym interfejsem Web Speech API, który odpowiada za tłumaczenie. Zaktualizowano prezentację, aby korzystać z interfejsu API syntezy.

Obsługa przeglądarek

Chrome 33 w pełni obsługuje interfejs Web Speech API, a Safari na iOS 7 – częściowo.

Wykrywanie funkcji

Przeglądarki mogą osobno obsługiwać każdą część interfejsu Web Speech API (np. w przypadku Chromium), dlatego warto włączyć wykrywanie każdej funkcji z osobna:

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

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