Natywne wyszukiwanie głosowe dla WordPress, studium przypadku

Era pisania na klawiaturze dobiega końca. Jak omówiłem w moim Przewodniku Voice Search SEO, do 2026 roku zachowania użytkowników uległy fundamentalnej zmianie. Projektowanie „Keyboard-first” staje się koncepcją przestarzałą.

Wraz ze wzrostem „Ambient AI”, gdzie komputery są wszechobecnymi słuchaczami, a nie tylko ekranami, oczekiwanie na Interakcję Multimodalną (Głos, Gest, Wzrok) jest standardem. Użytkownicy nie chcą pisać „Programista WordPress Warszawa”; chcą zapytać: „Znajdź mi eksperta WordPress w pobliżu”.

Podczas gdy widżety z awatarem AI renderują imponujące trójwymiarowe postacie konwersacyjne, uważam, że pierwszym krytycznym krokiem dla większości wysokowydajnych stron WordPress jest solidny, wydajny i natywny interfejs wyszukiwania głosowego.

To case study dokumentuje, jak zbudowałem przycisk wyszukiwania głosowego w pasku wyszukiwania wppoland.com: zero wtyczek, zero zbędnego kodu, czysty JavaScript. Omawiam implementację techniczną, to, dokąd naprawdę trafia dźwięk, które przeglądarki obsługują tę funkcję w październiku 2026 i dlaczego wybrałem tę ścieżkę zamiast ciężkich widżetów stron trzecich.

#Dlaczego widżety z awatarem AI psują Core Web Vitals

Zanim wybrałem natywne wyszukiwanie głosowe, porównałem je z osadzanymi widżetami „AI Avatar”.

#Jak widżety z awatarem AI spowalniają LCP i INP

Konwersacyjne awatary potrafią wyglądać efektownie. Używają WebGL do renderowania realistycznych twarzy, które synchronizują ruch ust z dźwiękiem generowanym przez AI. Jednak dla strony korporacyjnej lub wydajnego portfolio często oznaczają znaczny dług wydajnościowy:

• LCP (Largest Contentful Paint): Ładowanie silnika 3D (takiego jak Three.js) i zasobów postaci często blokuje główny wątek i opóźnia LCP.
• INP (Interaction to Next Paint): Ciągłe pętle animacji i nasłuchiwacze zdarzeń mogą powodować mikro-zacięcia podczas przewijania lub klikania.
• Narzut prywatności: Wysyłanie ciągłych strumieni audio do serwera strony trzeciej podnosi poprzeczkę zgodności z RODO.

Mój cel: Umożliwić interakcję „Ambient AI”, pozwalając użytkownikom mówić do strony w sposób naturalny, bez poświęcania mojego wyniku PageSpeed i bez dokładania kolejnego skryptu zewnętrznego.

#Web Speech API do wyszukiwania głosowego

Chrome, Edge i Safari mają interfejs, który wielu programistów pomija: Web Speech API. Składa się z dwóch części. SpeechRecognition zamienia dźwięk z mikrofonu na tekst, a SpeechSynthesis zamienia tekst na mowę. Specyfikacja to Draft Community Group Report prowadzony w repozytorium W3C Audio Community Group, a nie rekomendacja W3C. MDN oznacza SpeechRecognition jako funkcję o ograniczonej dostępności, czyli spoza Baseline.

• Brak zewnętrznych bibliotek: Silnik rozpoznawania dostarcza przeglądarka, więc wysyłasz tylko kod łączący API z formularzem wyszukiwania.
• Brak umowy z dostawcą: Nie zakładasz konta w API speech-to-text i nie zarządzasz kluczami.
• Nie zawsze lokalnie: Rozpoznawanie odbywa się tam, gdzie zdecyduje przeglądarka. Kolejna sekcja wyjaśnia, dlaczego to ważne.

#Web Speech API czy widżet z awatarem AI

Dla wppoland.com wybór był jasny: wydajność to moja marka. Wybrałem rozwiązanie natywne.

#Dokąd Web Speech API wysyła nagrany głos

Web Speech API nie obiecuje przetwarzania lokalnego. Przewodnik MDN mówi to wprost: „Domyślnie rozpoznawanie mowy na stronie internetowej korzysta z serwerowego silnika rozpoznawania. Twój dźwięk jest wysyłany do usługi internetowej w celu rozpoznania, więc nie zadziała offline” (MDN, Using the Web Speech API, tłumaczenie własne). W Chrome ta usługa należy do producenta przeglądarki, a nie do ciebie ani do autora wtyczki.

