Nowy interfejs JavaScript Web Speech API ułatwia dodawanie rozpoznawania mowy na stronach internetowych. Ten interfejs API zapewnia precyzyjną kontrolę i elastyczność w zakresie rozpoznawania mowy w Chrome w wersji 25 i nowszych. Oto przykład, w którym rozpoznany tekst pojawia się niemal natychmiast w trakcie mówienia.
Przyjrzyjmy się bliżej podstawom działania. Najpierw sprawdzamy, czy przeglądarka obsługuje interfejs Web Speech API, sprawdzając, czy obiekt webkitSpeechRecognition istnieje. Jeśli nie, zalecamy uaktualnienie przeglądarki. (Ponieważ interfejs API jest nadal w fazie eksperymentalnej, obecnie ma prefiks dostawcy). Na koniec tworzymy obiekt webkitSpeechRecognition, który udostępnia interfejs mowy, i ustawiamy niektóre jego atrybuty oraz moduły obsługi zdarzeń.
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
...
Domyślną wartością parametru continuous jest fałsz, co oznacza, że gdy użytkownik przestanie mówić, rozpoznawanie mowy zostanie zakończone. Ten tryb doskonale sprawdza się w przypadku prostego tekstu, takiego jak krótkie pola do wprowadzania danych. W tej wersji demonstracyjnej ustawimy wartość Prawda, aby rozpoznawanie mowy trwało nawet wtedy, gdy użytkownik przerwie mówienie.
Wartość domyślna pola interimResults to false (fałsz). Oznacza to, że jedyne wyniki zwracane przez moduł rozpoznawania są ostateczne i nie ulegną zmianie. W wersji demonstracyjnej najpierw ustawiliśmy „prawda”, więc otrzymujemy wstępne, przejściowe wyniki, które mogą się zmienić. Uważnie obejrzyj demonstrację. Szary tekst to tekst tymczasowy, który czasami się zmienia, natomiast czarny tekst to odpowiedzi z modułu rozpoznawania, które są oznaczone jako ostateczne i nie zmieniają się.
Najpierw użytkownik klika przycisk mikrofonu, co wywołuje ten kod:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Ustawiamy język mówiony dla modułu rozpoznawania mowy „lang” do wartości BCP-47 wybranej przez użytkownika z listy wyboru, np. „en-US” dla polskiego. Jeśli ta wartość nie zostanie ustawiona, domyślnie używany będzie język elementu głównego i hierarchii dokumentu HTML. Funkcja rozpoznawania mowy w Chrome obsługuje wiele języków (sprawdź tabelę „langs” w źródle wersji demonstracyjnej) oraz kilka języków pisanych od prawej do lewej, które nie są uwzględnione w tej wersji demonstracyjnej, np. he-IL i ar-EG.
Po ustawieniu języka dzwonimy pod recognition.start(), by włączyć rozpoznawanie mowy. Gdy rozpocznie przechwytywanie dźwięku, wywołuje moduł obsługi zdarzeń onstart, a potem dla każdego nowego zestawu wyników wywołuje moduł obsługi zdarzeń onresult.
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
Ten moduł obsługi łączy wszystkie otrzymane do tej pory wyniki w 2 ciągi: final_transcript i interim_transcript. Ciągi tekstowe mogą zawierać znak „\n”, na przykład gdy użytkownik wypowie „new paragraph” (nowy akapit), więc używamy funkcji linebreak do przekonwertowania ich na tagi HTML <br> lub <p>. Na koniec ustawia te ciągi znaków jako innerHTML odpowiadających im elementów <span>: final_span (przypisany czarnym tekstem) i interim_span (w kolorze szarym).
interim_transcript to zmienna lokalna, a przy każdym wywołaniu tego zdarzenia jest całkowicie odbudowywana od nowa, ponieważ możliwe, że wszystkie wyniki tymczasowe zmieniły się od ostatniego zdarzenia onresult. To samo możemy zrobić dla elementu final_transcript, zaczynając pętlę for od 0. Ponieważ jednak końcowy tekst nigdy się nie zmienia, ulepszyliśmy kod w tym miejscu, zmieniając nazwę final_transcript na globalną, dzięki czemu zdarzenie może rozpoczynać pętlę for od event.resultIndex i dołączyć tylko nowy końcowy tekst.
To wszystko. Pozostała część kodu to po prostu reszta kodu, dzięki której wszystko wygląda ładnie. Zachowuje stan, wyświetla użytkownikowi kilka przydatnych komunikatów i zamienia obraz GIF na przycisku mikrofonu między mikrofonem statycznym, obrazem po ukośniku i animację mikrofonu z migającą czerwoną kropką.
Obraz po ukośniku z mikrofonu jest wyświetlany po wywołaniu funkcji recognition.start(), a po uruchomieniu funkcji onstart zostaje zastąpiony animacją mikrofonu. Zwykle dzieje się to tak szybko, że ukośnik jest niezauważalny, ale przy pierwszym użyciu rozpoznawania mowy Chrome musi zapytać użytkownika o zgodę na używanie mikrofonu. W takim przypadku onstart uruchamia się tylko wtedy, gdy użytkownik wyrazi na to zgodę. Strony hostowane przez HTTPS nie muszą wielokrotnie prosić o pozwolenie, w przeciwieństwie do stron hostowanych przez HTTP.
Ożyw swoje strony, umożliwiając wsłuchiwanie się w opinie użytkowników.
Chętnie poznamy Twoją opinię...
- Komentarze dotyczące specyfikacji interfejsu W3C Web Speech API: e-mail, archiwum poczty e-mail, grupa społeczności.
- Komentarze na temat implementacji tej specyfikacji w Chrome: poczta e-mail, archiwum poczty e-mail.
Aby dowiedzieć się, jak Google postępuje z danymi głosowymi pochodzącymi z tego interfejsu API, zapoznaj się z dokumentem na temat ochrony prywatności w Chrome.