Cara Membuat Text To Speech di Blogger

CONTOH TEKS UNTUK DIBACA

Klik tombol speaker dibawah ini, untuk mulai membaca. Silakan di coba.
Untuk membaca text yang anda masukkan, silakan buka Text To Speech DISINI.
(Bagi yang tidak bisa copas kode yang ada di halaman ini, untuk diterapkan di blog kamu, silakan tanya via komentar)

CONTOH TEKS UNTUK DIBACA
⯿

4. *Islam menghendaki ketaqwaan secara individu dan kolektif*

     - Takwa pun harus terwujud secara kolektif di masyarakat dan kehidupan bernegara

     - *[TQS alA’raf [7]: 96]* "Andai penduduk negeri-negeri itu beriman dan bertakwa,...

     - Agar negeri ini berlimpah keberkahan, tak cukup mengandalkan ketakwaan secara personal

     - Harus ada ketaqwaan yang bersifat kolektif (berjama'ah)

     - Dalam bentuk ketaqwaan masyarakat dan negara, yakni dengan penerapan syari'ah Islam secara kaffah

     - Ramadhan melatih, menempa dan membentuk pribadi yang bertaqwa, masyarakat yang bertaqwa dan negara yang bertaqwa

...

🔊

Untuk membuat program diatas, menggunakan code berikut ini:
Dimulai dengan membuat button seperti berikut ini

HTML :

  
<button id="play" title="play : baca tulisan di halaman ini"> 🔊 </button>
<button id="pause" title="pause / jeda"> ⏸ </button>
<button id="resume" title="resume / lanjut"> ▶️ </button>
<span id="data"></span>

CSS :

  
<style>
button{
  font-size:200%;
  border:none;
  background:none;
  cursor:pointer
}
</style>
  

Javascript :

  
<script>
  const play = document.getElementById("play");
  const pause = document.getElementById("pause");
  const resume = document.getElementById("resume");

  play.addEventListener("click", function() {
let content = document.getElementsByClassName("post-title")[0].innerText + " " + document.getElementsByClassName("post-body")[0].innerText;
document.getElementById("data").innerText = "play";
var utterance = new SpeechSynthesisUtterance(content);

utterance.lang = "id-ID";
speechSynthesis.cancel();
speechSynthesis.speak(utterance);
  });

  pause.addEventListener("click", function() {
document.getElementById("data").innerText = "pause";
speechSynthesis.pause();
  });
  
  resume.addEventListener("click", function() {
document.getElementById("data").innerText = "resume";
speechSynthesis.resume();
  });
</script>