JSFiddle - React, Tailwind, and code Playground

by Khương Lâm Ngọc

HTML

<textarea rows=10 cols=20 id=text-speech>Hello guys. I'm Khuong</textarea>
<br>
<button id=btn-speech>Speech</button>

JavaScript

function speak(message) {
  var msg = new SpeechSynthesisUtterance(message)
  var voices = window.speechSynthesis.getVoices()
  msg.voice = voices[0]
  window.speechSynthesis.speak(msg)
}

document.getElementById('btn-speech').addEventListener("click", event => {
  speak(document.getElementById('text-speech').value);
})

document.addEventListener("mouseup", function(event) {
  var text = window.getSelection().toString();

  speak(text)
}, false);