Specyfikacja daje dziś alternatywę na żądanie. Ustawienie recognition.processLocally = true przed start() oznacza wymóg, by rozpoznawanie odbyło się na urządzeniu. Tryb lokalny potrzebuje paczki językowej dla każdego języka. Gdy paczki brakuje, start() kończy się błędem language-not-supported. Paczkami zarządzają dwie metody statyczne:

• SpeechRecognition.available({ langs, processLocally }) zwraca jeden ze stanów: unavailable, downloadable, downloading lub available.
• SpeechRecognition.install({ langs }) pobiera paczki i zwraca true albo false.

Obie metody podlegają dyrektywie Permissions-Policy on-device-speech-recognition, której domyślna lista dozwolonych to self. Iframe z innej domeny nie wywoła ich, dopóki strona nadrzędna nie przekaże mu tej funkcji.

Dla strony obsługującej odwiedzających z UE wniosek praktyczny jest prosty: przycisk głosowy w trybie domyślnym wysyła mowę do usługi rozpoznawania producenta przeglądarki i polityka prywatności powinna to powiedzieć prostymi słowami. Moja deklaracja „prywatność przede wszystkim” jest prawdziwa tylko w węższym sensie: dźwięku nie dostaje żadna wtyczka ani dostawca widżetu.

#Jak włączyć rozpoznawanie na urządzeniu z planem awaryjnym

const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
const lang = document.documentElement.lang || 'pl-PL';
const recognition = new SR();
recognition.lang = lang;

if (typeof SR.available === 'function') {
  const status = await SR.available({ langs: [lang], processLocally: true });
  if (status === 'available') {
    recognition.processLocally = true; // dźwięk zostaje na urządzeniu
  } else if (status === 'downloadable') {
    // Zaproponuj pobranie po akcji użytkownika; inaczej użyj silnika serwerowego
  }
}

MDN zaznacza, że implementacje obsługujące rozpoznawanie na urządzeniu robią to bez prefiksów, więc available() istnieje tylko na konstruktorze bez prefiksu. Wykrywaj tę metodę, nigdy jej nie zakładaj.

#Które przeglądarki obsługują Web Speech API w 2026

Tabela pochodzi z browser-compat-data MDN w wersji 8.1.6 (15 października 2026). Numery oznaczają pierwsze wydanie z obsługą.

Dla motywu WordPress wynikają z tego trzy wnioski. Zostaw zapis window.SpeechRecognition || window.webkitSpeechRecognition, bo Safari nadal zna tylko nazwę z prefiksem. Ukryj przycisk mikrofonu, gdy nie istnieje żaden konstruktor, bo użytkownicy stabilnego Firefoksa zobaczyliby przycisk, który nic nie robi. Rozpoznawanie na urządzeniu traktuj na razie jako dodatek dostępny tylko w Chromium.

#Jak dodać wyszukiwanie głosowe w JavaScript

Dodałem tę funkcjonalność do mojego komponentu SearchInput.astro. Zapewnia to, że pasek wyszukiwania jest jedynym źródłem prawdy zarówno dla zapytań tekstowych, jak i głosowych.

#Krok 1: Wykrywanie obsługi API

Najpierw muszę uszanować możliwości przeglądarki użytkownika. Nigdy nie zakładam, że API istnieje.

// Sprawdź, czy przeglądarka wspiera SpeechRecognition
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
    const voiceBtn = document.getElementById("voice-search-btn");
    voiceBtn.classList.remove("hidden"); // Pokaż przycisk tylko, jeśli wspierane
}

#Krok 2: Kod rozpoznawania mowy

Oto uproszczona wersja kodu. Zwróć uwagę na zapasowe odwołanie do prefiksu webkit: przeglądarki oparte na Chromium przyjmują nazwę bez prefiksu od wersji 139, ale Safari nadal udostępnia tylko webkitSpeechRecognition.

// 1. Inicjalizacja
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

// 2. Konfiguracja
recognition.continuous = false; // Zatrzymaj po jednym zdaniu
recognition.interimResults = false; // Zwracaj tylko finalne wyniki
recognition.lang = document.documentElement.lang || 'pl-PL'; // Dynamiczne wsparcie języka

// 3. Obsługa Zdarzeń
recognition.onstart = () => {
    // Feedback Wizualny jest kluczowy dla UI Głosowego
    voiceBtn.classList.add("text-red-500", "animate-pulse");
    searchInput.placeholder = "Nasłuchiwanie...";
};

