Bikin websitemu bisa berbicara dengan TTS tools


Bismillahirrohmaanirrohiim.. Sobat semua, kali ini saya akan berbagi trik agar websitemu bisa “berbicara” dengan memanfaatkan tools Text-to-Speech (TTS) bernama Responsive Voice. Responsive Voice ini merupakan salah satu dari sekian TTS tools berbasis Javascript yang bisa anda gunakan secara gratis untuk menghasilkan suara dari teks. Tersedia banyak jenis bahasa yang bisa dipilih, termasuk bahasa Indonesia sehingga website bisa menyapamu dengan bahasa Indonesia tentunya.

Penerapan TTS menggunakan Responvive Voice untuk pertama kalinya telah saya terapkan di website akn-pelalawan.com (website sudah mati), dimana TTS tools ini bertugas membacakan isi berita yang ada disana hanya dengan sekali klik saja oleh pengunjung website. Keuntungannya tentu saja pengunjung website masih dapat browsing ria pada website lain sementara masih tetap bisa mendengarkan isi beritanya. Ok, langsung saja kita praktekkan ya.

Buat satu buah file, boleh *.php ataupun *.html asalkan komputer teman-teman konek ke internet. Saya contohkan nama filenya adalah tts.html dan isinya adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>TTS dengan Responsive Voice JS</title>
</head>
<body>
<button type="button" onclick="responsiveVoice.speak('Welcome');">
Play
</button>
</body>
</html>
<script type="text/javascript" src="https://code.responsivevoice.org/responsivevoice.js"></script>

Silakan disimpan kemudian buka menggunakan web browser, dan hasilnya tampak seperti ini.

Text-to-Speech

Skrip diatas masih sangat sederhana ya, hanya sebatas mengucapkan kata “Welcome” dengan aksen bahasa inggris tentunya. Aksen defaultnya adalah “UK English Female”. Nah kita modifikasi program diatas agar menjadi lebih menarik. Kita tambahkan jQuery ya.

Buka kembali file tts.html tersebut kemudian lakukan modifikasi sehingga menjadi seperti ini.

<!DOCTYPE html>
<html>
<head>
<title>TTS dengan Responsive Voice JS</title>
</head>
<body>

Selamat datang para pengunjung setia website <a href="https://kangriyanto.wordpress.com">www.kangriyanto.wordpress.com</a>, disini saya sedang mencoba sebuah tools bernama Responsive Voice agar website bisa berbicara.

<button type="button" id="mulai">Play</button>
</body>
</html>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://code.responsivevoice.org/responsivevoice.js"></script>
<script type="text/javascript">
$('document').ready(function(){
var teks = $('#teks').text();

$('#mulai').click(function(){
responsiveVoice.speak(teks, 'Indonesian Female');
});
});
</script>

Simpan kembali file tersebut kemudian lakukan refresh pada web browser, kemudian klik tombol play. Hasilnya lumayan lah walaupun si ‘asisten’ tidak mengerti tanda titik [.] untuk url dibaca ‘dot’.

snapshot7 tts

Dan hasil koreksi saya lainnya (yang pernah saya temui) yaitu untuk teks yang terdiri dari ejaan bahasa Indonesia dan asing, yaitu ketika membaca ejaan asing tetap mengejanya dalam bahasa Indonesia dan beberapa singkatan yang terdengar ‘aneh’ seperti tulisan ‘HIV/AIDS’ dibaca ‘H.I.V/A.I.D.S’. Silakan berkreasi dan selamat coding.

Advertisements

2 thoughts on “Bikin websitemu bisa berbicara dengan TTS tools

  1. Andi novian

    Kang saya mau nanya, apakah bisa kita terapkan dengan kondisi offline? Misal saya terapkan pada xampp namun saya tidak terkoneksi dengan internet. Makasih

    Like

    Reply
    1. Mas Riyanto Post author

      Maaf baru bisa saya balas, karena jarang membuka blog.
      Jawabannya “BISA”, dan mungkin juga sudah mas coba sendiri, hehe
      Tinggal file javascript nya di download dan diletakkan di dalam folder yang sama di dalam htdocs nya.

      Like

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.