b-Web Speech API
Aquí tienes un ejemplo completo de un dictador de voz en tiempo real usando la Web Speech API, que convierte audio en texto en vivo. Este ejemplo incluye:
Un botón para iniciar/detener el dictado.
Transcripción en vivo en una caja de texto.
Soporte para español (es-MX o es-ES).
✅ HTML + JavaScript (funciona en navegadores compatibles como Chrome)
html
CopiarEditar
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Dictador de Voz - Web Speech API</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 2rem;
background-color: #f0f0f0;
}
#texto {
width: 100%;
height: 200px;
padding: 1rem;
font-size: 1.1rem;
border: 2px solid #ccc;
border-radius: 5px;
resize: none;
}
button {
padding: 0.8rem 1.5rem;
font-size: 1rem;
margin-top: 1rem;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#status {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>🎙️ Dictador de Voz</h1>
<textarea id="texto" placeholder="Aquí aparecerá la transcripción..." readonly></textarea>
<br>
<button id="btn">Iniciar Dictado</button>
<div id="status">Estado: Inactivo</div>
<script>
const btn = document.getElementById('btn');
const texto = document.getElementById('texto');
const status = document.getElementById('status');
let recognition;
let escuchando = false;
if (!('webkitSpeechRecognition' in window || 'SpeechRecognition' in window)) {
alert('Tu navegador no soporta la Web Speech API. Usa Google Chrome.');
} else {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
recognition = new SpeechRecognition();
recognition.lang = 'es-MX'; // Puedes cambiar a 'es-ES' si estás en España
recognition.interimResults = true;
recognition.continuous = true;
recognition.onresult = (event) => {
let resultado = '';
for (let i = event.resultIndex; i < event.results.length; i++) {
resultado += event.results[i][0].transcript;
}
texto.value = resultado;
};
recognition.onstart = () => {
status.textContent = 'Estado: Escuchando...';
btn.textContent = 'Detener Dictado';
};
recognition.onend = () => {
status.textContent = 'Estado: Inactivo';
btn.textContent = 'Iniciar Dictado';
escuchando = false;
};
recognition.onerror = (e) => {
status.textContent = 'Error: ' + e.error;
};
btn.addEventListener('click', () => {
if (!escuchando) {
recognition.start();
escuchando = true;
} else {
recognition.stop();
escuchando = false;
}
});
}
</script>
</body>
</html>
✅ Requisitos
Funciona mejor en Google Chrome en escritorio.
Permitir acceso al micrófono.
No funciona fuera de línea.
Comentarios
Publicar un comentario