JSFiddle - React, Tailwind, and code Playground

HTML

<button style="color:red;font-size:22px;" id="btn">
  Say Hello World!
</button>

CSS

.co {
  color: red;
  font-size: 22px;
}

JavaScript

const synth = window.speechSynthesis;
let voices;

synth.onvoiceschanged = function() {
  voices = synth.getVoices();
};

function speek() {
  let msg = new SpeechSynthesisUtterance('Hello World!');
  let voice = voices.find((voice) => voice.name == 'Daniel');
  msg.voice = voice;
  synth.speak(msg);
}

document.getElementById("btn").onclick = () => speek();