Code Ready | Frontend

✅ Как создать озвучку текста?



SpeechSynthesis - это интерфейс Web Speech API, который используется для перевода текста в речь. Он содержит содержимое, которое должен прочитать речевой сервис, и информацию о том, как его читать (например, язык, высота тона и громкость). ⬇️



☑️ Делимся уже готовым HTML, CSS и JS кодом ниже для создания озвучки текста, с помощью элементов textarea, button и свойства SpeechSynthesis:



HTML ⤵️

<textarea></textarea>

<button>Speak</button>

SCSS ⤵️

button {

  width: 85px;

  background-color: blue;

  color: #fff;

  font-weight: 600;

  font-size: 16px;

  cursor: pointer;

}

textarea, button {

  border: 1.5px solid #000;

  border-radius: 5px;

  outline: none;

  padding: 8px;

  display: block;

  margin: 0 auto;

  margin-top: 15px;

}

JavaScript ⤵️

const button = document.querySelector('button');

const text = document.querySelector('textarea');



button.addEventListener('click', () => {

  const utterance = new SpeechSynthesisUtterance(text.value);

  speechSynthesis.speak(utterance);

});

@code_ready | #обучение #html #css #js