Como Construir um Conversor de Texto para Fala com HTML, CSS e JavaScript

Se você deseja aprender a criar um projeto web interessante e útil, um conversor de texto para fala pode ser uma excelente escolha. Esse projeto não só demonstra conceitos fundamentais de HTML, CSS e JavaScript, mas também resulta em uma aplicação prática que permite a conversão de texto em áudio, seleção de diferentes vozes, e até mesmo a possibilidade de fazer download e upload de arquivos de texto. Neste tutorial, vamos guiá-lo através de um passo a passo detalhado para desenvolver o seu próprio conversor de texto para fala.

Introdução ao Conversor de Texto para Fala

O conversor de texto para fala é um projeto que combina a estrutura e estilização do HTML e CSS com a interatividade e funcionalidades proporcionadas pelo JavaScript. A aplicação permite aos usuários tanto digitar texto, que será convertido em fala, quanto carregar arquivos de texto previamente salvos. Elementos de interface como botões e seletores de voz tornam a experiência do usuário completa e funcional.

Configurando a Estrutura HTML

A estrutura HTML do projeto será composta por diferentes elementos que permitem interações com o usuário. O código HTML básico deve incluir um container principal, um campo de entrada de texto, botões para iniciar a fala, selecionar vozes, carregar e baixar arquivos de texto. Veja o exemplo abaixo:

“`html





Conversor de Texto para Fala

Conversor de Texto para Fala







“`

Estilizando com CSS

O próximo passo é garantir que o projeto tenha uma aparência agradável e responsiva. O CSS nos ajudará a estilizar os elementos HTML, ajustando o layout, cores, espaçamentos e outras propriedades visuais. Aqui está um exemplo de como o CSS pode ser configurado para este projeto:

“`css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
text-align: center;
max-width: 600px;
width: 100%;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

textarea {
width: 100%;
height: 100px;
margin-bottom: 20px;
}

.controls {
display: flex;
justify-content: space-around;
}

button, select, input[type=”file”] {
padding: 10px;
font-size: 16px;
}
“`

Implementação de Funcionalidades com JavaScript

Para adicionar funcionalidades ao nosso projeto, utilizaremos JavaScript. A principal função será a conversão de texto para fala. Usaremos a API `SpeechSynthesis` do navegador para realizar esta tarefa. Aqui está o código JavaScript básico que cobre a seleção de voz e a conversão de texto para fala:

“`javascript
const textInput = document.getElementById(‘text-input’);
const speakButton = document.getElementById(‘speak-button’);
const voiceSelect = document.getElementById(‘voice-select’);
const downloadButton = document.getElementById(‘download-button’);
const uploadInput = document.getElementById(‘upload-input’);
let voices = [];

// Carregar vozes disponíveis
function loadVoices() {
voices = speechSynthesis.getVoices();
voiceSelect.innerHTML = ”;
voices.forEach((voice, index) => {
const option = document.createElement(‘option’);
option.value = index;
option.textContent = `${voice.name} (${voice.lang})`;
voiceSelect.appendChild(option);
});
}

speechSynthesis.onvoiceschanged = loadVoices;

// Texto para fala
function speak() {
if (textInput.value !== ”) {
const utterance = new SpeechSynthesisUtterance(textInput.value);
utterance.voice = voices[voiceSelect.value];
speechSynthesis.speak(utterance);
}
}

speakButton.addEventListener(‘click’, speak);

// Download do texto
downloadButton.addEventListener(‘click’, () => {
const blob = new Blob([textInput.value], { type: ‘text/plain’ });
const url = URL.createObjectURL(blob);
const a = document.createElement(‘a’);
a.href = url;
a.download = ‘texto.txt’;
a.click();
});

// Upload de arquivo de texto
uploadInput.addEventListener(‘change’, (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
textInput.value = e.target.result;
};
reader.readAsText(file);
}
});
“`

Testando e Utilizando o Conversor

Após implementar as funcionalidades com JavaScript, é hora de testar seu conversor de texto para fala. Abra o arquivo `index.html` em um navegador e comece a digitar texto no campo de entrada. Experimente selecionar diferentes vozes e clique no botão ‘Falar’ para ouvir o texto. Utilize as opções de download e upload para manusear arquivos de texto conforme necessário. Com esses passos, você terá concluído com sucesso a criação de um conversor de texto para fala funcional e interativo.

Agora que você passou por todo o processo, pode ver como HTML, CSS e JavaScript trabalham juntos para criar uma aplicação web prática e envolvente. Esperamos que este tutorial tenha sido útil e motivador para seus futuros projetos de desenvolvimento web.

Postagens recentes