Come abilitare la ricerca vocale sul blog anche da mobile.

Come aggiungere una casella di ricerca con il riconoscimento vocale come in Google per permettere le ricerche anche con la voce.

Se aprite la pagina principale di Google alla fine della casella di ricerca visualizzerete una icona del microfono con cui effettuare una ricerca vocale invece di digitare una parola chiave. Non ci sarà bisogno di impostare il browser affinché capisca la tua pronuncia e questo modo per fare delle ricerche nel web può essere molto utile quando non si abbia un facile accesso alla tastiera come quando si accede da un dispositivo mobile.

Questa funzionalità mediante l'uso del linguaggio HTML5 e l'utilizzo delle Web Speech API di Google possono essere implementate anche nel nostro sito Blogger o Wordpress. Una tale casella di ricerca può essere inserita in un widget di Blogger o di Wordpress o anche nel template di Blogger.  Il navigatore potrà cliccare sulla icona del microfono per poi pronunciare la parola chiave. Va da sé che una tale casella di ricerca potrà comunque essere usata anche nel modo classico digitando le parole chiave.

Ho pubblicato sul mio Canale di Youtube una breve dimostrazione di questa funzionalità

Il codice da utilizzare è il seguente

<!-- CSS Riconoscimento vocale -->
<style>
  .speech {border: 1px solid #DDD; width: 360px; padding: 0; margin: 0}
  .speech input {border: 0; width: 310px; display: inline-block; height: 36px;}
  .speech img {float: right; width: 24px }
</style>
<!-- Casella di ricerca -->
<div align="center">
<form id="ipcei" method="get" action="http://www.ideepercomputeredinternet.com/search">
<div class="speech">
<input type="text" name="q" id="transcript" placeholder="Parla al microfono..." /><img style='display:inline;' onclick="startDictation()" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYktDHiflJ45N_yIkxfIpVhVGKNDqtU8rJIxPYPsc4N-XqIZ45Y8lb7zrmCaCtA4EcyVRrhxJiS6aRq2LfrmkwEkD-XNDJMXKHFSvNAFHDRJ6zf-13mEelgJzdMIugRl3q1qC6XM4u_-Y/s24-Ic42/microfono24.gif" />
</div>
</form>
</div>
<!-- HTML5 Speech Recognition API -->
<script>
  function startDictation() {
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
      var recognition = new webkitSpeechRecognition();
      recognition.continuous = false;
      recognition.interimResults = false;
      recognition.lang = "it-IT";
      recognition.start();
      recognition.onresult = function(e) {
        document.getElementById('transcript').value
                                 = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('ipcei').submit();
      };
      recognition.onerror = function(e) {
        recognition.stop();
      }
    }
  }
</script>

Oltre ai codici dei colori e allo stile dei bordi sono importanti la larghezza totale della casella (360 pixel), la larghezza dell'input (310 pixel), la dimensione della icona (24 pixel) e l'indirizzo della stessa. Sono fondamentali anche la lingua dell'input vocale (it-IT italiano mente en-US sarebbe inglese americano) e il dominio in cui effettuare le ricerche colorato di viola. Come detto questo codice può essere incollato in una pagina web in Modalità HTML oppure in un widget.

In un blog su Blogger si va su Layout > Aggiungi un gadget > Base > HTML/Javascript mentre su Wordpress si incolla il codice su Aspetto > Widget > Testo. In entrambi i casi si posiziona l'elemento a piacere in una sidebar o nel footer. Provate a cliccare sulla icona del microfono qui sotto, acconsentite all'utilizzo del microfono da parte della pagina cliccando sul popup quindi pronunciate una query di ricerca. Dopo il riconoscimento vocale visualizzerete i risultati

COME MOSTRARE LA RICERCA VOCALE NELLA VERSIONE MOBILE DI BLOGGER

Per studiarvi il posizionamento della casella di ricerca vocale nella versione mobile di Blogger vi invito a leggere il post su come mostrare un widget nella versione mobile. Una buona scelta è quella subito sotto l'intestazione o header. In questo caso dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </header> quindi subito sotto si incolla questo codice

<b:if cond='data:blog.isMobile'>
<!-- CSS Riconoscimento vocale -->
<style>
  .speech {border: 1px solid #DDD; width: 360px; padding: 0; margin: 0}
  .speech input {border: 0; width: 310px; display: inline-block; height: 36px;}
  .speech img {float: right; width: 24px }
</style>
<!-- Casella di ricerca -->
<div align="center">
<form id="ipcei" method="get" action="http://www.ideepercomputeredinternet.com/search">
<div class="speech">
<input type="text" name="q" id="transcript" placeholder="Parla al microfono..." /><img style='display:inline;' onclick="startDictation()" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYktDHiflJ45N_yIkxfIpVhVGKNDqtU8rJIxPYPsc4N-XqIZ45Y8lb7zrmCaCtA4EcyVRrhxJiS6aRq2LfrmkwEkD-XNDJMXKHFSvNAFHDRJ6zf-13mEelgJzdMIugRl3q1qC6XM4u_-Y/s24-Ic42/microfono24.gif" />
</div>
</form>
</div>
<!-- HTML5 Speech Recognition API -->
<script>
  //<![CDATA[
  function startDictation() {
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
      var recognition = new webkitSpeechRecognition();
      recognition.continuous = false;
      recognition.interimResults = false;
      recognition.lang = "it-IT";
      recognition.start();
      recognition.onresult = function(e) {
        document.getElementById('transcript').value
                                 = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('ipcei').submit();
      };
      recognition.onerror = function(e) {
        recognition.stop();
      }
    }
  }
  //]]>
</script>
</b:if>

Si salva il modello. Le righe evidenziate di giallo sono i tag condizionali mentre l'altro codice è lo stesso di prima con l'aggiunta di due righe per renderlo compatibile con il template di Blogger.