<h3>Выберите голос</h3>
<select></select>
<textarea placeholder="Введите текст для чтения"></textarea>
<button>Читать</button>
body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: helvetica;
  color: #222;
}

h3 {
  margin: 0;
  font-size: 2em;
  text-shadow: 1px 1px #ddd;
}

select {
  margin: 1em;
  padding: 0.4em;
  width: 320px;
  height: 30px;
  border: none;
  border-radius: 5px;
  font-size: 0.9em;
}

textarea {
  margin-bottom: 1em;
  padding: 0.6em;
  width: 320px;
  height: 180px;
  outline: none;
  border: none;
  border-radius: 5px;
  resize: none;
  font-family: inherit;
  font-size: 1em;
}

button {
  padding: 0.6em 1em;
  border: none;
  border-radius: 3px;
  background: linear-gradient(lightgreen, darkgreen);
  box-shadow: 0 1px 1px #666;
  font-size: 0.9em;
  cursor: pointer;
  transition: 0.2s;
}

button:hover {
  color: #ddd;
}
const select = document.querySelector("select");
const textarea = document.querySelector("textarea");
const button = document.querySelector("button");

const message = new SpeechSynthesisUtterance();

let voices = [];

textarea.value = 'Мы — источник веселья и скорби рудник. Мы — вместилище скверны и чистый родник. Человек, словно в зеркале мир, — многолик. Он ничтожен — и он же безмерно велик!';

function getVoices() {
  voices = speechSynthesis.getVoices();

  voices.forEach((voice) => {
    const option = document.createElement("option");

    option.value = voice.name;
    option.textContent = `${voice.name}`;

    select.appendChild(option);
  });
}

speechSynthesis.addEventListener("voiceschanged", getVoices);

select.addEventListener("change", (e) => {
  message.voice = voices.find((voice) => voice.name === e.target.value);
});

button.addEventListener("click", () => {
  message.text = textarea.value.trim();
  if (message.text !== "") {
    speechSynthesis.speak(message);
  }
});

getVoices();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.