recognition.onend = () => {
    // Wyczyść stan UI
    voiceBtn.classList.remove("text-red-500", "animate-pulse");
    searchInput.placeholder = "Szukaj...";
};

recognition.onresult = (event) => {
    // 4. Przechwyć Transkrypt
    const transcript = event.results[0][0].transcript;
    searchInput.value = transcript;
    
    // 5. UX: Auto-submit po naturalnej pauzie
    // Usuwa to tarcia związane z ponownym klikaniem "Szukaj"
    setTimeout(() => searchInput.form.submit(), 500);
};

// 6. Wyzwalacz
voiceBtn.addEventListener('click', () => recognition.start());

Jeśli nie ustawisz lang, specyfikacja przyjmuje język elementu głównego dokumentu, więc poprawny atrybut <html lang> już daje każdej wersji językowej właściwy język rozpoznawania.

#Krok 3: Obsługa błędów

Użycie w świecie rzeczywistym bywa trudne. Użytkownicy odmawiają uprawnień do mikrofonu lub tło jest hałaśliwe. Dodałem obsługę błędów, aby łagodnie przejść do wpisywania tekstu, jeśli mikrofon jest zablokowany.

recognition.onerror = (event) => { console.log('Błąd Głosu:', event.error); };

#Jakie błędy rozpoznawania mowy obsłużyć

Zdarzenie error niesie jeden z ośmiu kodów zdefiniowanych w specyfikacji. Każdy wymaga innej reakcji:

#Czym mój komponent produkcyjny różni się od minimalnego przykładu

Działający SearchInput.astro idzie dalej niż powyższy fragment i każda różnica wynika z realnego użycia:

• Wyniki pośrednie włączone: ustawia continuous = true i interimResults = true, wpisuje każdą częściową transkrypcję do pola w trakcie mówienia i wysyła formularz dopiero wtedy, gdy przyjdzie wynik z isFinal równym true. Użytkownik widzi pojawiające się słowa zamiast czekać w ciszy.
• Jawne zatrzymanie: po wyniku końcowym wywołuje recognition.stop(), a formularz wysyła po 500 ms.
• Przycisk przełączający: drugie kliknięcie mikrofonu kończy nasłuchiwanie. Stan śledzi flaga isListening.
• Zabezpieczony start: start() siedzi w bloku try/catch, bo specyfikacja rzuca InvalidStateError, gdy sesja już trwa.
• Segregacja błędów: no-speech jest ignorowany, aborted przechodzi bez komunikatu, not-allowed pokazuje przetłumaczony placeholder o zablokowanym mikrofonie, każdy inny kod pokazuje ogólny błąd mikrofonu, a oryginalny placeholder wraca po 3 sekundach.
• Przetłumaczone teksty: komunikaty o nasłuchiwaniu, blokadzie i błędzie istnieją we wszystkich sześciu językach serwisu i trafiają do skryptu przez atrybuty data- przycisku.

#Jak dodać wyszukiwanie głosowe do motywu WordPress

Ten sam skrypt działa w klasycznym motywie WordPress, bo wyszukiwarka WordPressa to zwykły formularz GET. get_search_form() najpierw szuka pliku searchform.php w motywie potomnym lub nadrzędnym i go ładuje; jeśli go nie ma, wyświetla domyślny formularz, którego wersja HTML5 to <form role="search"> wysyłany na home_url( '/' ) z polem o nazwie s (developer.wordpress.org). Dwa hooki zmieniają go bez szablonu: filtr get_search_form dla HTML i search_form_format dla formatu.

Integracja ma więc trzy części:

1. Dodaj w searchform.php obok pola s element <button type="button"> z dostępną etykietą, domyślnie ukryty.
2. Wskaż skryptowi to pole i wywołaj form.submit() po wyniku końcowym. Zapytanie trafia na zwykłą stronę wyników wyszukiwania, więc po stronie serwera nic się nie zmienia.
3. Załaduj skrypt przez wp_enqueue_script() i przekaż array( 'strategy' => 'defer', 'in_footer' => true ) jako piąty argument. Od WordPressa 6.3 ten argument przyjmuje tablicę z kluczem strategy o wartości defer lub async (developer.wordpress.org), więc kod głosowy nigdy nie blokuje renderowania.

Przetłumaczone teksty „Nasłuchiwanie…” i komunikaty błędów przekaż przez wp_localize_script() albo atrybuty data- renderowane przez esc_attr__(), żeby przycisk mówił tym samym językiem co motyw.

