Tworzenie stron www Dąbrowa Górnicza, Sosnowiec, Będzin, Katowice

W poprzednim artykule, który znajduję się tutaj, opisałem w ramach wstępu, jak zaimplementować usługę rozpoznawania mowy w przeglądarce i ją obsługiwać. W tym artykule postaram zaprezentować rozszerzoną obsługę tej funkcjonalności. Począwszy od automatycznego wyszukiwania, wybierania dwóch najlepiej rozpoznanych, automatycznego tłumaczenia.  Zaprezentuje także, jak rozszerzyć funkcjonalność mowy, tak aby można było wprowadzać rozpoznany tekst do pola textarea, w celu późniejszego wysyłania maili.

Funckjonalność rozpoznawania mowy można zastosować w 4 następujących przypadkach:

1. Do bezpiecznych działań nie wywołujących skutków ubocznych np. wyszukiwanie, czy nawigacja strony.
2. Do cofania działań w programie np. archiwizacji email czy edycji dokumentów.
3. W krytycznych momentach dynamicznych gier, gdzie wysłanie informacji za pomocą pola input nie wymaga dużej korekty, a duża zaletą jest szybkość wpisywania tekstu.
4. Ostatecznie można też pisać emaile, sms czy dokumenty, jednakże w tym wypadku wymagać to będzie od użytkownika zastosowania korekty tekstu.

Zacznę od przykładu w którym zastosuje automatyczne wyszukiwanie po rozpoznaniu tekstu. Przy zastosowaniu jedynie atrybutu x-webkit-speech po rozpoznaniu mowy należy zatwierdzić ręcznie pole input. W celu zautomatyzowania teje czynności można zastosować następujące zdarzenie onwebkitspeechchange, które po sukcesywnym rozpoznaniu tekstu wykonuje polecenia zawarte w nim. Poniższy przykład pokazuje automatyczne wyszukiwanie w wyszukiwarce google:

<script type="text/javascript">
      function startSearch(event) {
         event.target.form.submit();
      }

</script>
<form action="http://www.google.com/search"><input type="search" name="q" /></form>

Opisując po kolei:

<script type="text/javascript">
      function startSearch(event) {
        if (event.results.length > 1) {
          var second = event.results[1].utterance;
          document.getElementById("second_best").value = second;
        }
      }

</script>
<form action="http://www.google.com/search"><input type="search" name="q" /> <input id="second_best" type="text" name="second_best" /></form>

<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">// <![CDATA[
      google.load("language", "1");

      var fromLang = "pl";
      var toLang = "en";

      function handleSpeechInput(event) {
        var text = event.target.value;
        var callback = function(result) {
          if (result.translation)
            speak(result.translation, toLang);
        };
        google.language.translate(text, fromLang, toLang, callback);
      }

      function speak(output, lang) {
         alert(output);
      }

// ]]></script>
<form><input type="text" /></form>

Niestety na początku muszę wspomnieć, iż ta usługa na dzień dzisiejszy działa tylko w przeglądarce Google Chrome od wersji 11. Tak, czy inaczej świetna frajda jest z tą funkcjonalnością. W tym artykule pokaże, w jak prosty sposób zastosować daną funkcjonalność na własnej stronie internetowej. W pierwszej kolejności przykład:

Umieszczenie jest banalnie proste. Wystarczy w polu input zamieścić odpowiedni atrybut. Według następującego przykładu:

<input type="text" x-webkit-speech/>

Lub dla XHTML :

<input type="text" x-webkit-speech="x-webkit-speech" />

Atrybut x-webkit-speech może być używany w każdym typie pola input np.  text, number, tel, lub search. Niestety rozszerzenie to niedostępne jest dla pola textarea.

Ograniczenie dla przeglądarki Chrome może spowodować, że nasz element nie będzie dostrzegany przez ludzi przeglądających naszą stronę. W związku z tym ważnym elementem jest poinformowanie oglądających o tym, że mogą z takiej sposobności skorzystać. Można to zrealizować wywołując za pomocą JS metodę createElement z odpowiednim parametrem webkitSpeech. Jeżeli stworzenie funkcji nie powiedzie się zwracana jest wartość undefined, co możemy sprawdzić za pomocą JS w następujący sposób:

if (document.createElement("input").webkitSpeech === undefined) {
	alert("Strona obsługuje rozpoznawanie mowy. \n
               Jeżeli chcesz skorzystać z tej funkcji \n
                  zmień przeglądarkę na Google Chrome");
}

Tyle w ramach wstępu. Zastosowanie tej technologii jest wyjątkowo prostę, zatem osoby nie znające się na podstawach kodu HTML mają możliwość wdrożyć tą technologię na swoich serwisach.

W następnych artykułach zajmę się przedstawieniem bardziej rozbudowanej obsługi tej funkcjonalności. Zapraszam do śledzenia mojej strony.