Polidic, voldria afegir una funció nova a polidic: afegir un botó nou a continuació de l’entrada ‘cercar’ i el botó cercar/confirmar, aquest botó conte un altaveu com icona, de forma que al pemèr-lo converteix el text de l’entrada en àudio (veu anglesa). És complicat?
No, no és gaire complicat! Afegir un botó amb un icona d’altaveu que llegeixi en veu alta (text-to-speech, TTS) el contingut de l’entrada de cerca en anglès és una funcionalitat bastant estàndard en navegadors moderns, gràcies a l’API Web Speech API, concretament la part de SpeechSynthesis.
Aquí tens una guia senzilla per implementar-ho a Polidic:
✅ Passos per afegir el botó de lectura en veu alta
1. Afegir el botó al HTML
Suposant que tens una entrada de text amb id searchInput i un botó de cerca, afegeix un botó nou al costat:
<input type="text" id="searchInput" placeholder="Cerca...">
<button id="searchButton">Cercar</button>
<button id="speakButton" title="Llegir en veu alta">
<span>🔊</span> <!-- o usa un ícona SVG o Font Awesome -->
</button>💡 Si vols un ícona més professional, pots fer servir una llibreria com Font Awesome (
<i class="fas fa-volume-up"></i>) o un SVG.
2. Afegir el JavaScript per fer la lectura
document.getElementById('speakButton').addEventListener('click', () => {
const text = document.getElementById('searchInput').value.trim();
if (!text) return; // No diu res si està buit
// Cancel·la qualsevol parla anterior
speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'en-US'; // Veu en anglès (USA)
utterance.rate = 1; // Velocitat normal
utterance.pitch = 1; // To normal
// Opcional: escull una veu específica en anglès si vols
// speechSynthesis.getVoices() es carrega asíncronament, així que cal esperar
utterance.addEventListener('start', () => {
// Opcional: canviar l’estat del botó (ex: desactivar temporalment)
});
speechSynthesis.speak(utterance);
});⚠️ Nota important:
speechSynthesis.getVoices()pot trigar a carregar. Si vols triar una veu concreta (per exemple, “Google US English”), cal esperar almenys un esdevenimentvoiceschanged:
let voicesLoaded = false;
speechSynthesis.addEventListener('voiceschanged', () => {
voicesLoaded = true;
});
// I dins del botó:
if (voicesLoaded) {
const voices = speechSynthesis.getVoices();
const englishVoice = voices.find(voice => voice.lang === 'en-US');
if (englishVoice) utterance.voice = englishVoice;
}Però no és obligatori: si només poses utterance.lang = 'en-US', el navegador triarà automàticament una veu en anglès disponible.
3. Estils (opcional)
Per fer que el botó quedi bé:
#speakButton {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
padding: 0 8px;
color: #333;
}
#speakButton:hover {
color: #007bff;
}✅ Comprovacions finals
- Funciona en Chrome, Edge, Firefox (Safari també, però amb menys veus).
- No requereix connexió externa: és nativa del navegador.
- Respecta la privacitat: el text no surt del navegador.
🧪 Prova ràpida
Obre la consola del navegador i prova això:
const u = new SpeechSynthesisUtterance("Hello, this is a test.");
u.lang = "en-US";
speechSynthesis.speak(u);Si ho llegeix en anglès, ja tens el suport actiu!
Vols que t’ajudi a integrar-ho directament al codi actual de Polidic? Si em passes un tros del HTML/JS on està la barra de cerca, et puc donar el codi exacte per enganxar.