Akses https://blogchem.com/teks2suara/suara2teks.html
Seseorang terkadang memerlukan menyusun tulisan tanpa harus mengetikkan karena berbagai alasan, salah satu caranya adalah menggunakan piranti untuk merekam lalu mengubahnya menjadi tulisan.
Kode program di bawah ini menjadi contoh sederhana untuk mengubah suara menjadi teks. Silahkan dicoba.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Speech Recognition</title>
</head>
<body>
<h1>Speech Recognition</h1>
<p>Klik tombol <strong>Mulai</strong> untuk mulai berbicara/mendengarkan. Klik tombol <strong>Berhenti</strong> untuk berhenti bicara atau mendengarkan.</p>
<label for=”language-select”>Pilih bahasa:</label>
<select id=”language-select”>
<option value=”id-ID”>Indonesia</option>
<option value=”en-US”>Inggris</option>
<option value=”ar-SA”>Arab</option>
</select>
<button onclick=”startRecognition()”>Mulai</button>
<button onclick=”stopRecognition()”>Berhenti</button>
<a href=”https://blogchem.com/teks2suara/index.html” target=”_blank”><button><span style=”color:red;”>Teks Menjadi Suara</span></button></a>
<br/><hr/>
<div id=”hasil”></div><script>
let recognition;
function startRecognition() {
// dapatkan pilihan bahasa dari elemen select
const selectedLanguage = document.getElementById(“language-select”).value;// cek dukungan browser terhadap SpeechRecognition API
if (‘webkitSpeechRecognition’ in window) {
// buat instance objek SpeechRecognition
recognition = new webkitSpeechRecognition();// set bahasa yang diinginkan sesuai pilihan pengguna
recognition.lang = selectedLanguage;// set waktu berhenti mendengarkan setelah pengguna selesai berbicara
recognition.interimResults = true;
recognition.continuous = true;// mulai mendengarkan
recognition.start();// ketika terjadi event hasil suara terdeteksi
recognition.onresult = function(event) {
let hasil = event.results[event.results.length – 1][0].transcript;
document.getElementById(“hasil”).innerHTML = hasil;
}
} else {
alert(“SpeechRecognition tidak didukung oleh browser ini”);
}
}function stopRecognition() {
if (recognition) {
recognition.stop();
}
}
</script>
</body>
</html>
Penjelasan Kode Program:
Kode program di atas adalah contoh implementasi penggunaan SpeechRecognition API pada halaman web menggunakan bahasa pemrograman JavaScript dan HTML.
Halaman web ini memungkinkan pengguna untuk memilih bahasa yang ingin digunakan untuk deteksi suara dan mulai berbicara/mendengarkan suara. Pengguna juga dapat menghentikan pendeteksian suara dengan menekan tombol “Berhenti”.
Berikut ini adalah penjelasan untuk setiap bagian kode program tersebut:
- Deklarasi variabel
recognitiondi luar fungsistartRecognition().javascriptlet recognition;
Variabel ini digunakan untuk menyimpan instance objek
SpeechRecognition. - Fungsi
startRecognition()di bawah tag script.javascriptfunction startRecognition() {
// dapatkan pilihan bahasa dari elemen select
const selectedLanguage = document.getElementById("language-select").value;
if (‘webkitSpeechRecognition’ in window) {
// buat instance objek SpeechRecognition
recognition = new webkitSpeechRecognition();
recognition.lang = selectedLanguage;
recognition.interimResults = true;
recognition.continuous = true;
recognition.start();
recognition.onresult = function(event) {
let hasil = event.results[event.results.length – 1][0].transcript;
document.getElementById(“hasil”).innerHTML = hasil;
}
} else {
alert(“SpeechRecognition tidak didukung oleh browser ini”);
}
}Fungsi ini akan dipanggil ketika pengguna menekan tombol “Mulai”. Pada bagian ini, dilakukan pengecekan apakah browser yang digunakan mendukung
SpeechRecognition API. Jika mendukung, maka instance objekSpeechRecognitiondibuat, dan bahasa yang diinginkan oleh pengguna diset pada objek tersebut.Kemudian, objek
SpeechRecognitionjuga diatur untuk menghasilkan hasil suara secara interim (real-time) dengan parameterinterimResults = true. Pengaturan ini berguna ketika pengguna masih berbicara dan belum selesai, sehingga hasil suara akan ditampilkan secara real-time.Selain itu, objek
SpeechRecognitionjuga diatur untuk mendeteksi suara secara terus menerus dengan parametercontinuous = true. Dengan pengaturan ini, deteksi suara akan terus berjalan sampai pengguna menekan tombol “Berhenti”.Setelah itu, fungsi
start()dipanggil pada objekSpeechRecognitionuntuk memulai pendeteksian suara. Ketika hasil suara terdeteksi, fungsionresultakan dipanggil untuk menampilkan hasil suara pada elemen dengan ID “hasil”. - Fungsi
stopRecognition()di bawah tag script.scssfunction stopRecognition() {
if (recognition) {
recognition.stop();
}
}
Fungsi ini akan dipanggil ketika pengguna menekan tombol “Berhenti”. Fungsi ini akan memeriksa apakah instance objek
SpeechRecognitionsudah terdefinisi.
Selanjutnya, setelah instance objek recognition berhasil dibuat pada fungsi startRecognition(), pada bagian pengaturan recognition.interimResults = true; diatur agar pengenalan suara dapat berlangsung terus menerus selama pengguna berbicara dan hasil pengenalan suara yang sedang dikerjakan akan disajikan pada bagian interimResults.
Selain itu, untuk dapat terus mendengarkan suara pengguna setelah pengguna selesai berbicara, recognition.continuous diatur menjadi true. Ini memungkinkan pengguna untuk mengucapkan kalimat lebih panjang tanpa perlu memulai proses pengenalan suara baru setiap kali mereka berbicara.
Ketika terjadi event hasil suara terdeteksi, recognition.onresult akan dijalankan, di mana variabel hasil akan diisi dengan hasil pengenalan suara terakhir yang tersedia. Kemudian, hasil pengenalan suara tersebut akan ditampilkan pada elemen HTML dengan ID hasil.
Untuk memberhentikan pendeteksian suara, kita dapat menggunakan fungsi stopRecognition() dengan memanggil method stop() pada instance objek recognition yang sebelumnya sudah dibuat. Fungsi stopRecognition() akan dijalankan saat tombol Berhenti diklik.