Menambahkan Text to Speech / read it / baca posting

Cara Menambahkan Text to Speech / read it / baca posting seperti contoh di halaman ini. Anda bisa langsung pasang kode berikut ini di dalam postingan atau di widget.
Silakan mencoba. Jika masih ada kesulitan, silakan via kolom komentar.
Code untuk membuat program Text to Speech / read it / baca posting, adalah sebagai berikut:
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>

Anda bisa menambahkan css berikut ini jika diperlukan

CSS :

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

Dan inilah javascript yang menjalankan program ini.

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>