TUTORIAL CARA MENAMBAHKAN FITUR SPEECH RECOGNITION PADA WEBSITE

Cara Menambahkan Speech Recognition Pada Website

Jakarta,30 Juli 2019

Apakah kalian pernah melihat icon microphone pada saat membuka google.com? Nah itulah fitur speech recognition.  Sehingga saat anda meng-klik ikon tersebut maka ada instruksi untuk mengatakan sesuatu, lalu kata – kata anda tadi akan cepat di ubah atau di transkrip menjadi kata – kata dalam bentuk tulisan. Tidak seperti produk speech recognition sebelumnya, Anda tidak perlu lagi untuk melatihnya agar memahami semua perkataan anda. Teknologi ini sudah pasti sangat berguna bagi seseorang yang tidak dapat mengetik karena berbicara pada pc atau gadget anda akan terasa lebih mudah dari pada harus mengetiknya.

Fitur ini dapat kita gunakan pada website buatan kita sendiri hanya dengan menambahkan beberapa baris kode pada website anda sehingga pengunjung website anda akan merasa di permudah. Pengunjung website anda dapat melakukan pencarian dengan menggunakan kata-kata pada situs web anda atau bahkan dapat mengisi formulir hanya menggunakan suara mereka sehingga itu seperti pertanyaan biasa. Kini sudah banyak browser yang mendukung teknologi ini, contohnya adalah browser Google Chrome dan Firefox yang sudah mendukung pengenalan suara ini.

Berikut cara nya :

1. kita membutuhkan HTML5 Web Speech API (sudah tersedia jika menggunakan html 5).

Pada API sebelumnya, Anda dapat menambahkan atribut “x-webkit-speech” untuk setiap input yang nantinya dapat di gunakan untuk memproses suara. Kini atribut” x-webkit-speech” telah tidak dapat di gunakan lagi dan kini anda dapat menggunakan API berbentuk Javascript untuk memasukkan teknologi ini pada website anda. 

2. Berikut kode yang di gunakan:

<!--ini adalah code CSS -->

<!-- CSS Styles -->

<style>

  .speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}

  .speech input {border: 0; width: 240px; display: inline-block; height: 30px;}

  .speech img {float: right; width: 40px }

</style>

<!--ini untuk membuat search form -->

<!-- Search Form -->

<form id="referensi" method="get" action="https://www.google.com/search">

  <div class="speech">

    <input type="text" name="q" id="transcript" placeholder="Speak" />

    <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />

  </div>

</form>

<!--ini adalah kode script (biasanya di letakkan di bagian bawah sebelum </body> -->

<!-- HTML5 Speech Recognition API -->

<script>

  function startDictation() {

    if (window.hasOwnProperty('webkitSpeechRecognition')) {

      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;

      recognition.interimResults = false;

      recognition.lang = "en-US";

      recognition.start();

      recognition.onresult = function(e) {

        document.getElementById('transcript').value = e.results[0][0].transcript;

        recognition.stop();

        document.getElementById('referensi').submit();

      };

      recognition.onerror = function(e) {

        recognition.stop();

      } 

    }

  }

</script>

Catatan:

a. CSS : berguna untuk menempatkan icon microphone pada kotak input, kode ini memiliki 

input yang akan diproses oleh penyedia API dan merekalah yang akan melakukan pekerjaan berat ini.

b. Ketika pengguna mengklik gambar microphone dalam kotak pencarian pada website anda, JavaScript akan memeriksa apakah browser pengguna mendukung pengenalan suara atau tidak. Jika browser pengguna mendukungnya, maka suara akan di transkrip dari server penyedia API kemudian akan mengisi hasilnya pada input form tersebut.
Aplikasi pendikte contohnya dapat di temukan pada "https://www.google.com/intl/en/chrome/demos/speech.html"

juga menggunakan pengenalan suara dengan menggunakan API ini, lalu mereka akan memasukkannya ke dalam textarea dan bukan pada input dengan type text.

c. Jika HTML input berada pada situs yang terenkripsi ( HTTPS), browser pengguna tidak akan berulang kali meminta izin untuk menggunakan mikrofon.

d. Anda dapat mengubah properti pada api tersebut dengan menggunakan bahasa yang anda inginkan dengan bahasa yang anda inginkan, namun ada beberapa daftar bahasa yang di dukung ( tidak semua bahasa di dunia ). Anda dapat nebgganti 'en-US' ke bahasa lain (seperti fr-FR untuk Français).

Sekian tutorial cara menambahkan fitur speech recognition pada website. Semoga bermanfaat