Google Chrome rozumie ľudskej reči - vyhľadávanie v googli pomocou hlasu

Využitie moderných technológií sa dá opäť posunúť kúsok ďalej. Namiesto toho, aby ste si ničili prsty písaním na klávesnici, stačí povedať, čo má Google vyhľadať. Prehliadač už všetko vykoná tak, ako má.

Nikoho z nás asi neprekvapí, že Google používateľom internetu každú chvíľu prinesie niečo nové. Tento trik síce nemá na starosti priamo Google, ale Chrome ako jediný prehliadač dokáže tejto šikovnej vecičke porozumieť. Hovorím, o jednom z mnoha nových tagov v HTML5  -<input x-webkit-speech>.

V mobilných zariadeniach to nie je žiadna veda, mnohé „inteligentné telefóny“ túto možnosť ponúkajú. Pre ich používateľov je to bežná záležitosť, ale čo sa týka klasických počítačov, je to výrazný krok dopredu. Aj keď treba povedať, že už to nie je žiadna novinka. Ja som sa s týmto elementom stretol prvýkrát minulý rok na jar. Dovtedy ma príliš nezaujímal vývoj HTML5, pretože podpora bola horšia než zlá.

Vyhľadávanie zadaného výrazu cez google 

Tento príklad ukazuje, ako zostrojiť vyhľadávač pre google, ktorý umožní ľuďom vyhľadávať bez toho, aby čo i len prstom pohli, teda zadaním pomocou reči.

Ak máte nainštalovaný Google Chrome a mikrofón pripojený k počítaču, tak ukážku funkčnosti si môžete pozrieť TU. Hľadané výrazy zadávajte v angličtine.

Zdrojový kód k tomuto „mini-vyhľadávaču“ by mohol vyzerať takto:

<div class="body_122">
		<div class="input_1">
			<form action="javascript:sendIt();" method="GET" id="google_form" target="_blank">
				<label for="hladaj">Nájsť na <a href="http://www.google.com/">google</a> aj s použitím hlasového povelu<br />(Google Chrome):</label><br /><input id="hladaj" x-webkit-speech="" onwebkitspeechchange="this.form.submit();" type="text">
				<br /><br />
				<i>Nahrávanie hlasu sa aktivuje stlačením ikonky mikrofónu vpravo vnútri textového poľa</i><br />
				<i style="font-size: 80%">Hlasový povel musí byť v angličtine</i>
				<br />
			</form>
		</div>
	</div>

 Treba si všimnúť udalosť onwebkitspeechchange  elementu speech input , pretože tá zohráva dôležitú rolu.  „this.form.submit()“ znamená odoslanie formulára po skončení nahrávania hlasu. Funkčnosť tomuto kódu dáva, samozrejme, Javascript. V atribúte  „action“ formulára je volaná funkcia sendIt(), ktorá zaistí správne presmerovanie na google.com aj s načítanou hľadanou frázou. Funkcia je navyše navrhnutá tak, aby medzery, ktoré Google Chrome pri hovorení rozozná, boli nahradené pomlčkou.

function sendIt()
{
	if (document.getElementById('hladaj').value != '')
	{
		var stringz = encodeURIComponent(document.getElementById('hladaj').value).replace(/%20/g, '+');
		url = "http://google.com/search?q=" + stringz;
		window.location = url;
	}
	else
	{
		return false;
	}
}

Takže po poriadku, najprv sa vo funkcii sendIt() overí, či bol zadaný nejaký hlasový vstup (povel). Ak áno, do premennej stringz sa uloží enkódovaný reťazec hľadaného výrazu. Je to preto, aby v URL adrese nevznikali medzery alebo zakódované znaky (napr. pre medzeru by tam vznikol reťazec znakov „%20“). Ďalej sa do premennej url pridá reťazec http://google.com/search?q= a samotný hľadaný text v prijateľnej podobe, ktorý zaručí presmerovanie na vyhľadávanie hľadanej frázy. V prípade, že žiadny hlasový povel nebol zaznamenaný, tak sa nič nestane, o čom nás upozorní aj Google Chrome sám.

Pre úplnosť uvádzam aj kód v CSS, aj keď pre tento príklad nehrá až takú dôležitú rolu.

div.body_122
{
	width: 800px;
	margin: 10px auto;
	background-color: #E8DEBB;
	margin-top: 80px;
}
div.body_122 div
{
	margin: 60px auto;
	border: 1px #999 solid;
	text-align: center;
	padding: 60px 0;
}
div.body_122 div span
{
	font-family: Arial;
	font-size: 140%;
	color: #118811;
}
div.body_122 div span a
{
	color: #118811;
}
#hladaj
{
        width: 400px;
        border: 1px #595959 solid;
}

