Menambah tombol bacakan di blog

Iseng-iseng menambah fitur tombol bacakan yang langsung meminta text to speech Google untuk merayapi teks yang kita tentukan. Kemudian membacakannya dengan bahasa Indonesia, atau lainnya.

Lihat gambar di atas, ada sebuah tombol bacakan di bawah judul. Dalam artikel ini, aku hendak memberi panduan sederhana. Barangkali kau butuh. Kalau tidak, ya sudah.

Sebenarnya, fitur yang kita sebut bacakan atau mode baca sudah ada secara default di browser. Namun, tidak semua orang tahu dan mau menggunakannya.

1. Fitur bacakan di desktop Chrome disebut mode baca.
   • Klik titik tiga di pojok kanan atas > Fitur lainnya > Mode baca
   • Setelah mode baca aktif, jangan lupa pin di toolbar agar saat mau membaca artikel tidak melulu mengakses fitur tersebut manual
2. Fitur bacakan di mobile Chrome harus didahului dengan menandai teks. Itu ribet.

Dan artikel ini sekadar berusaha mempersingkat penggunaan fitur tersebut, baik di desktop maupun mobile.

Dalam artikel ini, aku tak pakai CSS. Kau bisa menambah CSS biar tampilan tombolnya sesuai dengan identitas blogmu.

1. Membuat tombol

<button id="tts-btn">🔊 Bacakan</button>

Pasang kode HTML di atas di mana saja dalam template single-post. Kalau aku, kupasang di bawah judul. Bebaslah kau mau pasang di mana. Kau buat sticky atau mengambang juga bebas.

---

2. Menambah fungsi

Bagian yang paling penting agar saat tombol diklik, langsung membacakan adalah fungsi berikut.

<script>
document.addEventListener('click', function(e) {
  if (e.target && e.target.id === 'tts-btn') {
    toggleBacakan();
  }
});

window._ttsVoices = [];
function loadVoices() {
  const v = speechSynthesis.getVoices();
  if (v.length) window._ttsVoices = v;
}
loadVoices();
speechSynthesis.onvoiceschanged = loadVoices;

function toggleBacakan() {
  const btn = document.getElementById('tts-btn');

  if (speechSynthesis.speaking || speechSynthesis.paused) {
    speechSynthesis.cancel();
    btn.textContent = '🔊 Bacakan';
    return;
  }

  const judul = document.querySelector('.title-post')?.innerText || '';
  const isi   = document.querySelector('.post-body')?.innerText  || '';
  const text  = (judul + '. ' + isi).trim();

  function splitChunks(str, maxLen = 500) {
    const sentences = str.match(/[^.!?]+[.!?]*/g) || [str];
    const chunks = [];
    let current = '';
    for (const s of sentences) {
      if ((current + s).length > maxLen) {
        if (current) chunks.push(current.trim());
        current = s;
      } else {
        current += s;
      }
    }
    if (current) chunks.push(current.trim());
    return chunks;
  }

  const voices = window._ttsVoices.length
    ? window._ttsVoices
    : speechSynthesis.getVoices();

  const idVoice =
    voices.find(v => v.lang === 'id-ID' && !v.localService) ||
    voices.find(v => v.lang === 'id-ID');

  const chunks = splitChunks(text);
  let index = 0;

  speechSynthesis.cancel();

  function speakNext() {
    if (index >= chunks.length) {
      btn.textContent = '🔊 Bacakan';
      return;
    }
    const utter = new SpeechSynthesisUtterance(chunks[index++]);
    utter.lang = 'id-ID';
    utter.rate = 1.4;
    if (idVoice) utter.voice = idVoice;
    utter.onend   = speakNext;
    utter.onerror = () => btn.textContent = '🔊 Bacakan';
    speechSynthesis.speak(utter);
  }

  speakNext();
  btn.textContent = '⏹ Hentikan';
}
</script>

Fungsi tersebut kubungkus script karena kupasang inline dengan button. Kau bisa pasang di template single post masing-masing, atau tempat yang berlaku secara global.

---

3. Beberapa catatan

Ini agak penting juga. Soalnya website/blog itu seperti dirimu sendiri. Kau wajib mengetahui apa yang menyusunnya.

1. CMS

Fitur ini hanya kuuji di CMS HTMLy, belum di WordPress maupun Blogger. Tetapi harusnya cara kerjanya sama. Fungsi/script harus berjalan di template single post.

2. Yang dibaca

Aku menggunakan selektor .title-post dan .post-body di dalam main, sehingga mengabaikan tanggal, breadcrumb, dan unsur single post yang lainnya. Artinya, kau perlu menyesuaikan dengan blogmu sendiri.

Itulah mengapa aku bilang website/blog itu seperti dirimu sendiri. Kau wajib mengetahui apa yang menyusunnya.

3. Bahasa dan kecepatan

Ini cukup ajaib, kalau mau mengubah bahasa dan kecepatan tinggal ganti variabel di sini.

utter.lang = 'id-ID';
utter.rate = 1.4;

4. Memaksa browser mencari bahasa Indonesia

Fokus script ini sebenarnya bahasa Indonesia, jadi kalau browser secara default masih pakai bahasa Inggris, perlu menunggu dulu dia mencari yang Indonesia.

5. Kestabilan yang tidak pasti

Penting! Aku tidak menjamin fitur ini akan berjalan secara stabil. Bahkan saat kuterapkan di blog ini, beberapa kejadian membuatnya harus reload dulu agar terbaca. Atau, bahkan tetap menggunakan bahasa Inggris meski sudah kusuruh mencari bahasa Indonesia.

Aku tidak menggunakan texs to speech pihak ketiga menggunakan API karena nanti kelihatan wkwkwk

Akhir kata, akan kuupdate jika mendapat kode yang lebih stabil dari yang di atas.

Ya, sebenarnya untuk membuat fitur semacam ini dengan bantuan AI akan lebih mudah. Tentu saja, kau bisa tanya-tanya AI supaya fiturnya berjalan optimal dan stabil di jenis CMS yang kau pakai. Atau, bisa juga meninggalkan komentar untuk kita diskusi.

16 Juni 2026 Blog website blog Blogger blogging Rum