Senang bertemu dengan kalian anbies, sekarang anbi bakal membahas tentang program text-to-speech (TTS), yaitu program untuk mengubah sebuah teks atau tulisan menjadi sebuah ucapan suara secara otomatis.

Nah, disini anbi bakal membuat program text-to-speech menggunakan bahasa sejuta umat, yaitu JavaScript. Bagaimana caranya? yuk simak disini.


Web Speech API

Didalam javascript terdapat sebuah API yang digunakan untuk memanipulasi sebuah suara atau perkataan menjadi sebuah text atau sebaliknya, yaitu Web Speech API.

Dalam artikel ini kita akan mencoba mengkonversi teks menjadi sebuah suara dengan salah satu API tersebut.

Web Speech API itu library bawaan, jadi tidak usah repot - repot install, dan tidak semua browser support API ini, disini list browser yang compatible

Nah, yang mari kita mulai dengan 3 baris kode sederhana :

let msg = new SpeechSynthesisUtterance();
msg.text = "Hello, Anbies Here!";
window.speechSynthesis.speak(msg);

Dalam kode diatas, akan menghasilkan suara seperti ini.

Mari kita bahas satu persatu baris kode tersebut.

  1. Menginisialisasi object SpeechSynthesisUtterance pada variabel msg. Modul SpeechSynthesisUtterance ini digunakan untuk mewakili yang text akan dikonversi menjadi suara.

  2. Lalu attribute msg.text kita isi nilai nya dengan teks yang ingin kita konversi ke suara.

  3. window.speechSynthesis.speak() nah fungsi inilah yang nantinya mengkonversi nilai.

Kode dasar text-to-speech menggunakan javascript seperti itu. Gimana, mudah banget kan?

Note : Text-To-Speech bukan berarti Speech-To-Text yaa, itu beda lagi, bakal anbi bahas di artikel berikutnya.


Modifikasi Suara

Selanjutnya mari kita manipulasi suara yang dikeluarkan dari API tersebut. Apa yang bisa kita manipulasi? Kita dapat memanipulasi pitch, volume serta kecepatan bacanya.

Berikut adalah contoh kode penerapannya :

let msg = new SpeechSynthesisUtterance();
msg.volume = 1;   // 0.1 sampai 1
msg.rate = 3;     // 0.1 sampai 10
msg.pitch = 2;    // 0 sampai 2
msg.text = "This Website Called AnbiDev!";

window.speechSynthesis.speak(msg);

Kira - kira hasilnya akan seperti ini :

Dikarenakan kode diatas, suara yang dihasilkan akan sedikit lebih melengking dan sedikit lebih cepat dari biasanya. Kalian dapat memodifikasi sesuai keinginan kalian.


Ganti Suara Narator

Kita tidak ingin suara ucapan seorang wanita, kita ingin yang bersuara laki - laki. Untuk mengubah suara yang dihasilkan, pertama kita harus mengecek terlebih dahulu voice library yang tersedia di OS kita.

Caranya seperti berikut :

speechSynthesis.getVoices().forEach(function(voice) {
  console.log(voice.name, voice.default ? voice.default :'');
});

Hasil output list voice library :

Microsoft David Desktop - English (United States) <empty string>
Microsoft Zira Desktop - English (United States) <empty string>

Standarnya, setiap OS (Windows atau MacOS) memiliki paling tidak 2 voice library bawaan di setiap sistemnya, yaitu suara laki - laki dan perempuan.

Karena di voice library anbi cuman ada yang default, maka kita coba ganti ke suara laki - laki. Caranya seperti ini :

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();

// 1 - Cewek     0 - Cowok 
msg.voice = voices[0]; 
msg.text = "Hei! This Is Anbies Male Version!";
speechSynthesis.speak(msg);

Dan boom! hasilnya suara nya bakal jadi laki - laki :

Penjelasan :

  1. speechSynthesis.getVoices() digunakan untuk mengambil daftar list voice library apa saja di OS kita.
  2. msg.voice adalah attribute yang digunakan untuk mengganti aksen saat berucap, dan diisi dengan library voices tadi.
  3. voices[0] kenapa pilih index ke-0? karena berdasarkan list voice library tadi, Microsoft David Desktop berada diurutan pertama, atau index ke 0.

Jika ingin ucapan dengan aksen yang lain, misal aksen indonesia atau jepang, kita bisa menginstall voice library secara mandiri. Untuk yang windows, cara installnya bisa dilihat disini

&ldquo;Cara Install Voice Library Tambahan&rdquo;
Cara Install Voice Library Tambahan

Nah kalau sudah kita bisa mengganti suara yang dihasilkan sesuai voice library yang kita inginkan. Caranya sama pertama liat list voice library nya dulu, lalu pilih berdasarkan index nya.


Intermezo

Bagi kalian yang ingin melihat program text-to-speech menggunakan Javascript yang sudah jadi, bisa langsung kalian coba di link berikut ini :

Test Speech Synthesiser

Lalu untuk source code nya bisa kalian lihat disini :

🐙 https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis

Oke sekian.