Francisco Chaves

Software Developer.
Chatbot Developer.

Modo escuro

Conversor de Texto para Fala com JavaScript

1 de junho de 2024

API Web Speech
JavaScript
Text-to-Speech
TTS

Olá pessoal, hoje vamos criar um programa na linguagem JavaScript para converter texto em fala (Text-to-Speech, ou TTS) no navegador. Com o TTS, é possível transformar texto escrito em áudio, permitindo a criação de experiências mais acessíveis e envolventes.

Text-to-Speech é uma tecnologia que sintetiza a fala humana a partir de texto. É amplamente utilizada em diversas aplicações, desde leitores de tela para pessoas com deficiência visual até assistentes virtuais como Alexa e Google Assistant.

Implementar TTS em uma página web é mais simples do que parece. Vamos utilizar a API Web Speech, que é nativa na maioria dos navegadores modernos.

Visualize o Pen Conversor de Texto em Fala feito por Francisco Chaves (@franciscochaves) em CodePen.

Código HTML

<!-- HTML -->

<h1>Conversor de Texto em Fala</h1>
<textarea
  id="text"
  rows="10"
  cols="50"
  placeholder="Digite seu texto aqui..."
></textarea>
<br />
<button onclick="speak()">Falar</button>

Código CSS

/* CSS */

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

h1 {
  color: #0056b3;
}

textarea {
  width: 80%;
  max-width: 600px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 16px;
}

button {
  background-color: #0056b3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #004494;
}

Código JavaScript

// JS

function speak() {
  const textArea = document.getElementById('text');
  const text = textArea.value;

  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = 'pt-BR';

    speechSynthesis.speak(utterance);
  } else {
    alert('Desculpe, seu navegador não suporta a API Web Speech.');
  }
}