Nowy interfejs JavaScript Web Speech API ułatwia dodawanie rozpoznawania mowy do stron internetowych. Ten interfejs API zapewnia szczegółową kontrolę nad funkcjami rozpoznawania mowy w Chrome 25 i nowszych wersjach. Oto przykład rozpoznanego tekstu, który pojawia się niemal natychmiast w trakcie mówienia.
Przyjrzyjmy się temu bliżej. Najpierw sprawdzamy, czy przeglądarka obsługuje interfejs Web Speech API, sprawdzając, czy obiekt webkitSpeechRecognition istnieje. Jeśli nie, zalecamy uaktualnienie przeglądarki. Interfejs API jest nadal w fazie eksperymentalnej, dlatego 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ślna wartość continuous to 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, np. krótkich pól do wprowadzania danych. W tej prezentacji ustawiliśmy tę wartość na „prawda”, więc rozpoznawanie będzie nadal działać nawet wtedy, gdy użytkownik przestanie mówić.
Domyślna wartość parametru interimResults to false (fałsz), co oznacza, że jedyne wyniki zwracane przez moduł rozpoznawania są ostateczne i nie ulegają zmianie. Wersja demonstracyjna sprawdza się, więc otrzymywaliśmy wstępne, tymczasowe wyniki, które mogą ulec zmianie. Uważnie obejrzyj demonstrację. Szary tekst to tekst tymczasowy i czasami się zmienia, natomiast czarny tekst to odpowiedzi modułu rozpoznawania, które są oznaczone jako ostateczne i nie ulegają zmianie.
Aby rozpocząć, użytkownik klika przycisk mikrofonu, co powoduje uruchomienie kodu:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Język mowy dla modułu rozpoznawania mowy „lang” ustawiamy na wartość BCP-47 wybraną przez użytkownika z listy, na przykład „en-US” w przypadku języka polskiego. Jeśli ta zasada nie jest ustawiona, domyślnie przyjmuje się język elementu głównego i hierarchii dokumentu HTML. Rozpoznawanie mowy w Chrome obsługuje wiele języków (zobacz tabelę „langs” w źródle demonstracyjnym), a także niektóre języki z zapisem od prawej do lewej, których nie obejmuje ta wersja demonstracyjna, np. he-IL i ar-EG.
Po ustawieniu języka wywołujemy recognition.start(), aby aktywować moduł rozpoznawania mowy. Gdy rozpocznie rejestrowanie dźwięku, wywołuje moduł obsługi zdarzeń onstart, a potem w przypadku 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 dotychczasowe wyniki w 2 ciągi: final_transcript i interim_transcript. Ciągi tekstowe mogą zawierać ciąg „\n”, np. gdy użytkownik wypowie „nowy akapit”, więc używamy funkcji linebreak, aby przekonwertować te treści na tagi HTML <br> lub <p>. Na koniec ustawia te ciągi jako kod wewnętrzny HTML odpowiadających im elementów <span>: final_span z czarnym tekstem i interim_span z szarą czcionką.
interim_transcript jest zmienną lokalną i jest całkowicie odbudowywana przy każdym wywołaniu tego zdarzenia, ponieważ możliwe, że wszystkie wyniki tymczasowe zmieniły się od ostatniego zdarzenia onresult. Możemy zrobić to samo w przypadku elementu final_transcript, uruchamiając pętlę for od 0. Ponieważ jednak ostateczny tekst nigdy się nie zmienia, usprawniliśmy działanie kodu, tworząc globalny kod final_transcript. To zdarzenie może jednak rozpocząć pętlę for w miejscu event.resultIndex i dołączyć tylko nowy, końcowy tekst.
To wszystko. Pozostała część kodu jest już po to, aby wszystko wyglądało ładnie. Zachowuje stan, wyświetla użytkownikowi komunikaty z informacjami i zamienia obraz GIF-a na przycisku mikrofonu między statyczny mikrofon, obraz z ukośnikiem i animowaną ikonę mikrofonu z pulsującą czerwoną kropką.
Obraz mikrofonu z ukośnikiem wyświetla się po wywołaniu funkcji recognition.start(), a po wywołaniu funkcji onstart zostaje zastąpiony animacją mikrofonu. Zazwyczaj dzieje się to tak szybko, że ukośnik nie jest widoczny, 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 na HTTPS nie muszą wielokrotnie prosić o pozwolenie, w przeciwieństwie do stron hostowanych przez HTTP.
Dlatego warto ożywić swoje strony internetowe, umożliwiając im słuchanie opinii użytkowników.
Chętnie poznamy Twoją opinię...
- Komentarze dotyczące specyfikacji interfejsu W3C Web Speech API: email, mailingArchive, community group
- Komentarze na temat implementacji tej specyfikacji przez Chrome: email, archiwum poczty
Aby dowiedzieć się, jak Google postępuje z danymi głosowymi z tego interfejsu API, zajrzyj do dokumentu na temat ochrony prywatności w Chrome.