Conversor de Texto em Áudio:
Aprenda a criar um conversor de texto em áudio usando HTML, CSS e JavaScript. Neste tutorial passo a passo, você verá como transformar texto em áudio.
Este projeto é um aplicativo web que permite aos usuários converter texto escrito em áudio falado.
A aplicação utiliza a API de Síntese de Fala (Web Speech API) para transformar o texto digitado em som, tornando possível ouvir o conteúdo digitado em várias vozes e idiomas.
Ideal para iniciantes e aspirantes a programadores que desejam explorar funcionalidades interativas e inovadoras em seus projetos web.
Veja o Conversor de Texto em Áudio em funcionamento neste link. Conversor de Texto em Áudio.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Conversor de Texto em Áudio</title>
</head>
<body>
<div class="container">
<h1>Convertendo Texto em Áudio</h1>
<textarea id="text-input" rows="5" placeholder="Digite aqui seu texto!"></textarea>
<select id="voice-select"></select>
<button onclick="falar()">Falar</button>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
background-color: #333;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
text-align: center;
color: #fff;
}
input, select, button {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: none;
width: 50%;
}
#text-input {
border-radius: 5px;
width: 90%;
}
button {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
select {
background-color: #fff;
color: #333;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
// Variáveis para armazenar vozes
let voices = [];
const voiceSelect = document.getElementById('voice-select');
// Função para carregar as vozes disponíveis
function carregarVozes() {
voices = window.speechSynthesis.getVoices();
voiceSelect.innerHTML = '';
voices.forEach((voice, i) => {
const option = document.createElement('option');
option.value = i;
option.textContent = `${voice.name} (${voice.lang})`;
voiceSelect.appendChild(option);
});
}
// Função para falar o texto digitado
function falar() {
const textInput = document.getElementById('text-input').value;
const utterance = new SpeechSynthesisUtterance(textInput);
const selectedVoiceIndex = voiceSelect.value;
utterance.voice = voices[selectedVoiceIndex];
window.speechSynthesis.speak(utterance);
}
// Event listener para garantir que as vozes sejam carregadas corretamente
window.speechSynthesis.onvoiceschanged = carregarVozes;
4° Passo: Testar o Projeto!
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Se preferir os códigos estão no meu Repositório no GitHub.
Resultado vai ser igual o da imagem abaixo:
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando!
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!