Pole tekstowe z możliwością wypełniania głosem / Chrome

Google wprowadził do swojej przeglądarki Chrome ciekawą opcję uzupełniania pola tekstowego głosem. Wcześniej podobne rozwiązania były stosowane na platformie mobilnej Android - gdzie wybieranie głosem zostało udostępnione dużo wcześniej. W celu uruchomienia tej funkcjonalności konieczne jest wprowadzenie drobnej modyfikacji do kodu HTML.


Kod

W celu uruchomienia możliwości uzupełniania pola <input type="text"> głosem należy do niego dodać parametr x-webkit-speech. Dodatkowo możemy zdefiniować akcję dla zmiany tego pola używając głosu - zdarzenie to ma nazwę webkitspeechchange.
<input type="text" id="poleMowione" x-webkit-speech>
document.getElementById('poleMowione').addEventListener("webkitspeechchange",
   function(e) {
      var textContent = document.getElementById('poleMowione').value;
      document.getElementById('zPolaMowionego').innerHTML = textContent;
});

Wygląd

Wygląd pola prezentuje się mniej więcej tak na desktopowej wersji Google Chrome:


Przebieg "wprowadzania" danych głosem:

  1. Aby uruchomić wprowadzanie głosowe musimy kliknąć w ikonkę mikrofonu - wówczas pojawi się dymek z tekstem informującym o gotowości Chrome'a do odbierania danych


  2. Po wypowiedzeniu kwestii Google Chrome przetwarza wprowadzone dane


  3. Po dopasowaniu głosu do wzorców pole tekstowe zostaje wypełnione i wywoływane jest zdarzenie x-webkit-speech.

Przykład

Jeżeli uruchamiasz tę stronę z poziomu Google Chrome'a - poniżej zamieściłem przykład z tym oto polem.




Wygląda na to, że Google wprowadza coraz więcej rozszerzeń do swojej przeglądarki, których źródło znajduje się w platformie mobilnej Android.
Niestety rozszerzenie póki co jest w fazach testów i rozpoznaje jedynie język angielski - więc nie zdziwmy się, jeśli po tekście 'w szczebrzeszynie chrząszcz brzmi w trzcinie' zobaczymy tekst 'fences in your phone for business cheats' :)

Prześlij dalej:

2 komentarze:

konradjestwrwandzie pisze...

heh, przetestowalem to pole na Twojej stronie i dziala takze dla pl, nawet rozpoznal 'w szczebrzeszynie' :) uzywam chrome 9 dev.

ale czasem sie myli. moje imie wg niego to 'konwerter' :)

Michał Biniek pisze...

na chromie 8 widać jest jeszcze starsza (angielska) wersja detektora :)

Prześlij komentarz