<!DOCTYPE html>
<!-- Declara que aquest document és HTML5 -->
<html lang="ca">
<!-- L'idioma principal del contingut és el català -->
<head>
<meta charset="UTF-8">
<!-- Assegura la correcta visualització de caràcters especials i emojis -->
<title>Conversor de text a veu</title>
<!-- Títol que apareix a la pestanya del navegador -->
<style>
/* Estils generals de la pàgina */
body {
font-family: sans-serif; /* Tipus de lletra llegible */
padding: 2em; /* Espai al voltant del contingut */
background-color: hsl(194, 91%, 91%); /* Fons blau clar suau */
}
/* Estil comú per al camp de text i el selector d'idioma */
input, select {
font-size: 1.2em; /* Mida de lletra una mica més gran */
padding: 0.5em; /* Espai interior dins dels camps */
margin-top: 1em; /* Separació superior */
width: 100%; /* Ocupen tot l'ample disponible */
max-width: 500px; /* Però no més de 500px */
}
/* Estil del botó d'altaveu (🔊) */
#speakBtn {
font-size: 2em; /* Molt gran per facilitar la interacció */
background: none; /* Sense fons */
border: none; /* Sense vores */
cursor: pointer; /* Cursor en forma de mà en passar-hi */
margin-top: 1em; /* Separació respecte als elements anteriors */
}
/* Efecte visual quan l'usuari passa el ratolí pel botó */
#speakBtn:hover {
color: #c8e3f8; /* Canvia a un blau més clar */
}
</style>
</head>
<body>
<!-- Títol visible de la pàgina amb un emoji d'altaveu -->
<h2>🔊 Conversor de text a veu</h2>
<!-- Camp on l'usuari escriu el text a sintetitzar -->
<input type="text" id="cercar" placeholder="Escriu el text que vols escoltar">
<!-- Selector per triar la veu/idioma desitjat -->
<select id="voiceSelect">
<option value="">Selecciona idioma</option>
<option value="en-US">🇺🇸 Anglès (US)</option>
<option value="en-GB">🇬🇧 Anglès (UK)</option>
<option value="fr-FR">🇫🇷 Francès</option>
<option value="de-DE">🇩🇪 Alemany</option>
<option value="it-IT">🇮🇹 Italià</option>
<option value="pt-PT">🇵🇹 Portuguès</option>
<option value="es-ES">🇪🇸 Espanyol</option>
<option value="ca-ES">🎗️ Català</option>
<!-- Els valors (value) són codis d'idioma estàndard BCP 47 -->
</select>
<!-- Botó per iniciar la síntesi de veu -->
<button id="speakBtn" title="Escolta el text">🔊</button>
<script>
// S'executa quan tot el contingut HTML ha carregat
document.addEventListener('DOMContentLoaded', () => {
// Referències als elements HTML que necessitarem
const inputElement = document.getElementById('cercar'); // Camp de text
const speakBtn = document.getElementById('speakBtn'); // Botó d'altaveu
const voiceSelect = document.getElementById('voiceSelect'); // Selector d'idioma
let voices = []; // Array per emmagatzemar les veus disponibles
// Funció per carregar la llista de veus del sistema
function loadVoices() {
voices = speechSynthesis.getVoices();
// Aquesta API pot trigar a carregar les veus en alguns navegadors
}
// Assegurem-nos que les veus es carreguin, fins i tot si arriben més tard
speechSynthesis.onvoiceschanged = loadVoices;
loadVoices(); // Intentem carregar-les ja des del principi
// Funció principal: converteix el text a veu
function speakText() {
const text = inputElement.value.trim(); // Obtenim i netegem el text
if (!text) return; // Si està buit, no fem res
const selectedLang = voiceSelect.value; // Idioma seleccionat per l'usuari
const utterance = new SpeechSynthesisUtterance(text); // Creem l'objecte de parla
// Busquem una veu que coincideixi exactament amb l'idioma triat
const voice = voices.find(v => v.lang === selectedLang);
if (voice) {
// Si la trobem, l'assignem
utterance.voice = voice;
utterance.lang = voice.lang;
} else {
// Si no, mostrem un avís a la consola (per depuració)
console.log('No s\'ha trobat cap veu per a ' + selectedLang);
// Nota: l'API pot usar una veu per defecte si no s'assigna cap
}
// Paràmetres opcionals de parla
utterance.rate = 1; // Velocitat normal (1 = 100%)
utterance.pitch = 1; // To normal
// Cancel·lem qualsevol parla anterior per evitar solapaments
speechSynthesis.cancel();
// Iniciem la nova síntesi de veu
speechSynthesis.speak(utterance);
}
// Quan l'usuari fa clic al botó, es llegeix el text
speakBtn.addEventListener('click', speakText);
// ⚠️ Aquesta línia fa que el text es llegeixi AUTOMÀTICAMENT cada 10 segons
// Pot ser útil per a demostracions, però pot resultar molest en ús normal
setInterval(speakText, 10000);
});
</script>
</body>
</html>
