{"id":16848,"date":"2025-10-17T17:54:35","date_gmt":"2025-10-17T15:54:35","guid":{"rendered":"https:\/\/www.beseit.net\/?p=16848"},"modified":"2025-12-15T13:24:27","modified_gmt":"2025-12-15T11:24:27","slug":"nova-funcio-polidic","status":"publish","type":"post","link":"https:\/\/www.beseit.net\/?p=16848","title":{"rendered":"Nova funci\u00f3 Polidic"},"content":{"rendered":"\n

Polidic, voldria afegir una funci\u00f3 nova a polidic: afegir un bot\u00f3 nou a continuaci\u00f3 de l’entrada ‘cercar’ i el bot\u00f3 cercar\/confirmar, aquest bot\u00f3 conte un altaveu com icona, de forma que al pem\u00e8r-lo converteix el text de l’entrada en \u00e0udio (veu anglesa). \u00c9s complicat?<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

No, no \u00e9s gaire complicat! Afegir un bot\u00f3 amb un icona d\u2019altaveu que llegeixi en veu alta (text-to-speech, TTS) el contingut de l\u2019entrada de cerca en angl\u00e8s \u00e9s una funcionalitat bastant est\u00e0ndard en navegadors moderns, gr\u00e0cies a l\u2019API Web Speech API<\/strong>, concretament la part de SpeechSynthesis<\/strong>.<\/p>\n\n\n\n

Aqu\u00ed tens una guia senzilla per implementar-ho a Polidic:<\/p>\n\n\n\n

\n\n\n\n

\u2705 Passos per afegir el bot\u00f3 de lectura en veu alta<\/h3>\n\n\n\n

1. Afegir el bot\u00f3 al HTML<\/strong><\/h4>\n\n\n\n

Suposant que tens una entrada de text amb id searchInput<\/code> i un bot\u00f3 de cerca, afegeix un bot\u00f3 nou al costat:<\/p>\n\n\n\n

<input type=\"text\" id=\"searchInput\" placeholder=\"Cerca...\">\n<button id=\"searchButton\">Cercar<\/button>\n<button id=\"speakButton\" title=\"Llegir en veu alta\">\n  <span>?<\/span> <!-- o usa un \u00edcona SVG o Font Awesome -->\n<\/button><\/code><\/pre>\n\n\n\n
\n
? Si vols un \u00edcona m\u00e9s professional, pots fer servir una llibreria com Font Awesome (<i class=\"fas fa-volume-up\"><\/i><\/code>) o un SVG.<\/p>\n<\/blockquote>\n\n\n\n
\n\n\n\n
2. Afegir el JavaScript per fer la lectura<\/strong><\/h4>\n\n\n\n
document.getElementById('speakButton').addEventListener('click', () => {\n  const text = document.getElementById('searchInput').value.trim();\n  if (!text) return; \/\/ No diu res si est\u00e0 buit\n\n  \/\/ Cancel\u00b7la qualsevol parla anterior\n  speechSynthesis.cancel();\n\n  const utterance = new SpeechSynthesisUtterance(text);\n  utterance.lang = 'en-US'; \/\/ Veu en angl\u00e8s (USA)\n  utterance.rate = 1;       \/\/ Velocitat normal\n  utterance.pitch = 1;      \/\/ To normal\n\n  \/\/ Opcional: escull una veu espec\u00edfica en angl\u00e8s si vols\n  \/\/ speechSynthesis.getVoices() es carrega as\u00edncronament, aix\u00ed que cal esperar\n  utterance.addEventListener('start', () => {\n    \/\/ Opcional: canviar l\u2019estat del bot\u00f3 (ex: desactivar temporalment)\n  });\n\n  speechSynthesis.speak(utterance);\n});<\/code><\/pre>\n\n\n\n
\n
\u26a0\ufe0f Nota important<\/strong>: speechSynthesis.getVoices()<\/code> pot trigar a carregar. Si vols triar una veu concreta (per exemple, “Google US English”), cal esperar almenys un esdeveniment voiceschanged<\/code>:<\/p>\n<\/blockquote>\n\n\n\n
let voicesLoaded = false;\nspeechSynthesis.addEventListener('voiceschanged', () => {\n  voicesLoaded = true;\n});\n\n\/\/ I dins del bot\u00f3:\nif (voicesLoaded) {\n  const voices = speechSynthesis.getVoices();\n  const englishVoice = voices.find(voice => voice.lang === 'en-US');\n  if (englishVoice) utterance.voice = englishVoice;\n}<\/code><\/pre>\n\n\n\n
Per\u00f2 no \u00e9s obligatori<\/strong>: si nom\u00e9s poses utterance.lang = 'en-US'<\/code>, el navegador triar\u00e0 autom\u00e0ticament una veu en angl\u00e8s disponible.<\/p>\n\n\n\n
\n\n\n\n
3. Estils (opcional)<\/strong><\/h4>\n\n\n\n
Per fer que el bot\u00f3 quedi b\u00e9:<\/p>\n\n\n\n
#speakButton {\n  background: none;\n  border: none;\n  font-size: 1.2em;\n  cursor: pointer;\n  padding: 0 8px;\n  color: #333;\n}\n#speakButton:hover {\n  color: #007bff;\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u2705 Comprovacions finals<\/h3>\n\n\n\n