Ok Google, puoi cercare nel mio sito web?

Si può implementare in un sito personale la ricerca vocale, come fa Google con “Ok Google”?
Abbiamo parlato anche in questo articolo “Ricerca vocale, il futuro del search Marketing” di come la ricerca vocale stia crescendo. Perchè non dare la possibilità all’utente di interagire con il nostro sito attraverso la propria voce?

Questo risulterebbe molto utile sopratutto quando gli utenti navigano con il proprio telefono. La scrittura da mobile è più veloce quando viene utilizzata la voce invece che la tastiera. Per questo ho creato un piccolo esempio di come si potrebbe utilizzare.  Nel campo ricerca di questo blog come puoi vedere è presente una icona piccola del microfono. Clicca sull’ icona e parla … la tua voce si trasformerà in parole scritte!

google-voice-20131127[1]

 

 

 

Fantastico, o no?!  In realtà non è così difficile come sembra. Con poche righe di codice riuscirai ad avere la ricerca vocale per il tuo sito web.

Come aggiungere la ricerca vocale?

E passato qualche anno da quando è stato lanciato Web Speech API dando la possibilità a programmatori di incorporare il microfono all’interno delle loro applicazioni web. Qui potete trovare un’ introduzione al Web Speech API e provare la sezione demo della trascrizione della voce in testo.

Ma torniamo a noi e a come fare per integrare la funzione su wordpress. Di seguito vi scrivo il codice che ho utilizzato per avere la ricerca vocale nel blog di Prima Posizione.

<form id="searchformSpeech" action="<?php echo home_url(); ?>/" method="get">
<input type="text" name="s" id="trascrizione" value="Parla ora..." />
<input type="submit" value="" />
<img onclick="iniziaRiconoscimento()" src="http://goo.gl/9pB8hg" />
</form>


<script>
function iniziaRiconoscimento() {
if (window.hasOwnProperty('webkitSpeechRecognition')) {
var riconoscimento = new webkitSpeechRecognition();
riconoscimento.continuous = false;
riconoscimento.interimResults = false;
riconoscimento.lang = "it-IT";
riconoscimento.start();
riconoscimento.onresult = function(e) {
document.getElementById('trascrizione').value = e.results[0][0].transcript;
riconoscimento.stop();
document.getElementById('searchformSpeech').submit();
};
riconoscimento.onerror = function(e) {
riconoscimento.stop();
}
}
}
</script>

Come si vede dal codice basta una funzione JavaScript che richiami le API del Web Speech.  La funzione viene chiamata ogni volta che si clicca sull’icona del microfono. Il risultato della trascrizione vocale viene inserito all’interno del form di ricerca. Quando l’utente finisce di pronunciare le parole e il campo ricerca è completo viene fatto l’invio del form.
All’interno della funzione c’è la possibilità di cambiare anche la lingua di riconoscimento vocale riconoscimento.lang = “it-IT”;

Questo metodo ovviamente ti aiuta a capire come funzionano le API, ma tu puoi tranquillamente tralasciare e utilizzare un plugin già pronto per wordpress.

Consiglio: Per rimuovere la continua ripetizione della richiesta di uso del microfono bisogna utilizzare il protocollo HTTPS nel vostro sito web.

 

Alla prossima 🙂

Scritto da    |   febbraio 25th, 2016   |   Nessun commento
Ertil Gani

Lascia un commento

corsoconsulente

 

GUIDA LINKEDIN

Guida professionale all’utilizzo e gestione ottimale del profilo.

SCARICA ORA

GUIDA LINKEDIN