Membuat speak text to speech dengan Javascript


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.


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.



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/

40/Post a Comment/Comments

  1. pagi kang cahya artikel sangat membantu, saya mau tanya saya mau membuat skrip diatas otomatis jalan sendirinya tanpa menekan tombol play tapi belum berhasil. mohon bantuannya karena saya sudah coba play(); tidak berhasil juga . terimakasih

    ReplyDelete
    Replies
    1. pake ini :
      responsiveVoice.OnVoiceReady = function() {
      ///letakan responsive voice speak disini
      };
      .
      saya udah tambahkan pada artikel di atas,,, bisa di baca ulang

      Delete
  2. gan cara memberi jeda gimana..ngomngnya itu tidak ada jedanya padahal di sourcode sudah di kasih tanda jeda

    ReplyDelete
  3. kang,saya sudah bisa membuatnya,saya mau suara tsb di confert jadi mp3 dam di download bisa ndak kang? terimakasih sebelumnya

    ReplyDelete
  4. kang..jika kita sisip ke wp di suatu halaman, gimana nyisipnya

    ReplyDelete
    Replies
    1. untuk WP ada pluginnya, lihat disini : responsivevoice.com/wordpress-text-to-speech-plugin

      Delete
  5. kenapa ya ketika inputan menggunakan type text bisa ada suaranya tp ketika inputan pakai textarea suara yg ditampilkan tidak ada suaranya, mohon solusinya terimakasih.

    ReplyDelete
    Replies
    1. Coba bisa lihat sintak-nya? Salin ke gist.github.com terus kirim linknya di form komen

      Delete
  6. dihalaman admin input beritanya menggunakan textarea dg menambahkan textarea editor yaitu menggunakan ckeditor resposnive, ketika berhasil tersimpan ke database dan saya tampilkan dengan memanggil php nya di halaman tampilan tidak mengeluarkan suara sedangkan ketika saya panggil php yang menggunakan inputan text suara bisa keluar, kesalahannya dimana, dan untuk contohnya nnti saya akan kirim, terimakasih

    ReplyDelete
    Replies
    1. coba cek di database, biasanya kalau pake text editor semacam "ckeditor" itu suka ada tag html yg ikut kesimpen, itu bisa bikin masalah

      Delete
  7. https://github.com/pengulik/bantuanya-ya-mas

    seperti < p > dalam database kesimpennya gth mohon bantuannya udah saya buat mas

    ReplyDelete
  8. gimana mas apa yang jadi permasalahan dan bagaimana solusinya, maaf saya ingin tau ilmunya dan agar bsa brtambah pengetahuan saya, salam 10 jari ya mas hehehe

    ReplyDelete
  9. Alhamdulillah berhasil sodara perkataan akang ini "coba cek di database, biasanya kalau pake text editor semacam "ckeditor" itu suka ada tag html yg ikut kesimpen, itu bisa bikin masalah"
    saya sudah menemukan solusinya, ternyata bener tag html < p >< / p > yang tersimpan kedalam database yang menjadi permasalahannya, salam 10 jari dari pengulik

    ReplyDelete
  10. bisa terhapus hanya tag html yang < p > < / p> ini saja klo menghapus tag html yang lain gimana caranya kang, ngoceh lg ni saya maaf ya mohon bantuannya terimakasih.

    ReplyDelete
    Replies
    1. Sebelum datanya di simpen, valuenya di filter pake fungsi strip_tag ==> php.net/manual/en/function.strip-tags.php

      Itu masalahnya karena ada tag html aja, soalnya library nya cuma bisa baca text biasa doank

      Delete
  11. mbb kasih saya contoh kang, saya pakai sistem modul dari lokomedia, value yang dimaksud di aksi_simpan.php apa di inputannya,

    ReplyDelete
    Replies
    1. Value itu data POST yang dikirim dari form, misal textarea yang agan buat itu punya name "data_voice", nah untuk nangkep post-nya itu pasti agan bakalan pake $_POST['data_voice'] <== nah ini yang dimaksud value. Jadi di phpnya cukup gini aja strip_tags($_POST['data_voice'])

      Delete
  12. itu strip_tags berfungsi untuk semua tag html kan, intinya tdk satu pun tag html ikut tersimpan tdk. mksh kang

    ReplyDelete
    Replies
    1. Iya untuk semua tag html.

      Tapi saran saya biar ga ribet, kalau emng ga butuh tag html mening pake textarea biasa aja, biar pas valuenya di simpen cuma text doank isinya. Jadi ga perlu pake strip_tags.

      Delete
  13. kalau gk pake textarea editor nanti tidak bisa memasukan gambar yang diambil dari foto google dalam pembuatan artikel, strip_tags gk berhasil menghapus semua tag html kang, udah saya coba tp masih gagal. bisa kasih contoh rinciannya gk kang.

    ReplyDelete
    Replies
    1. mening dibuat 2 field aja, yg 1 buat conten artikel, yg satu buat suara, yg buat suara pake strip_tags

      Delete
  14. sempat terpikirkan sama saya mas, ini masukan jenius juga tp nnti saya pikirkan baik2 yaaaa

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. klo pakai strip_tags ternyata mematikan link gambar ya mas dan sangat tidak bagus untuk website portal berita, jika tanpa gambar, makasih untuk bantuannya. siapa tau nnti kita bsa bekerjasama

    ReplyDelete
    Replies
    1. Ya memang, strip_tags menghapus semua tag html.
      Ada solusi lain sebenernya selain dibikin 2 field.

      Pada saat conten artikel di tampilkeun itu ga usah pake strip_tags, cuma pas mau di binding ke voice baru data kontennya di filter pake strip_tags

      Delete
  17. terima kasih postingannya Gan
    sy sdh coba mengaplikasikan script anda dan sudah berhasil. Cuma masalahnya masih sering hasil audionya itu di eja. Mohon dibantu solusinya Gan ?

    ReplyDelete
  18. saya kan mencoba untuk memanggil nama2 orang, sebagian besar lancar, tetapi untuk nama-nama tertentu itu di eja, terutama utk nama-nama yg ada huruf matinya, seperti : Akhmad, Shinta, dll. Barang kali ada solusinya.. tanpa mengubah tulisan nama orangnya

    ReplyDelete
    Replies
    1. owh gitu, mungkin sepertinya lib-nya masih belum mendukung untuk membaca kombinasi huruf konsonan seperti itu.

      Sederhananya agan mungki harus ngakalin dari segi datanya, seperti membuat dua buah field dengan nama "display_name" dan "read_name", pada display name agan input data nama secara normal, lalu di bagian read name agan masukan penulisan nama yang akan di baca, misal pada display name agan input Akhmad, lalu pada read namenya agan input ahmad.

      Nanti untuk field display name agan sematkan di tampilan aplikasi, lalu untuk read namenya agan sematkan pada library untuk dibaca nantinya.

      Semoga membantu :)

      Delete
  19. gan,, biar suaranya bisa kedengeran saat web nya di buka pakai android, gimana ya gan..?
    tks atas solusinya :)

    ReplyDelete
  20. Permisi gan. Kalau mau make input teks gitu gimana ya gan? Maaf newbie nih

    ReplyDelete
    Replies
    1. Caranya tinggal buat inputan biasa, lalu text yang nanti di input di ambil valuenya dengan menggunakan ID di javascript. Kemudian value yang tadi di ambil tinggal masukan saja ke sintak responsive voice.

      #INPUT TEXT
      [textarea id="text-speech"][/textarea]

      #JS-nya
      var txtNya = document.getDocumentById("text-speech").value;
      function play (){
      responsiveVoice.speak(
      txtNya,
      "Indonesian Female",
      {
      pitch: 1,
      rate: 1,
      volume: 1
      }
      );
      }

      Delete
    2. masih eror nih gan huhuhu ada gmail atau Line ga gan ?

      Delete
  21. kang, saya mau nanya. saya pernah coba masukkan satu kalimat panjang pada text area. saat dibunyikan, tiba tiba suaranya berhenti sejenak seperti ada jeda padahal tidak ada tanda koma atau tanda yang buat suaranya berhenti sejenak. seharusnya kalimat itu dibaca secara utuh satu kesatuan, tapi suaranya malah tiba tiba berhenti sedetik setelah itu lanjut lagi. jadi masalahnya dimana ya kang. mohon bantuannya.

    ReplyDelete
  22. assalamualaikum kang, mohon petunjuk dong bgmn menerapkan tts ini pada server xampp secara offline, makasih kang info nya

    ReplyDelete
  23. Pak cahya kalo membuat supaya bisa secara offline begimana yak? Ane belajaran pake offline pak hihihi

    ReplyDelete
  24. master untuk menampilkan suaranya kita ambil dari inputan database gimana ya penempatanya saya coba tidak terbaca

    ReplyDelete
  25. kalau utk yang autoplay ko ga jalan ya?

    ReplyDelete

Post a Comment

Previous Post Next Post