Tutorial Speech Syntesizer menggunakan JavaScript dan HTML DOM

Tutorial Speech Syntesizer menggunakan JavaScript dan HTML DOM

Assalamuálaikum kawan-kawan. Sekali-kali saya ingin sharing pengetahuan pemrograman website dengan Javascript. Temen-temen bisa coba sendiri dengan menggunakan server localhost (menggunakan aplikasi WAMPserver atau sejenisnya).

Apa itu Speech Syntesizer?
Speech syntesizer adalah fitur windows untuk memutar suara dari tulisan/teks tanpa terdapat file audio dari teks tersebut. Audio/Suara dari teks dihasilkan saat speech synthesizer diaktifkan/dipanggil fungsinya. Penggunaan pada website akan menjadi lebih menarik, karena web akan bisa 'membacakan sendiri' isi teksnya dan kita tinggal mendengarkannya.

Bagaimana cara kerjanya?
Pertama tentu harus ada teks yang akan dibaca. Dan yang kedua harus ada sambungan internet. Dengan Javascript, teks akan di-split menjadi beberapa bagian dengan memperhatikan tanda titik dan koma atau titik dua. Kemudian suara akan dihasilkan hingga seluruh bagian teks selesai dibaca.

Bagaimana cara memakai speech synthesizer?
Pada contoh video tersebut saya memakai tombol play untuk memanggil fungsi pembacaan teks.Tombol tersebut memiliki atribut onclick="baca(this.id,'isi','id')
Fungsi 'baca' merupakan nama fungsi yang isinya memanggil speech synthesizer untuk mulai membaca (memutar audio) teks yang terdapat di bagian 'ísi'.

LANGKAH PERTAMA:
Pertama inisiasi dulu fitur speech synthesizer saat halaman web dibuka. Tempatkan kode ini di atas/sebelum body web, misal di bagian header web.
Script-nya seperti ini

<script>
//paste kode ini di bagian header website anda
$( window ).load(function() {
var msg = new SpeechSynthesisUtterance();
});
</script>
<script language="JavaScript">
//close all speech synthesizer saat laman web ditutup
window.onbeforeunload = confirmExit;
function confirmExit()
{ speechSynthesis.cancel(); }
</script>

LANGKAH KEDUA:
Paste kode berikut di bawah kode di atas.

<script>
function makemultipart(text) {
//fungsi ini untuk men-split teks jadi beberapa bagian
var CHARACTER_LIMIT = 200;
var text = text;
var multipartText = [];
if (text.length > CHARACTER_LIMIT) {
var tmptxt = text;
while (tmptxt.length > CHARACTER_LIMIT) {
//Split dengan tanda baca umum
var p = tmptxt.search(/[:!?.;]+/);
var part = '';
//Jika gagal split, pakai tanda koma
if (p == -1 || p >= CHARACTER_LIMIT) {
p = tmptxt.search(/[,]+/);
}
//Jika gagal split, coba pakai tanda spasi
if (p == -1 || p >= CHARACTER_LIMIT) {
var words = tmptxt.split(' ');
for (var i = 0; i < words.length; i++) {
if (part.length + words[i].length + 1 > CHARACTER_LIMIT)
break;
part += (i != 0 ? ' ' : '') + words[i];
}
} else {
part = tmptxt.substr(0, p + 1);
}
tmptxt = tmptxt.substr(part.length, tmptxt.length - part.length);
multipartText.push(part);
//console.log(part.length + " - " + part);
}
//Add the remaining text
if (tmptxt.length > 0) {
multipartText.push(tmptxt);
}
} else {
//Small text
multipartText.push(text);
}
return multipartText;
}
</script>

