Membuat speak text to speech dengan Javascript

Screenshot%2Bfrom%2B2016 04 15%2B06%253A57%253A05

Pembahasan kali ini saya ingin coba membahas tentang bagaimana dari sebuah text atau tulisan di konversi menjadi suara, salah satu contoh-nya ada pada fitur google translate. Jika kamu pernah nyoba google translate, pada saat kamu mengetikan tulisan pada form inputan di sana terdapat sebuah icon speaker dan ketika kamu meng-klik-nya maka google translate akan membacakan isi text yang telah kamu tulis di form inputan tadi.

Screenshot%2Bfrom%2B2016 04 15%2B05%253A55%253A01

Nah di pembahasan kali ini saya akan membahas itu. Di praktik kali ini saya memakai Responsive Voice JS . Javascript ini akan membantu kita dalam mengkonversi text menjadi suara. Yang menariknya, dengan javascript ini kamu bisa mengatur kecepatan bicara, volume dan lain-lain.

Sebenarnya javascript ini berbayar, tapi kita masih bisa menggunakan-nya, karena dia menyediakan versi gratisnya, cuma jika memakai versi gratis, kita tidak akan dapat semua fitur-fiturnya. Tapi lumayan, pas kemarin saya coba yang gratisnya fiturnya enak juga. Mari langsung saja ikutin praktinya.

<!DOCTYPE html> <html> <head>  <title>speak text to speech with Resvonsive Voice</title>  <script src='https://code.responsivevoice.org/responsivevoice.js'></script>  <script type="text/javascript">   function play (){    responsiveVoice.speak(     "Hey nama saya cahya, kang cahya dot kom merupakan web personal saya, terimakasih telah berkunjung kemari.",     "Indonesian Female",     {      pitch: 1,       rate: 1,       volume: 1     }    );   }    function stop (){    responsiveVoice.cancel();   }    function pause (){    responsiveVoice.pause();   }    function resume (){    responsiveVoice.resume();   }  </script> </head> <body>  <button onclick="play();">Play</button>  <button onclick="stop();">Stop</button>  <button onclick="pause();">Pause</button>  <button onclick="resume();">Resume</button> </body> </html> 

Keterangan :
Function play berfungsi untuk menjalankan-nya suara. Parameter pertama pada fungsi responsiveVoice.speak di isi dengan text yang akan dia baca, lalu di parameter kedua di isi dengan tipe suara, pada contoh saya memakai indonesian female, di parameter ke tiga berisi konfigurasi, yaitu ada pitch, rate dan volume (default semuanya bernilai 1).

Untuk Function stop, pause dan resume sepertinya saya tak perlu menjelaskannya lagi, karena mungkin kamu bisa dengan mudah menebaknya sendiri 🙂

Tambahan (buat auto play)
Pada bagian ini saya akan memberikan contoh bagaimana responsivevoice ini di buat autoplay, jadi pada saat ingin menjalankan ini kita tidak perlu lagi klik play dan lain-lain.

 responsiveVoice.OnVoiceReady = function() {    console.log("speech time?");    responsiveVoice.speak(   "Hey nama saya cahya, kang cahya dot kom merupakan web personal saya, terimakasih telah berkunjung kemari.",   "Indonesian Female",   {    pitch: 1,     rate: 1,     volume: 1   }  ); }; 

Untuk keterangan hampir sama dengan penjelasan souce di atas, cuma disini ada fungsi baru, namanya responsiveVoice.OnVoiceReady, ini berfungsi agar resvonsivevoice berjalan secara otomatis.

Demo

Screenshot%2Bfrom%2B2016 04 15%2B07%253A13%253A04

Untuk tipe suara, berikut adalah tipe suara yang di support oleh resvonsipe voice :

*) silahkan salin salahsatu.

  • UK English Female
  • UK English Male
  • US English Female
  • Arabic Male
  • Armenian Male
  • Australian Female
  • Australian Female
  • Brazilian Portuguese Female
  • Chinese Female
  • Czech Female
  • Danish Female
  • Deutsch Female
  • Dutch Female
  • Finnish Female
  • French Female
  • Greek Female
  • Hatian Creole Female
  • Hindi Female
  • Hungarian Female
  • Indonesian Female
  • Italian Female
  • Japanese Female
  • Korean Female
  • Latin Female
  • Norwegian Female
  • Polish Female
  • Portuguese Female
  • Romanian Male
  • Russian Female
  • Slovak Female
  • Spanish Female
  • Spanish Latin American Female
  • Swedish Female
  • Tamil Male
  • Thai Female
  • Turkish Female
  • Afrikaans Male
  • Albanian Male
  • Bosnian Male
  • Catalan Male
  • Croatian Male
  • Czech Male
  • Danish Male
  • Esperanto Male
  • Finnish Male
  • Greek Male
  • Hungarian Male
  • Icelandic Male
  • Latin Male
  • Latvian Male
  • Macedonian Male
  • Moldavian Male
  • Montenegrin Male
  • Norwegian Male
  • Serbian Male
  • Serbo-Croatian Male
  • Slovak Male
  • Swahili Male
  • Swedish Male
  • Vietnamese Male
  • Welsh Male
  • US English Male
  • Fallback UK Female

Lengkapnya lihat di sini : http://responsivevoice.org/api/

Scroll to Top