Aplikacje internetowe na podstawie głosu – wprowadzenie do interfejsu Web Speech API

Nowy interfejs JavaScript Web Speech API ułatwia dodawanie funkcji rozpoznawania mowy do stron internetowych. Ten interfejs API umożliwia precyzyjną kontrolę i elastyczność w zakresie funkcji rozpoznawania mowy w Chrome w wersji 25 i nowszych. Oto przykład, w którym rozpoznany tekst pojawia się niemal natychmiast podczas mówienia.

Demo Web Speech API

DEMO / ŹRÓDŁO

Sprawdźmy, co jest pod maską. Najpierw sprawdzamy, czy przeglądarka obsługuje interfejs Web Speech API, sprawdzając, czy istnieje obiekt webkitSpeechRecognition. Jeśli nie, sugerujemy użytkownikowi uaktualnienie przeglądarki. (Ponieważ interfejs API jest nadal w fazie eksperymentów, ma obecnie prefiks dostawcy). Na koniec tworzymy obiekt webkitSpeechRecognition, który udostępnia interfejs mowy, i ustawiamy niektóre jego atrybuty oraz obsługę 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 false, co oznacza, że gdy użytkownik przestanie mówić, rozpoznawanie mowy zakończy się. Ten tryb doskonale sprawdza się w przypadku prostego tekstu, np. krótkich pól wejściowych. W tej wersji demonstracyjnej ustawiamy wartość true, aby rozpoznawanie było kontynuowane nawet wtedy, gdy użytkownik zrobi przerwę podczas mówienia.

Domyślna wartość interimResults to false, co oznacza, że jedyne wyniki zwracane przez rozpoznawanie są ostateczne i nie ulegną zmianie. W wersji demonstracyjnej ustawiamy wartość true, aby otrzymywać wstępne, tymczasowe wyniki, które mogą się zmienić. Obejrzyj uważnie wersję demonstracyjną. Szary tekst to tekst tymczasowy, który czasami się zmienia, natomiast czarny tekst to odpowiedzi z rozpoznawania oznaczone jako ostateczne i nie ulegną zmianie.

Aby rozpocząć, użytkownik klika przycisk mikrofonu, co powoduje uruchomienie tego kodu:

function startButton(event) {
    ...
    final_transcript = '';
    recognition.lang = select_dialect.value;
    recognition.start();

Ustawiamy język mówiony dla rozpoznawania mowy „lang” na wartość BCP-47, którą użytkownik wybrał z listy rozwijanej, np. „en-US” w przypadku języka angielskiego (Stany Zjednoczone). Jeśli nie jest ustawiony, domyślnie przyjmuje 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 wersji demonstracyjnej), a także niektóre języki pisane od prawej do lewej, które nie są uwzględnione w tej wersji demonstracyjnej, np. he-IL i ar-EG.

Po ustawieniu języka wywołujemy recognition.start(), aby aktywować rozpoznawanie mowy. Gdy zacznie przechwytywać dźwięk, wywoła obsługę zdarzenia onstart, a następnie dla każdego nowego zestawu wyników wywoła obsługę 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);
    };
}

Ta obsługa łączy wszystkie dotychczas otrzymane wyniki w 2 ciągi znaków: final_transcript i interim_transcript. Wynikowe ciągi znaków mogą zawierać "\n", np. gdy użytkownik powie „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 odpowiednich elementów <span>: final_span, który jest stylizowany na czarny tekst, oraz interim_span, który jest stylizowany na szary tekst.

interim_transcript to zmienna lokalna, która jest całkowicie przebudowywana za każdym razem, gdy wywoływane jest to zdarzenie, ponieważ od ostatniego zdarzenia onresult mogły się zmienić wszystkie wyniki tymczasowe. To samo możemy zrobić w przypadku final_transcript, po prostu zaczynając pętlę for od 0. Ponieważ jednak tekst ostateczny nigdy się nie zmienia, kod jest tu nieco bardziej wydajny, ponieważ final_transcript jest zmienną globalną, dzięki czemu to zdarzenie może rozpocząć pętlę for od event.resultIndex i tylko dołączyć nowy tekst ostateczny.

To wszystko. Reszta kodu służy tylko do tego, aby wszystko wyglądało ładnie. Utrzymuje stan, wyświetla użytkownikowi komunikaty informacyjne i przełącza obraz GIF na przycisku mikrofonu między statycznym mikrofonem, obrazem mikrofonu z przekreśleniem i animacją mikrofonu z pulsującą czerwoną kropką.

Obraz mikrofonu z przekreśleniem jest wyświetlany, gdy wywoływana jest funkcja recognition.start(), a następnie zastępowany animacją mikrofonu, gdy uruchamia się funkcja onstart. Zwykle dzieje się to tak szybko, że przekreślenie jest niezauważalne, ale przy pierwszym użyciu rozpoznawania mowy Chrome musi poprosić użytkownika o zgodę na używanie mikrofonu. W takim przypadku onstart uruchamia się tylko wtedy, gdy użytkownik wyrazi zgodę. Strony hostowane w protokole HTTPS nie muszą wielokrotnie prosić o zgodę, natomiast strony hostowane w protokole HTTP muszą.

Ożyw swoje strony internetowe, umożliwiając im słuchanie użytkowników.

Chętnie poznamy Twoją opinię...

Więcej informacji o naszej polityce prywatności znajdziesz w artykule Prywatność w Chrome (zaktualizowano: 16 czerwca 2026 r.).