Aquest script s’executa autom\u00e0ticament a cada rec\u00e0rrega de la p\u00e0gina.
El seu objectiu principal \u00e9s activar la funcionalitat de “llegir en veu alta”, el contingut del camp de cerca (#cercar) quan l’usuari prem el bot\u00f3 ? (#speakButton).
Tamb\u00e9 prepara el sistema de veus del navegador segons l’idioma triat per l’usuari
(desat a $_SESSION[‘lang_audio’]).<\/p>\n\n\n\n
<script>\n \/\/ Aquest script s'executa autom\u00e0ticament a cada rec\u00e0rrega de la p\u00e0gina.\n \/\/ El seu objectiu principal \u00e9s activar la funcionalitat de \"llegir en veu alta\"\n \/\/ el contingut del camp de cerca (#cercar) quan l'usuari prem el bot\u00f3 ? (#speakButton).\n \/\/ Tamb\u00e9 prepara el sistema de veus del navegador segons l'idioma triat per l'usuari\n \/\/ (desat a $_SESSION['lang_audio']).\n\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Obtenim refer\u00e8ncies als elements HTML que necessitarem:\n const inputElement = document.getElementById('cercar'); \/\/ Camp de text on l'usuari escriu\n const speakBtn = document.getElementById('speakButton'); \/\/ Bot\u00f3 ? per llegir el text\n let voices = []; \/\/ Array per emmagatzemar les veus disponibles al navegador\n\n \/\/ ? Carreguem din\u00e0micament l'idioma d'\u00e0udio desat a la sessi\u00f3 PHP.\n \/\/ Aquest valor ve de $_SESSION['lang_audio'] i pot ser, per exemple, 'ca-ES', 'es-ES', etc.\n const userLang = '<?php echo addslashes($_SESSION[\"lang_audio\"]); ?>';\n\n \/\/ Funci\u00f3 que omple l'array 'voices' amb totes les veus disponibles al sistema.\n \/\/ Aquesta funci\u00f3 cal cridar-la almenys un cop, i tamb\u00e9 quan el navegador\n \/\/ notifica que la llista de veus ha canviat (veure m\u00e9s avall).\n function loadVoices() {\n voices = speechSynthesis.getVoices();\n }\n\n \/\/ El navegador pot trigar a carregar la llista de veus.\n \/\/ Per aix\u00f2, li afegim un esdeveniment 'onvoiceschanged' que es disparar\u00e0\n \/\/ quan les veus estiguin disponibles. Aix\u00ed assegurem que 'voices' no estigui buit.\n speechSynthesis.onvoiceschanged = loadVoices;\n\n \/\/ Fem una primera crida a loadVoices() per si les veus ja estan carregades.\n loadVoices();\n\n \/\/ Funci\u00f3 que reprodueix en veu alta el text actual del camp de cerca.\n function speakText() {\n \/\/ Obtenim el text i eliminem espais innecessaris als extrems.\n const text = inputElement.value.trim();\n \n \/\/ Si el text \u00e9s buit, no fem res.\n if (!text) return;\n\n \/\/ Creem un objecte 'SpeechSynthesisUtterance' amb el text a pronunciar.\n const utterance = new SpeechSynthesisUtterance(text);\n\n \/\/ ? Intentem trobar una veu que coincideixi exactament amb l'idioma de la sessi\u00f3 (ex: 'ca-ES').\n let selectedVoice = voices.find(v => v.lang === userLang);\n\n \/\/ Si no trobem una veu amb coincid\u00e8ncia exacta, provem amb el codi base de l'idioma (ex: 'ca').\n if (!selectedVoice) {\n const baseLang = userLang.split('-')[0]; \/\/ Ex: 'ca-ES' \u2192 'ca'\n selectedVoice = voices.find(v => v.lang.startsWith(baseLang));\n }\n\n \/\/ Si hem trobat una veu adequada, l'assignem a l'utterance.\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n utterance.lang = selectedVoice.lang; \/\/ Assegurem coher\u00e8ncia d'idioma\n } else {\n \/\/ Si no hi ha cap veu compatible, assignem nom\u00e9s l'idioma.\n \/\/ El navegador triar\u00e0 autom\u00e0ticament una veu (potser en un altre idioma).\n utterance.lang = userLang;\n }\n\n \/\/ Configuraci\u00f3 addicional de la pronunciaci\u00f3:\n utterance.rate = 1; \/\/ Velocitat normal (1.0 = per defecte)\n utterance.pitch = 1; \/\/ To normal\n\n \/\/ Cancel\u00b7lem qualsevol altra reproducci\u00f3 en curs i iniciem aquesta.\n speechSynthesis.cancel();\n speechSynthesis.speak(utterance);\n }\n\n \/\/ Afegim un esdeveniment de clic al bot\u00f3 ?.\n \/\/ Quan l'usuari prem el bot\u00f3, es crida la funci\u00f3 speakText().\n speakBtn.addEventListener('click', (e) => {\n e.preventDefault(); \/\/ Evitem comportaments per defecte (ex: submit del formulari)\n speakText(); \/\/ Llegim el text en veu alta\n });\n });\n<\/script><\/pre>\n\n\n\n<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Aquest script s’executa autom\u00e0ticament a cada rec\u00e0rrega de la p\u00e0gina.El seu objectiu principal \u00e9s activar la funcionalitat de “llegir en veu alta”, el contingut del camp de cerca (#cercar) quan l’usuari prem el bot\u00f3 ? (#speakButton).Tamb\u00e9 prepara el sistema de … Continua llegint