<script type="text/javascript">
function baca(tombol,TargetTextID,lang){
//fungsi ini untuk memutar audio teks yang sudah ter-split.

var elmnt = document.getElementById("isi");
elmnt.scrollIntoView();
if (document.getElementById(tombol).src.slice(-8) == "stop.png") {

document.getElementById(tombol).src = "images//play.png";
document.getElementById(tombol).title = "Dengarkan suara teks terjemah hadits.";
document.getElementById(TargetTextID).innerHTML = document.getElementById("originalText").innerHTML;
speechSynthesis.cancel();
return;
}else{
// console.log(document.getElementById(tombol).src);
var backupText = document.getElementById(TargetTextID).innerHTML; //backup original text
//console.log(backupText);
document.getElementById("originalText").innerHTML = backupText;
}

//Play multipart text

document.getElementById(tombol).src = "images//stop.png" ;
document.getElementById(tombol).title = "Berhenti memutar suara teks terjemah hadits." ;
var narasi = document.getElementById(TargetTextID).innerText.toLowerCase();
txttosay = makemultipart(narasi);
txttosay = txttosay;
//window.speechSynthesis.cancel();
var i = 0;
for (i = 0; i < txttosay.length; i++) {
var msg = new SpeechSynthesisUtterance();
//msg.voice = profile.systemvoice;
//msg.voiceURI = profile.systemvoice.voiceURI;
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10 speed of speech
msg.pitch = 1; //0 to 2*/
msg.text = txttosay[i];
msg.speak = txttosay;
msg.lang = lang;
msg.onend = self.OnFinishedPlaying;
msg.onerror = function (e) {alert('Browser ini tidak mendukung fitur Text To Speech. Gunakan browser Google Chrome.');break;};
msg.onstart = function (e) {hlight("isi",e.currentTarget.text); document.getElementById(tombol).src = "images//stop.png";document.getElementById(tombol).title = "Berhenti memutar suara teks terjemah hadits." ;};
if ((i+1) == txttosay.length){
msg.addEventListener('end', function () {console.log('end of last utterance!');
//tambahkan baris perintah lain di sini ketika teks selesai dibaca
document.getElementById(tombol).src = "images//play.png";
document.getElementById(tombol).title = "Dengarkan suara teks terjemah hadits." ;
document.getElementById(TargetTextID).innerHTML = document.getElementById("originalText").innerHTML;
});
}
// msg.addEventListener('start', function (e) {hlight("isi",e.currentTarget.text);});
window.speechSynthesis.speak(msg);
// console.log(window.speechSynthesis.pending);
}
}
</script>

<script>

function hlight(TargetDivId,TeksToHL) {
//fungsi untuk meng-highlight teks yang sedang dibaca
var curenttxt = TeksToHL;
var new_text = document.getElementById(TargetDivId).innerText.toLowerCase();
new_text = new_text.replace (curenttxt, "<span style='background-color:yellow;'>" + curenttxt + "</span>");
document.getElementById(TargetDivId).innerHTML=new_text;
}
</script>

LANGKAH KETIGA:
Tempatkan elemen web berikut untuk menjalankan fungsi syntesyzer berupa tombol play, elemen isi teks yang akan dibaca, dan elemen tersembunyi untuk membackup format teks asli. Saya memakai tag <IMG> yang dipakai untuk tombol play. Tombol tersebut menggunakan gambar 'play.png' yang gambarnya dapat diganti sesuai selera anda. Image resources yang digunakan di script tersebut hanya gambar 'play.png' dan gambar 'stop.png' yang diletakkan di folder 'images' di bagian root website anda.
Paste kode berikut di halaman web anda.

<div style="display:none;" id="originalText"><a></a></div>
<a id="isi">Bagian ini berisi teks yang akan diputar suaranya</a>
<img src="images//play.png" id="btnPlay" class="btnPlay" title="Dengarkan suara teks terjemah hadits." onclick="baca(this.id,'isi','id')" style="float:left;margin-top: -10px; margin-left: -10px;height:48px;width:48px;">

LANGKAH TERAKHIR:
Uji coba halaman web anda di browser yang mendukung javascript. saya sarankan browser Chrome. Jika suara yang keluar masih bahasa inggris, ubah bahasa di Control Panel bagian Regional Setting, lokasi pilih Indonesia.
Atau untuk windows10 dari control panel dicari setting text-to-speech. Konfirgurasi bahasanya diubah ke Indonesia.

Anda dapat menggunakan skrip ini untuk 'mendengarkan suara' dari teks berita atau tulisan lain yang sangat panjang, namun mata tidak kuat membacanya.
Anda dapat mengembangkan sendiri kode ini agar website otomatis 'memutar audio' saat halaman selesai di-load. Atau otomatis membuka halaman berikutnya ketika pembacaan teks selesai. Pada contoh web di video tersebut digunakan untuk otomatis membuka dan membaca hadits berikutnya jika audio isi hadits selesai diputar.

Selamat mencoba, semoga berhasil dan semoga tutorial ini bermanfaat terutama bagi yang suka coding.