#Jak zaprojektować UX wyszukiwania głosowego

Głos jest niewidzialny. Bez ekranu użytkownik nie ma „kursora”, aby wiedzieć, gdzie jest. Dlatego informacja zwrotna UI jest kluczowa, aby połączyć ludzką intencję z wykonaniem maszyny.

#Jak pokazać, że mikrofon nasłuchuje

Gdy użytkownik klika mikrofon, interfejs musi zareagować natychmiast.

• Animacja pulsu: Zastosowałem klasę CSS animate-pulse do ikony mikrofonu. Czerwony lub pulsujący wskaźnik to uniwersalny znak nagrywania.
• Komunikat w placeholderze: Tekst w polu zmienia się na „Nasłuchiwanie…”. To potwierdza, że system jest gotowy na wprowadzenie danych, zapobiegając zbyt wczesnemu mówieniu.

Specyfikacja dokłada dwa twarde wymagania po stronie przeglądarki. Sesja rozpoznawania może ruszyć tylko po wyraźnej, świadomej zgodzie użytkownika, na przykład po kliknięciu czytelnego przycisku mowy, a przeglądarka musi w czasie nagrywania pokazywać wyraźny wskaźnik, który pozwala też nagranie zatrzymać. Pulsująca ikona uzupełnia ten wskaźnik, ale go nie zastępuje.

#Po co opóźniać wysłanie rozpoznanego zapytania

Wdrożyłem 500ms opóźnienia między przechwyceniem tekstu a wysłaniem formularza.

• Powód: Daje to użytkownikowi ułamek sekundy na zobaczenie, co usłyszało AI.
• Zaufanie: Jeśli AI błędnie usłyszało „WordPress” jako „Word Press”, zobaczenie tekstu pozwala użytkownikowi zaufać, że system działa, nawet jeśli wynik jest nieco niedokładny.

#Dostępność wyszukiwania głosowego

Wyszukiwanie głosowe ma uzupełniać wyszukiwanie tekstowe, nigdy go nie zastępować. Osoby z zaburzeniami mowy lub słuchu, a także użytkownicy w hałaśliwym otoczeniu, potrzebują zwykłego pola tekstowego, które działa bez przeszkód. Przycisk głosowy pojawia się tylko wtedy, gdy przeglądarka obsługuje API, ma atrybut aria-label, a wyszukiwanie tekstowe działa w każdym przypadku.

#Jak odczytać odpowiedzi na głos przez syntezę mowy

Druga połowa API dotyczy wyjścia. window.speechSynthesis zwraca kontroler SpeechSynthesis, który specyfikacja definiuje jako skryptowe API do sterowania wyjściem zamiany tekstu na mowę. Kolejkuje obiekty SpeechSynthesisUtterance i odczytuje je po kolei, udostępniając speak(), cancel(), pause(), resume() i getVoices(). Obsługa jest dużo szersza niż w przypadku rozpoznawania: według browser-compat-data Chrome 33, Edge 14, Firefox 49 i Safari 7.

function speak(text: string) {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = document.documentElement.lang || 'pl-PL';
  speechSynthesis.cancel(); // usuń wszystko, co czeka w kolejce
  speechSynthesis.speak(utterance);
}

Jedna pułapka: w Chrome lista głosów wypełnia się asynchronicznie. MDN radzi wywołać getVoices() raz i ponownie przy zdarzeniu voiceschanged, bo starsze przeglądarki zwracają listę od razu, a Chrome najpierw potrzebuje zdarzenia. Przycisk „przeczytaj pierwszy wynik na głos” zbudowany w ten sposób zamyka pętlę głosową bez żadnego kodu po stronie serwera.

#Co Google naprawdę obsługuje w speakable schema

Ta funkcja służy przede wszystkim użytkownikom. Po stronie wyszukiwarki odpowiednim znacznikiem jest speakable.

#Czy wyszukiwanie głosowe pomaga w E-E-A-T

Wdrożenie aktualnych API przeglądarek pokazuje techniczną Ekspertyzę (literę „E” w E-E-A-T) ludziom, którzy korzystają ze strony. Google nie opisuje wejścia głosowego jako czynnika rankingowego, więc traktuj je jako funkcję użyteczności, a nie dźwignię SEO.

#Jak połączyć wyszukiwanie głosowe ze speakable schema