Naplnenie elementu textarea hlasovým povelom

Ďalšou zaujímavou vecou je, že ak trochu „oklameme“ prehliadač úpravou CSS, tak aj z elementu textarea môžeme dostať „čítačku hlasových povelov“: Výhodou použitia textarea je, že má zvyčajne väčšie kapacitné možnosti ako obyčajný input, čo sa počtu znakov týka. Pri tomto triku to ale neplatí, pretože textarea  „číta“ znaky práve z textového poľa speech input. Výhodou ale určite je, že je text prehľadnejší, keď je viditeľný celý vo viacerých riadkoch, ako keď z neho vidíme iba časť v jednom riadku.

Ukážka sa nachádza TU.

Ako som už písal, bolo treba trochu oklamať prehliadač a vlastne aj čitateľa, takže si hneď ukážeme ako by vyzeral HTML kód pre textareu:

<div class="body_122">
	<div class="input_2">
		<label for="textarea">Odoslať hlasovú správu:</label><br />
		<textarea id="textarea"></textarea>
		<label for="sprava"></label>
		<input x-webkit-speech id="sprava" onwebkitspeechchange="document.getElementById('textarea').value = this.value; document.getElementById('textarea').focus();" type="text">
		<br /><br />
		<i>Nahrávanie hlasu sa aktivuje stlačením ikonky mikrofónu vedľa textového poľa</i><br />
		<i style="font-size: 80%">Hlasový povel musí byť v angličtine</i>
	</div>
</div>

A takto by vyzeral CSS súbor, ktorý je tentokrát dôležitý, pretože speech input by nemal byť na stránke vidno. To preto, aby sa ako nástroj na zaznamenávanie hlasu  tvárila textarea:

div.body_122
{
        width: 800px;
        margin: 10px auto;
        background-color: #E8DEBB;
        margin-top: 80px;
}
div.body_122 div
{
        margin: 60px auto;
        border: 1px #999 solid;
        text-align: center;
        padding: 60px 0;
}
div.body_122 div span
{
        font-family: Arial;
        font-size: 140%;
        color: #118811;
}
#sprava
{
	font-size: 25px;
	width: 25px;
	height: 25px;
	cursor:pointer;
	border: none;
	position: absolute;
	margin-left: 5px;
	outline: none;
	background: transparent;
}
#textarea
{
	height: 150px;
	width: 400px;
	resize: none;
	border: 1px #595959 solid;
}

A nakoniec dosť podstatná vec, a tou je kód v Javascripte. Bez neho by vás síce Chrome "vypočul", ale nič prevratné by nespravil. Textarea preberá záznam z inputu, ktorý je "skrytý" pomocou CSS. Tu je kód:

function spravicka()
{
	var sprava = document.getElementById('sprava');
        var area = document.getElementById('textarea');
	area.value = sprava.value;
        area.focus();
}

Funkcia spravicka() je volaná v udalosti onwebkitspeechchange elementu speech input. To znamená, že sa vykoná potom, čo nastane nejaká zmena v jeho hodnote (value). Najprv sa do premennej sprava uloží element s ID sprava. Čiže je to speech input element a do premennej area sa uloží samotná textarea. Princíp je veľmi jednoduchý, iba sa načíta hodnota (value) zo speech inputu do textarey. A malý detail nakoniec, aby to vyzeralo dôveryhodne, do textarey sa nastaví kurzor. Doplnenie kódu tak, aby sa správa odosielala, by už mala byť hračka pre každého, kto sa čo i len trochu vyzná v problematike. Podstatou veci bolo, aby textarea preberala údaje zo speech inputu.

Záver

Hlavný problém vidím (zatiaľ) vo využiteľnosti. Tento element na stránke chápe momentálne iba Google Chrome, takže len ťažko sa s tým bežne na stránkach stretnete. Ďalším problémom je, že momentálne správne rozoznáva iba anglický jazyk. Aj keď vývojári pracujú (?) na tom, aby speech input správne rozoznával viacero jazykov, ešte stále sme sa výsledku nedočkali.

Na záver dodám len toľko, že ak máte chvíľu voľného času, vyskúšajte si, čo všetko to dokáže, pohrajte sa s JS kódom, možno prídete na nejaké lepšie príklady, ktorými by sa dal tento element ilustrovať. Verím, že do budúcnosti sa podpora v prehliadačoch zlepší a na písanie na klávesnici budeme možno už iba spomínať.