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' :)