Nowy interfejs JavaScript Web Speech API ułatwia dodawanie rozpoznawania mowy do stron internetowych. Ten interfejs API umożliwia dokładne i elastyczne zarządzanie funkcjami rozpoznawania mowy w Chrome w wersji 25 i nowszych. Oto przykład rozpoznawania tekstu, który pojawia się niemal natychmiast podczas mówienia.
Przyjrzyjmy się temu bliżej. Najpierw sprawdzamy, czy przeglądarka obsługuje interfejs Web Speech API, sprawdzając, czy istnieje obiekt webkitSpeechRecognition. W przeciwnym razie zalecamy użytkownikowi zaktualizowanie przeglądarki. (interfejs API jest wciąż w fazie eksperymentalnej, dlatego ma obecnie prefiks dostawcy). Na koniec tworzymy obiekt webkitSpeechRecognition, który udostępnia interfejs mowy, oraz ustawiamy niektóre jego atrybuty i 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ślna wartość parametru continuous to „fałsz”, co oznacza, że rozpoznawanie mowy zostanie zakończone, gdy użytkownik przestanie mówić. Ten tryb jest idealny do prostego tekstu, np. krótkich pól wprowadzania danych. W tym demo ustawiamy tę opcję na „Prawda”, aby rozpoznawanie kontynuowało nawet wtedy, gdy użytkownik zatrzyma się w mowie.
Wartość domyślna dla interimResults to fałsz, co oznacza, że jedyne wyniki zwrócone przez rozpoznawacz są ostateczne i nie ulegną zmianie. W wersji demonstracyjnej jest on ustawiony na wartość true, abyśmy mogli uzyskać wstępne wyniki, które mogą się zmienić. Uważnie obejrzyj demonstrację. Szary tekst to tekst tymczasowy, który może się czasem zmieniać, a czarny tekst to odpowiedzi rozpoznawacza, które są oznaczone jako ostateczne i nie ulegną zmianie.
Aby rozpocząć, użytkownik klika przycisk mikrofonu, który uruchamia ten kod:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Język mowy dla rozpoznawacza mowy „lang” ustawiamy na wartość BCP-47 wybraną przez użytkownika na liście rozwijanej, np. „pl-PL” dla języka polskiego. Jeśli ta wartość nie jest ustawiona, przyjmuje domyślnie język elementu katalogu i hierarchii dokumentu HTML. Rozpoznawanie mowy w Chrome obsługuje wiele języków (patrz tabela „langs” w źródle demonstracji), a także niektóre języki zapisywane od prawej do lewej, które nie są uwzględnione w tym demonstratorze, np. he-IL i ar-EG.
Po ustawieniu języka wywołujemy funkcję recognition.start(), aby aktywować rozpoznawanie mowy. Gdy rozpocznie rejestrowanie dźwięku, wywołuje metodę obsługi zdarzenia onstart, a następnie dla każdego nowego zbioru wyników wywołuje metodę obsługi zdarzenia 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ł konkatenuje wszystkie otrzymane do tej pory wyniki w 2 ciągi znaków: final_transcript i interim_transcript. Wygenerowane ciągi znaków mogą zawierać znak "\n", np. gdy użytkownik wypowiada „nowy akapit”, dlatego używamy funkcji linebreak, aby przekonwertować je na tagi HTML <br> lub <p>. Na koniec ustawia te ciągi znaków jako innerHTML odpowiadających im elementów <span>: final_span, który ma styl tekstu czarnego, i interim_span, który ma styl tekstu szarego.
interim_transcript to zmienna lokalna, która jest całkowicie odtwarzana za każdym razem, gdy to zdarzenie jest wywoływane, ponieważ możliwe, że wszystkie wyniki pośrednie zmieniły się od czasu ostatniego zdarzenia onresult. Możemy zrobić to samo w przypadku final_transcript, po prostu rozpoczynając pętlę for od 0. Ponieważ jednak tekst końcowy nigdy się nie zmienia, kod jest nieco bardziej wydajny, ponieważ zmienna final_transcript jest zmienną globalną, co pozwala temu zdarzeniu uruchomić pętlę for w miejscu event.resultIndex i tylko dołączyć nowy tekst końcowy.
To wszystko. Pozostała część kodu służy tylko do tego, aby wszystko wyglądało ładnie. Utrzymuje stan, wyświetla użytkownikowi kilka komunikatów informacyjnych i zamienia obraz GIF na przycisku mikrofonu między stałym mikrofonem, obrazem mikrofonu z przekreślonym mikrofonem i animowanym mikrofonem z pulsującą czerwoną kropką.
Obraz z przekreślonym mikrofonem wyświetla się, gdy wywołana zostanie funkcja recognition.start(), a następnie zastąpiona animacją mikrofonu, gdy zostanie wywołana funkcja onstart. Zwykle dzieje się to tak szybko, że użytkownik nie zauważa tego znaku, ale gdy po raz pierwszy korzysta z rozpoznawania mowy, Chrome musi poprosić go o zezwolenie na użycie mikrofonu. W tym przypadku zdarzenie onstart jest wywoływane tylko wtedy, gdy użytkownik wyrazi zgodę. Strony hostowane w protokole HTTPS nie muszą wielokrotnie prosić o pozwolenie, podczas gdy strony hostowane w protokole HTTP muszą.
Spraw, aby Twoje strony internetowe ożyły, umożliwiając im słuchanie użytkowników.
Chętnie poznamy Twoją opinię...
- Komentarze dotyczące specyfikacji interfejsu W3C Web Speech API: email, archiwum mailingów, grupa społeczności
- Komentarze dotyczące implementacji tej specyfikacji w Chrome: e-mail, archiwum wiadomości e-mail.
Aby dowiedzieć się, jak Google zarządza danymi głosowymi z tego interfejsu API, przeczytaj dokument na temat ochrony prywatności w Chrome.