Schema.org definiuje speakable jako właściwość typów Article i WebPage, która wskazuje sekcje strony szczególnie nadające się do odczytania na głos, odwołując się do nich selektorami CSS lub ścieżkami XPath w obiekcie SpeakableSpecification (schema.org). Dokumentacja Google mocno zawęża praktyczną wartość:

• Funkcja „jest w wersji beta i może się zmienić” (tłumaczenie własne).
• Działa dla użytkowników w USA z urządzeniami Google Home ustawionymi na angielski i tylko dla wydawców publikujących treści po angielsku.
• Asystent Google używa jej do odpowiadania na pytania o bieżące wiadomości na inteligentnych głośnikach.
• Google zaleca około 20 do 30 sekund audio, mniej więcej dwa lub trzy zdania na sekcję speakable, oraz albo cssSelector, albo xPath, nigdy oba naraz (Google Search Central).

Łączę wejście głosowe ze znacznikami speakable w moich artykułach, bo kosztuje to jeden blok we frontmatterze, ale nie oczekuję, że Google odczyta na głos artykuł, który nie jest newsem, w dodatku po polsku. Pełną stronę SEO wyszukiwania głosowego, w tym featured snippets i znaczniki FAQ, opisuje mój przewodnik voice search SEO.

#Co po wyszukiwaniu głosowym na stronie

To wdrożenie reprezentuje Etap pierwszy nowoczesnej interakcji z AI.

• Etap pierwszy (obecny): Komenda głos na tekst. Użytkownik mówi, strona wykonuje wyszukiwanie tekstowe.
• Etap drugi (następny): Interfejsy konwersacyjne. Strona używa LLM (jak Realtime API od OpenAI), aby zrozumieć intencję i „narysować” niestandardowy UI w odpowiedzi.

Na przykład, zamiast szukać „Cennik”, użytkownik może powiedzieć: „Pokaż mi plany dla małej agencji.” Strona następnie dynamicznie wyrenderuje tabelę porównawczą przefiltrowaną pod kątem tej konkretnej potrzeby.

Aby dotrzeć do Etapu drugiego, musisz opanować Etap pierwszy. Natywny Voice Search, który zbudowałem dzisiaj, jest fundamentem dla multimodalnego internetu jutra.

Jest szybki, nie wysyła kodu stron trzecich, a dzięki processLocally może zostawić mowę na urządzeniu w przeglądarkach, które to obsługują.

#Często zadawane pytania (FAQ)

P: Czy natywne wyszukiwanie głosowe działa we wszystkich przeglądarkach? O: Nie. Chrome, Edge, Samsung Internet i Safari (z prefiksem webkit) obsługują SpeechRecognition, a Firefox ma je tylko w wersjach preview. MDN nie zalicza tej funkcji do Baseline. Dlatego mój skrypt wykrywający funkcję ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) jest kluczowy: przycisk po prostu nie pojawi się w przeglądarkach bez obsługi.

P: Czy mogę tego używać do dyktowania postów w panelu administratora WordPress? O: To samo API działa w każdej stronie otwartej w obsługiwanej przeglądarce, ale ten artykuł opisuje tylko pole wyszukiwania na froncie. Dyktowanie w edytorze wymagałoby osobnej integracji z edytorem bloków.

P: Jak to się ma do widżetów z awatarem AI? O: To różne narzędzia. Natywne wyszukiwanie głosowe zamienia mowę w zapytanie i nie ładuje niczego przed kliknięciem. Awatar to osobny widżet z własnym skryptem i chmurą dostawcy.

P: Czy dane audio są wysyłane do Google/Apple? O: W trybie domyślnym tak, do usługi producenta przeglądarki: MDN podaje, że w Chrome rozpoznawanie korzysta z silnika serwerowego. W Chrome i Edge od wersji 139 można wymusić przetwarzanie na urządzeniu przez processLocally = true.

P: Dlaczego nie używacie „Słowa Wybudzającego” jak „Hej WordPress”? O: Specyfikacja pozwala rozpocząć sesję rozpoznawania tylko po wyraźnej zgodzie użytkownika, na przykład po kliknięciu przycisku mowy. Strona nie może więc stale nasłuchiwać słowa wybudzającego.

Spróbuj sam: Kliknij ikonę mikrofonu w moim pasku wyszukiwania powyżej i zapytaj o „Przewodnik SEO”.

Zobacz moje usługi optymalizacji szybkości WordPress, jeśli chcesz poprawić Core Web Vitals i realną szybkość strony.