Cara Membuat Aplikasi Text To Speech dengan JavaScript di Blogger

Program ini adalah sebuah text-to-speech yang memungkinkan pengguna untuk memasukkan teks ke dalam kotak teks, memilih kecepatan pengucapan, dan menggunakan tombol untuk memutar, menghentikan, dan menghentikan sementara pengucapan.

Setiap browser, mungkin akan berbeda hasilnya. Saya coba di laptop, bisa langsung jalan, dengan berbagai macam browser. Saya coba buka menggunakan android, perlu minta diizinkan dulu untuk mengaktifkan membaca teks, baru setelah itu bisa dengan lancar. Semoga bisa dimanfaatkan.

Program JavaScript yang memanfaatkan fitur Text-to-Speech (TTS) pada browser untuk membaca teks yang dimasukkan pada kolom teks di dalam elemen HTML <textarea> dengan kecepatan tertentu. Program ini terdiri dari beberapa elemen HTML seperti <textarea>, <label>, dan beberapa elemen tombol seperti "Play", "Pause", dan "Stop" yang dapat digunakan untuk mengontrol pembacaan teks.

Jika browser yang Anda gunakan, tidak mendukung SpeechSynthesis, coba aktifkan lebih dahulu. Biasanya untuk browser yang digunakan di handphone. Atau coba gunakan browser yang lain, misalnya Chrome, atau Firefox, atau Edge. Atau coba jalankan READ IT DISINI, dan ikuti apa yang diminta untuk mengijinkan membaca Text. Semoga berhasil.

🐥

Masukkan kalimat yang akan dibaca : Speed

Cara kerjanya adalah sebagai berikut:

1. Mendapatkan elemen dari halaman HTML dengan menggunakan document.getElementById() dan menyimpannya dalam variabel untuk mengaksesnya lebih mudah nantinya.
2. Menambahkan event listener pada tombol untuk memulai, menghentikan, dan menghentikan sementara pengucapan.
3. Membuat objek SpeechSynthesisUtterance() yang merupakan bagian dari Web Speech API. Objek ini memungkinkan untuk mengatur teks yang akan diucapkan, kecepatan pengucapan, dan beberapa opsi lainnya.
4. Menambahkan event listener pada objek utterance untuk mendapatkan karakter terakhir dari teks yang diucapkan.
5. Membuat beberapa fungsi untuk memulai, menghentikan, dan menghentikan sementara pengucapan. Fungsi-fungsi ini memanipulasi objek speechSynthesis yang merupakan bagian dari Web Speech API dan bertanggung jawab untuk mengontrol pengucapan teks.

Jika ada yang masih belum bisa copas program di halaman ini, silakan tuliskan komentar.
Untuk contoh program membaca text yang ada di halaman blog, silakan buka Text To Speech isi post DISINI.

🐥

Code untuk membuat program ini, adalah sebagai berikut:

HTML :

  
Masukkan kalimat yang akan dibaca :
<textarea id="text"></textarea>
<label>Speed</label>
<input id="speed" max="3" name="speed" type="number" value="1" />
<button id="play-button">Play</button>
<button id="pause-button">Pause</button>
<button id="stop-button">Stop</button>

CSS :

  
<style>
#text{width:99%;height:50vh}
</style>
  

Javascript :

  
<script>
const playButton = document.getElementById('play-button')
const pauseButton = document.getElementById('pause-button')
const stopButton = document.getElementById('stop-button')
const textInput = document.getElementById('text')
const speedInput = document.getElementById('speed')
let currentCharacter

playButton.addEventListener('click', () => {
  playText(textInput.value)
})
pauseButton.addEventListener('click', pauseText)
stopButton.addEventListener('click', stopText)
speedInput.addEventListener('input', () => {
  stopText()
  playText(utterance.text.substring(currentCharacter))
})

const utterance = new SpeechSynthesisUtterance()
utterance.addEventListener('end', () => {
  textInput.disabled = false
})
utterance.addEventListener('boundary', e => {
  currentCharacter = e.charIndex
})

function playText(text) {
  if (speechSynthesis.paused && speechSynthesis.speaking) {
    return speechSynthesis.resume()
  }
  if (speechSynthesis.speaking) return
  utterance.text = text
  utterance.rate = speedInput.value || 1
  textInput.disabled = true
  speechSynthesis.speak(utterance)
}

function pauseText() {
  if (speechSynthesis.speaking) speechSynthesis.pause()
}

function stopText() {
  speechSynthesis.resume()
  speechSynthesis.cancel()
}
</script>  
  

Program di atas adalah program JavaScript yang menggunakan SpeechSynthesis API untuk membaca teks yang dimasukkan oleh pengguna melalui textarea dan mengontrol kecepatan pembacaan suara menggunakan tombol "Play", "Pause", dan "Stop" yang telah didefinisikan.

Ketika pengguna mengetik teks di dalam textarea, teks tersebut disimpan dalam objek SpeechSynthesisUtterance yang kemudian diproses dan dibaca oleh API speech synthesis menggunakan metode speak(). Tombol "Pause" digunakan untuk memberhentikan pembacaan sementara, sementara tombol "Stop" digunakan untuk menghentikan pembacaan dan mengulangi dari awal. Tombol "Play" digunakan untuk memulai pembacaan teks.

Ketika pengguna memilih kecepatan suara melalui input dengan tipe "number", nilai yang dipilih oleh pengguna disimpan ke dalam variabel rate dan digunakan untuk mengatur kecepatan pembacaan menggunakan properti "rate" pada objek utterance.

Program juga menggunakan event listener untuk mendeteksi akhir pembacaan suara dan menampilkan teks di textarea yang kembali diaktifkan, serta event listener "boundary" untuk mengetahui karakter terakhir yang telah dibaca sehingga kecepatan suara dapat disesuaikan saat diganti oleh pengguna.