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

Interfejs Web Speech API dodaje do JavaScripta rozpoznawanie głosu (transkrypcję mowy na tekst) i syntezę mowy (transkrypcję tekstu na mowę). W tym wpisie omawiamy tę drugą opcję, ponieważ interfejs API został niedawno dodany do wersji 33 Chrome (na urządzeniach mobilnych i komputerach). Jeśli interesuje Cię rozpoznawanie mowy, Glen Shires opublikował niedawno świetny artykuł na temat tej funkcji, zatytułowany „Voice Driven Web Apps: Introduction to the Web Speech API” (Aplikacje internetowe z obsługą głosową – wprowadzenie do interfejsu Web Speech API).

Podstawowe informacje

Najprostsze użycie interfejsu Synthesis API polega na przekazaniu speechSynthesis.speak() i wypowiedzi:

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

Możesz też zmienić parametry, aby zmienić głośność, tempo mowy, barwę głosu, 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 umożliwia też uzyskanie listy głosów obsługiwanych przez mechanizm:

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

Prezentacja

Podczas konferencji Google I/O 2013 wygłosiłem wykład „More Awesome Web: features you've always wanted” (www.moreawesomeweb.com), w którym pokazałem, jak za pomocą interfejsu Web Speech API SpeechRecognition i interfejsu Google Translate API można automatycznie tłumaczyć na mikrofonie na inny język, tak jak to robią Google Now czy Siri:

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

Niestety do syntezy mowy użyto nieudokumentowanego (i nieoficjalnego) interfejsu API. Teraz mamy pełny interfejs Web Speech API, który odczyta tłumaczenie. Zaktualizowaliśmy demo, aby używało interfejsu Synthesis API.

Obsługa przeglądarek

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

Wykrywanie cech

Ponieważ przeglądarki mogą obsługiwać poszczególne części interfejsu Web Speech API osobno (np. w przypadku Chromium), możesz chcieć wykrywać każdą funkcję osobno:

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

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