<form>
  <select id="voiceSelect"></select>
  <input id="voiceInput" value="Chris made me say it!" />
  <button type="submit">Speak</button>
</form>

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
form {
  display: flex;
  flex-direction: column;
}
select,
input,
button {
  padding: 0.75rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  border: 1px solid #333;
}
button {
  background: teal;
  color: #fff;
  border: none;
  cursor: pointer;
  outline: inherit;
}

const SpeechSynthesisUtterance =
  window.webkitSpeechSynthesisUtterance ||
  window.mozSpeechSynthesisUtterance ||
  window.msSpeechSynthesisUtterance ||
  window.oSpeechSynthesisUtterance ||
  window.SpeechSynthesisUtterance;
const form = document.querySelector("form"),
  voiceSelect = document.getElementById("voiceSelect"),
  voiceInput = document.getElementById("voiceInput");
let voices;

if (SpeechSynthesisUtterance !== undefined) {
  window.speechSynthesis.onvoiceschanged = () => {
    voices = window.speechSynthesis.getVoices();
    voices.forEach((voice, key) => {
      let option = document.createElement("option");
      option.textContent = voice.name + " (" + voice.lang + ")";
      option.value = key;
      voiceSelect.appendChild(option);
    });
  };
}

form.onsubmit = function (event) {
  event.preventDefault();

  let speak = new SpeechSynthesisUtterance(voiceInput.value);
  speak.voice = voices[voiceSelect.value];
  window.speechSynthesis.speak(speak);
};