Salah satu fitur menarik di HTML5 adalah kemampuan mengakses device, salah satunya adalah fungsi microphone. Kali ini kita akan mencoba menggunakan webkit (only for Chrome) untuk mengambil inputan suara dari microphone. Untuk bisa menjalankan function ini, dibutuhkan koneksi internet, karena akan menggunakan resource online dari webkit tersebut. Function ini mampu mengenali input suara yang diucapkan, kemudia diubah dalam bentuk tulisan. Penasaran kan?? silahkan dicoba.

Tag Input

Caranya cukup sederhana, kita hanya perlu menggunakan <input> dengan menambahkan attribute x-webkit-speech. Kita bisa juga menambahkan pengecekan browser support terhadap fitur webkit ini.

<style>
#speech-input-field {
  width: 400px;  height: 50px;  padding: 10px 15px;
  font-size: 155%;  border-radius: 10px; 
  border: 1px solid #ccc;  outline: 0;}
body{  font-family: Tahoma;  background:#DEDEDE;  color:#800;}
header{  text-shadow: #5E5E5E 1px 1px 2px;}
</style>
<div id="speech-input">
  <header><span>HTML5 Input Speech</span>
    <h1>Speech Input HTML5</h1></header>
  <section>
    Just try this:
    <pre>&lt;input type="text" <b>x-webkit-speech</b> /&gt;</pre>
    <div >
     <div style="height:30px;">
     <input id="speech-input-field" type="text" x-webkit-speech />
      <p style="display:none">
       Speech input is not enabled in your browser.<br>
       Try running Google Chrome with the
       <code>--enable-speech-input</code> flag.</p>
      </div>
     </div>

<script>
 if (!('webkitSpeech' in document.createElement('input'))) {
  document.querySelector('#speech-input p').style.display = 'block';
 }
 </script>
 </section>
</div>

Untuk langkah selanjutnya, kita bisa modifikasi agar inputan secara otomatis bisa diproses, misalkan untuk mengambil data dari Server. Selamat mencoba!! 🙂

sumber : http://slides.html5rocks.com/