Caixa Comod\u00ed – Text a veu<\/title>\n <link rel=\"icon\" href=\"calculadora.ico\" type=\"image\/x-icon\">\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n background-color: #f0f0f0;\n height: 100vh;\n }\n\n .container {\n background-color: rgb(213, 225, 225);\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n max-width: 440px;\n width: 100%;\n height: 60%;\n margin-top: 30px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n h2 {\n text-align: center;\n color: #333;\n margin: 0 0 15px 0;\n font-size: 1.4em;\n }\n\n #editor {\n font-size: 1.3em;\n padding: 8px;\n margin: 8px 0;\n width: 100%;\n height: 320px;\n overflow-y: auto;\n border: 1px solid #ccc;\n white-space: pre-wrap;\n background: white;\n border-radius: 5px;\n box-sizing: border-box;\n }\n\n select {\n font-size: 1em;\n padding: 6px;\n margin: 6px 4px 0 0;\n width: calc(50% - 8px);\n height: 36px;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-sizing: border-box;\n }\n\n #debugInfo {\n margin: 10px 0;\n padding: 8px;\n background: #fff;\n border-radius: 5px;\n font-size: 0.9em;\n color: #333;\n border: 1px solid #ccc;\n }\n\n .controls {\n display: flex;\n justify-content: center;\n gap: 16px;\n margin-top: 12px;\n }\n\n #speakBtn, #toggleBtn {\n font-size: 24px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 8px;\n width: 50px;\n height: 50px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #speakBtn:hover, #toggleBtn:hover {\n background: #0056b3;\n }\n\n .linia {\n display: block;\n padding: 0.2em;\n transition: background-color 0.3s ease;\n }\n\n .activa {\n background-color: hsl(180, 1%, 72%);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h2>? Text a veu<\/h2>\n\n <div id=\"editor\" contenteditable=\"true\" placeholder=\"Escriu el text que vols escoltar\">\nto run into somebody.<br>\nhave a good trip.<br>\nto pass on greetings.<br>\nthere\u2019s a restroom in the caf\u00e9.\n <\/div>\n <div>\n <select id=\"voiceSelect\">\n <option value=\"\">Idioma<\/option>\n <option value=\"en-US\">?? Angl\u00e8s (US)<\/option>\n <option value=\"en-GB\">?? Angl\u00e8s (UK)<\/option>\n <option value=\"fr-FR\">?? Franc\u00e8s<\/option>\n <option value=\"de-DE\">?? Alemany<\/option>\n <option value=\"it-IT\">?? Itali\u00e0<\/option>\n <option value=\"pt-PT\">?? Portugu\u00e8s<\/option>\n <option value=\"es-ES\">?? Espanyol<\/option>\n <option value=\"ca-ES\">?\ufe0f Catal\u00e0<\/option>\n <\/select>\n\n <select id=\"pauseSelect\">\n <option value=\"1\">\u23f1\ufe0f Pausa x1<\/option>\n <option value=\"2\">\u23f1\ufe0f Pausa x2<\/option>\n <option value=\"3\">\u23f1\ufe0f Pausa x3<\/option>\n <option value=\"4\">\u23f1\ufe0f Pausa x4<\/option>\n <option value=\"10\">\u23f1\ufe0f Pausa x10<\/option>\n <\/select>\n <\/div>\n\n \n <div id=\"debugInfo\">\n ? Selecciona un idioma i prem “?” per veure quina veu s’utilitza.\n <\/div>\n\n <div class=\"controls\">\n <button id=\"speakBtn\" title=\"Escolta el text\">?<\/button>\n <button id=\"toggleBtn\" title=\"Atura o repr\u00e8n\">\u23f9\ufe0f<\/button>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const editor = document.getElementById('editor');\n const speakBtn = document.getElementById('speakBtn');\n const toggleBtn = document.getElementById('toggleBtn');\n const voiceSelect = document.getElementById('voiceSelect');\n const pauseSelect = document.getElementById('pauseSelect');\n const debugInfo = document.getElementById('debugInfo');\n\n let voices = [];\n let isSpeaking = false;\n let liniesGuardades = [];\n let currentIndex = 0;\n\n function loadVoices() {\n voices = speechSynthesis.getVoices();\n \/\/ Opcional: mostra totes les veus disponibles al carregar (per depuraci\u00f3)\n \/\/ console.log('Veus disponibles:', voices.map(v => `${v.name} (${v.lang})`));\n }\n\n speechSynthesis.onvoiceschanged = loadVoices;\n loadVoices();\n\n const idiomaGuardat = localStorage.getItem('idiomaSeleccionat');\n if (idiomaGuardat) {\n voiceSelect.value = idiomaGuardat;\n }\n\n voiceSelect.addEventListener('change', () => {\n localStorage.setItem('idiomaSeleccionat', voiceSelect.value);\n \/\/ Actualitzem el missatge quan es canvia l'idioma\n debugInfo.textContent = `? Idioma seleccionat: ${voiceSelect.options[voiceSelect.selectedIndex].text}`;\n });\n\n function getLinies() {\n const text = editor.innerText || editor.textContent;\n return text.split('\\n').map(l => l.trim()).filter(l => l);\n }\n\n function marcarLinia(index) {\n const linies = editor.querySelectorAll('.linia');\n linies.forEach((el, i) => {\n el.classList.toggle('activa', i === index);\n });\n }\n\n function prepararEditor() {\n const linies = getLinies();\n editor.innerHTML = '';\n linies.forEach((text, i) => {\n const span = document.createElement('span');\n span.className = 'linia';\n span.textContent = text;\n editor.appendChild(span);\n editor.appendChild(document.createElement('br'));\n });\n }\n\n function getPausaEntreLinies() {\n const factor = parseInt(pauseSelect.value || '1');\n return 500 * factor;\n }\n\n \/\/ ? Funci\u00f3 per trobar la millor veu i mostrar informaci\u00f3\n function getBestVoiceAndReport(langCode) {\n if (!langCode) {\n debugInfo.innerHTML = `\u2139\ufe0f Cap idioma seleccionat. S'utilitzar\u00e0 la veu per defecte.`;\n return null;\n }\n\n \/\/ Normalitzem per a comparacions flexibles\n const normalizedTarget = langCode.replace('-', '_').toLowerCase();\n\n \/\/ 1. Cerca exacta (amb normalitzaci\u00f3)\n let best = voices.find(v => \n v.lang.replace('-', '_').toLowerCase() === normalizedTarget\n );\n\n if (best) {\n debugInfo.innerHTML = `\u2705 Idioma demanat: <strong>${langCode}<\/strong><br>?\ufe0f Veus trobada: <strong>${best.name}<\/strong> (${best.lang})`;\n return best;\n }\n\n \/\/ 2. Cerca per prefix (p. ex., \"ca\" per a \"ca-ES\")\n const prefix = langCode.split('-')[0].toLowerCase();\n best = voices.find(v => v.lang.toLowerCase().startsWith(prefix));\n\n if (best) {\n debugInfo.innerHTML = `\u26a0\ufe0f Idioma demanat: <strong>${langCode}<\/strong><br>?\ufe0f Veus aproximada: <strong>${best.name}<\/strong> (${best.lang})`;\n return best;\n }\n\n \/\/ 3. No s'ha trobat cap veu\n debugInfo.innerHTML = `\u274c Idioma demanat: <strong>${langCode}<\/strong><br>? Cap veu trobada. Comprova que tens l'idioma instal\u00b7lat a Android.`;\n return null;\n }\n\n function speakLinia() {\n if (currentIndex >= liniesGuardades.length) {\n isSpeaking = false;\n setTimeout(() => {\n speakText();\n }, 2000);\n return;\n }\n\n const linia = liniesGuardades[currentIndex];\n const utterance = new SpeechSynthesisUtterance(linia);\n\n const selectedLang = voiceSelect.value;\n const voice = getBestVoiceAndReport(selectedLang);\n if (voice) {\n utterance.voice = voice;\n }\n\n utterance.rate = 1;\n utterance.pitch = 1;\n\n utterance.onstart = () => {\n isSpeaking = true;\n marcarLinia(currentIndex);\n };\n\n utterance.onend = () => {\n currentIndex++;\n setTimeout(() => {\n speakLinia();\n }, getPausaEntreLinies());\n };\n\n speechSynthesis.speak(utterance);\n }\n\n function speakText() {\n if (isSpeaking) return;\n prepararEditor();\n liniesGuardades = getLinies();\n currentIndex = 0;\n speechSynthesis.cancel();\n speakLinia();\n }\n\n speakBtn.addEventListener('click', speakText);\n\n toggleBtn.addEventListener('click', () => {\n if (isSpeaking) {\n speechSynthesis.cancel();\n isSpeaking = false;\n } else {\n speakLinia();\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\nSi s\u2019executa des d\u2019android s\u2019ha d\u2019ajusta la llengua desde configuraci\u00f3\/config adicional\/idioma\/sortida TTS\n\n<p><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"><!DOCTYPE html>\n<html lang=\"ca\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Caixa Comod\u00ed - Text a veu<\/title>\n <link rel=\"icon\" href=\"calculadora.ico\" type=\"image\/x-icon\">\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n background-color: #f0f0f0;\n height: 100vh;\n }\n\n .container {\n background-color: rgb(213, 225, 225);\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n max-width: 440px;\n width: 100%;\n height: 60%;\n margin-top: 30px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n h2 {\n text-align: center;\n color: #333;\n margin: 0 0 15px 0;\n font-size: 1.4em;\n }\n\n #editor {\n font-size: 1.3em;\n padding: 8px;\n margin: 8px 0;\n width: 100%;\n height: 320px;\n overflow-y: auto;\n border: 1px solid #ccc;\n white-space: pre-wrap;\n background: white;\n border-radius: 5px;\n box-sizing: border-box;\n }\n\n select {\n font-size: 1em;\n padding: 6px;\n margin: 6px 4px 0 0;\n width: calc(50% - 8px);\n height: 36px;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-sizing: border-box;\n }\n\n #debugInfo {\n margin: 10px 0;\n padding: 8px;\n background: #fff;\n border-radius: 5px;\n font-size: 0.9em;\n color: #333;\n border: 1px solid #ccc;\n }\n\n .controls {\n display: flex;\n justify-content: center;\n gap: 16px;\n margin-top: 12px;\n }\n\n #speakBtn, #toggleBtn {\n font-size: 24px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 8px;\n width: 50px;\n height: 50px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #speakBtn:hover, #toggleBtn:hover {\n background: #0056b3;\n }\n\n .linia {\n display: block;\n padding: 0.2em;\n transition: background-color 0.3s ease;\n }\n\n .activa {\n background-color: hsl(180, 1%, 72%);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h2>? Text a veu<\/h2>\n\n <div id=\"editor\" contenteditable=\"true\" placeholder=\"Escriu el text que vols escoltar\">\nto run into somebody.<br>\nhave a good trip.<br>\nto pass on greetings.<br>\nthere\u2019s a restroom in the caf\u00e9.\n <\/div>\n <div>\n <select id=\"voiceSelect\">\n <option value=\"\">Idioma<\/option>\n <option value=\"en-US\">?? Angl\u00e8s (US)<\/option>\n <option value=\"en-GB\">?? Angl\u00e8s (UK)<\/option>\n <option value=\"fr-FR\">?? Franc\u00e8s<\/option>\n <option value=\"de-DE\">?? Alemany<\/option>\n <option value=\"it-IT\">?? Itali\u00e0<\/option>\n <option value=\"pt-PT\">?? Portugu\u00e8s<\/option>\n <option value=\"es-ES\">?? Espanyol<\/option>\n <option value=\"ca-ES\">?\ufe0f Catal\u00e0<\/option>\n <\/select>\n\n <select id=\"pauseSelect\">\n <option value=\"1\">\u23f1\ufe0f Pausa x1<\/option>\n <option value=\"2\">\u23f1\ufe0f Pausa x2<\/option>\n <option value=\"3\">\u23f1\ufe0f Pausa x3<\/option>\n <option value=\"4\">\u23f1\ufe0f Pausa x4<\/option>\n <option value=\"10\">\u23f1\ufe0f Pausa x10<\/option>\n <\/select>\n <\/div>\n\n \n <div id=\"debugInfo\">\n ? Selecciona un idioma i prem \"?\" per veure quina veu s'utilitza.\n <\/div>\n\n <div class=\"controls\">\n <button id=\"speakBtn\" title=\"Escolta el text\">?<\/button>\n <button id=\"toggleBtn\" title=\"Atura o repr\u00e8n\">\u23f9\ufe0f<\/button>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const editor = document.getElementById('editor');\n const speakBtn = document.getElementById('speakBtn');\n const toggleBtn = document.getElementById('toggleBtn');\n const voiceSelect = document.getElementById('voiceSelect');\n const pauseSelect = document.getElementById('pauseSelect');\n const debugInfo = document.getElementById('debugInfo');\n\n let voices = [];\n let isSpeaking = false;\n let liniesGuardades = [];\n let currentIndex = 0;\n\n function loadVoices() {\n voices = speechSynthesis.getVoices();\n \/\/ Opcional: mostra totes les veus disponibles al carregar (per depuraci\u00f3)\n \/\/ console.log('Veus disponibles:', voices.map(v => `${v.name} (${v.lang})`));\n }\n\n speechSynthesis.onvoiceschanged = loadVoices;\n loadVoices();\n\n const idiomaGuardat = localStorage.getItem('idiomaSeleccionat');\n if (idiomaGuardat) {\n voiceSelect.value = idiomaGuardat;\n }\n\n voiceSelect.addEventListener('change', () => {\n localStorage.setItem('idiomaSeleccionat', voiceSelect.value);\n \/\/ Actualitzem el missatge quan es canvia l'idioma\n debugInfo.textContent = `? Idioma seleccionat: ${voiceSelect.options[voiceSelect.selectedIndex].text}`;\n });\n\n function getLinies() {\n const text = editor.innerText || editor.textContent;\n return text.split('\\n').map(l => l.trim()).filter(l => l);\n }\n\n function marcarLinia(index) {\n const linies = editor.querySelectorAll('.linia');\n linies.forEach((el, i) => {\n el.classList.toggle('activa', i === index);\n });\n }\n\n function prepararEditor() {\n const linies = getLinies();\n editor.innerHTML = '';\n linies.forEach((text, i) => {\n const span = document.createElement('span');\n span.className = 'linia';\n span.textContent = text;\n editor.appendChild(span);\n editor.appendChild(document.createElement('br'));\n });\n }\n\n function getPausaEntreLinies() {\n const factor = parseInt(pauseSelect.value || '1');\n return 500 * factor;\n }\n\n \/\/ ? Funci\u00f3 per trobar la millor veu i mostrar informaci\u00f3\n function getBestVoiceAndReport(langCode) {\n if (!langCode) {\n debugInfo.innerHTML = `\u2139\ufe0f Cap idioma seleccionat. S'utilitzar\u00e0 la veu per defecte.`;\n return null;\n }\n\n \/\/ Normalitzem per a comparacions flexibles\n const normalizedTarget = langCode.replace('-', '_').toLowerCase();\n\n \/\/ 1. Cerca exacta (amb normalitzaci\u00f3)\n let best = voices.find(v => \n v.lang.replace('-', '_').toLowerCase() === normalizedTarget\n );\n\n if (best) {\n debugInfo.innerHTML = `\u2705 Idioma demanat: <strong>${langCode}<\/strong><br>?\ufe0f Veus trobada: <strong>${best.name}<\/strong> (${best.lang})`;\n return best;\n }\n\n \/\/ 2. Cerca per prefix (p. ex., \"ca\" per a \"ca-ES\")\n const prefix = langCode.split('-')[0].toLowerCase();\n best = voices.find(v => v.lang.toLowerCase().startsWith(prefix));\n\n if (best) {\n debugInfo.innerHTML = `\u26a0\ufe0f Idioma demanat: <strong>${langCode}<\/strong><br>?\ufe0f Veus aproximada: <strong>${best.name}<\/strong> (${best.lang})`;\n return best;\n }\n\n \/\/ 3. No s'ha trobat cap veu\n debugInfo.innerHTML = `\u274c Idioma demanat: <strong>${langCode}<\/strong><br>? Cap veu trobada. Comprova que tens l'idioma instal\u00b7lat a Android.`;\n return null;\n }\n\n function speakLinia() {\n if (currentIndex >= liniesGuardades.length) {\n isSpeaking = false;\n setTimeout(() => {\n speakText();\n }, 2000);\n return;\n }\n\n const linia = liniesGuardades[currentIndex];\n const utterance = new SpeechSynthesisUtterance(linia);\n\n const selectedLang = voiceSelect.value;\n const voice = getBestVoiceAndReport(selectedLang);\n if (voice) {\n utterance.voice = voice;\n }\n\n utterance.rate = 1;\n utterance.pitch = 1;\n\n utterance.onstart = () => {\n isSpeaking = true;\n marcarLinia(currentIndex);\n };\n\n utterance.onend = () => {\n currentIndex++;\n setTimeout(() => {\n speakLinia();\n }, getPausaEntreLinies());\n };\n\n speechSynthesis.speak(utterance);\n }\n\n function speakText() {\n if (isSpeaking) return;\n prepararEditor();\n liniesGuardades = getLinies();\n currentIndex = 0;\n speechSynthesis.cancel();\n speakLinia();\n }\n\n speakBtn.addEventListener('click', speakText);\n\n toggleBtn.addEventListener('click', () => {\n if (isSpeaking) {\n speechSynthesis.cancel();\n isSpeaking = false;\n } else {\n speakLinia();\n }\n });\n });\n <\/script>\n<\/body>\n<\/html><\/pre>\n<p><\/p>\n<p><\/p>\n<p><\/p>\n<p><\/p>\n<p><mark class=\"has-inline-color\" style=\"background-color: rgba(0, 0, 0, 0); color: #e81313;\">Si s’executa des d’android s’ha d’ajusta la llengua desde configuraci\u00f3\/config adicional\/idioma\/sortida TTS<\/mark><\/p>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Caixa Comod\u00ed – Text a veu ? Text a veu to run into somebody. have a good trip. to pass on greetings. there\u2019s a restroom in the caf\u00e9. Idioma?? Angl\u00e8s (US)?? Angl\u00e8s (UK)?? Franc\u00e8s?? Alemany?? Itali\u00e0?? Portugu\u00e8s?? Espanyol?\ufe0f Catal\u00e0 \u23f1\ufe0f … <a href=\"https:\/\/www.beseit.net\/?page_id=17082\">Continua llegint <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":3167,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"class_list":["post-17082","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/pages\/17082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17082"}],"version-history":[{"count":13,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/pages\/17082\/revisions"}],"predecessor-version":[{"id":17102,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/pages\/17082\/revisions\/17102"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/media\/3167"}],"wp:attachment":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":17082,"date":"2025-11-03T19:39:22","date_gmt":"2025-11-03T17:39:22","guid":{"rendered":"https:\/\/www.beseit.net\/?page_id=17082"},"modified":"2025-11-03T20:04:50","modified_gmt":"2025-11-03T18:04:50","slug":"tts_polilang","status":"publish","type":"page","link":"https:\/\/www.beseit.net\/?page_id=17082","title":{"rendered":"TTS_polilang"},"content":{"rendered":"\n\n\n\n \n \n Caixa Comod\u00ed – Text a veu<\/title>\n <link rel=\"icon\" href=\"calculadora.ico\" type=\"image\/x-icon\">\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n background-color: #f0f0f0;\n height: 100vh;\n }\n\n .container {\n background-color: rgb(213, 225, 225);\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n max-width: 440px;\n width: 100%;\n height: 60%;\n margin-top: 30px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n h2 {\n text-align: center;\n color: #333;\n margin: 0 0 15px 0;\n font-size: 1.4em;\n }\n\n #editor {\n font-size: 1.3em;\n padding: 8px;\n margin: 8px 0;\n width: 100%;\n height: 320px;\n overflow-y: auto;\n border: 1px solid #ccc;\n white-space: pre-wrap;\n background: white;\n border-radius: 5px;\n box-sizing: border-box;\n }\n\n select {\n font-size: 1em;\n padding: 6px;\n margin: 6px 4px 0 0;\n width: calc(50% - 8px);\n height: 36px;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-sizing: border-box;\n }\n\n #debugInfo {\n margin: 10px 0;\n padding: 8px;\n background: #fff;\n border-radius: 5px;\n font-size: 0.9em;\n color: #333;\n border: 1px solid #ccc;\n }\n\n .controls {\n display: flex;\n justify-content: center;\n gap: 16px;\n margin-top: 12px;\n }\n\n #speakBtn, #toggleBtn {\n font-size: 24px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 8px;\n width: 50px;\n height: 50px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #speakBtn:hover, #toggleBtn:hover {\n background: #0056b3;\n }\n\n .linia {\n display: block;\n padding: 0.2em;\n transition: background-color 0.3s ease;\n }\n\n .activa {\n background-color: hsl(180, 1%, 72%);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h2>? Text a veu<\/h2>\n\n <div id=\"editor\" contenteditable=\"true\" placeholder=\"Escriu el text que vols escoltar\">\nto run into somebody.<br>\nhave a good trip.<br>\nto pass on greetings.<br>\nthere\u2019s a restroom in the caf\u00e9.\n <\/div>\n <div>\n <select id=\"voiceSelect\">\n <option value=\"\">Idioma<\/option>\n <option value=\"en-US\">?? Angl\u00e8s (US)<\/option>\n <option value=\"en-GB\">?? Angl\u00e8s (UK)<\/option>\n <option value=\"fr-FR\">?? Franc\u00e8s<\/option>\n <option value=\"de-DE\">?? Alemany<\/option>\n <option value=\"it-IT\">?? Itali\u00e0<\/option>\n <option value=\"pt-PT\">?? Portugu\u00e8s<\/option>\n <option value=\"es-ES\">?? Espanyol<\/option>\n <option value=\"ca-ES\">?\ufe0f Catal\u00e0<\/option>\n <\/select>\n\n <select id=\"pauseSelect\">\n <option value=\"1\">\u23f1\ufe0f Pausa x1<\/option>\n <option value=\"2\">\u23f1\ufe0f Pausa x2<\/option>\n <option value=\"3\">\u23f1\ufe0f Pausa x3<\/option>\n <option value=\"4\">\u23f1\ufe0f Pausa x4<\/option>\n <option value=\"10\">\u23f1\ufe0f Pausa x10<\/option>\n <\/select>\n <\/div>\n\n \n <div id=\"debugInfo\">\n ? Selecciona un idioma i prem “?” per veure quina veu s’utilitza.\n <\/div>\n\n <div class=\"controls\">\n <button id=\"speakBtn\" title=\"Escolta el text\">?<\/button>\n <button id=\"toggleBtn\" title=\"Atura o repr\u00e8n\">\u23f9\ufe0f<\/button>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const editor = document.getElementById('editor');\n const speakBtn = document.getElementById('speakBtn');\n const toggleBtn = document.getElementById('toggleBtn');\n const voiceSelect = document.getElementById('voiceSelect');\n const pauseSelect = document.getElementById('pauseSelect');\n const debugInfo = document.getElementById('debugInfo');\n\n let voices = [];\n let isSpeaking = false;\n let liniesGuardades = [];\n let currentIndex = 0;\n\n function loadVoices() {\n voices = speechSynthesis.getVoices();\n \/\/ Opcional: mostra totes les veus disponibles al carregar (per depuraci\u00f3)\n \/\/ console.log('Veus disponibles:', voices.map(v => `${v.name} (${v.lang})`));\n }\n\n speechSynthesis.onvoiceschanged = loadVoices;\n loadVoices();\n\n const idiomaGuardat = localStorage.getItem('idiomaSeleccionat');\n if (idiomaGuardat) {\n voiceSelect.value = idiomaGuardat;\n }\n\n voiceSelect.addEventListener('change', () => {\n localStorage.setItem('idiomaSeleccionat', voiceSelect.value);\n \/\/ Actualitzem el missatge quan es canvia l'idioma\n debugInfo.textContent = `? Idioma seleccionat: ${voiceSelect.options[voiceSelect.selectedIndex].text}`;\n });\n\n function getLinies() {\n const text = editor.innerText || editor.textContent;\n return text.split('\\n').map(l => l.trim()).filter(l => l);\n }\n\n function marcarLinia(index) {\n const linies = editor.querySelectorAll('.linia');\n linies.forEach((el, i) => {\n el.classList.toggle('activa', i === index);\n });\n }\n\n function prepararEditor() {\n const linies = getLinies();\n editor.innerHTML = '';\n linies.forEach((text, i) => {\n const span = document.createElement('span');\n span.className = 'linia';\n span.textContent = text;\n editor.appendChild(span);\n editor.appendChild(document.createElement('br'));\n });\n }\n\n function getPausaEntreLinies() {\n const factor = parseInt(pauseSelect.value || '1');\n return 500 * factor;\n }\n\n \/\/ ? Funci\u00f3 per trobar la millor veu i mostrar informaci\u00f3\n function getBestVoiceAndReport(langCode) {\n if (!langCode) {\n debugInfo.innerHTML = `\u2139\ufe0f Cap idioma seleccionat. S'utilitzar\u00e0 la veu per defecte.`;\n return null;\n }\n\n \/\/ Normalitzem per a comparacions flexibles\n const normalizedTarget = langCode.replace('-', '_').toLowerCase();\n\n \/\/ 1. Cerca exacta (amb normalitzaci\u00f3)\n let best = voices.find(v => \n v.lang.replace('-', '_').toLowerCase() === normalizedTarget\n );\n\n if (best) {\n debugInfo.innerHTML = `\u2705 Idioma demanat: <strong>${langCode}<\/strong><br>?\ufe0f Veus trobada: <strong>${best.name}<\/strong> (${best.lang})`;\n return best;\n }\n\n \/\/ 2. Cerca per prefix (p. ex., \"ca\" per a \"ca-ES\")\n const prefix = langCode.split('-')[0].toLowerCase();\n best = voices.find(v => v.lang.toLowerCase().startsWith(prefix));\n\n if (best) {\n debugInfo.innerHTML = `\u26a0\ufe0f Idioma demanat: <strong>${langCode}<\/strong><br>?\ufe0f Veus aproximada: <strong>${best.name}<\/strong> (${best.lang})`;\n return best;\n }\n\n \/\/ 3. No s'ha trobat cap veu\n debugInfo.innerHTML = `\u274c Idioma demanat: <strong>${langCode}<\/strong><br>? Cap veu trobada. Comprova que tens l'idioma instal\u00b7lat a Android.`;\n return null;\n }\n\n function speakLinia() {\n if (currentIndex >= liniesGuardades.length) {\n isSpeaking = false;\n setTimeout(() => {\n speakText();\n }, 2000);\n return;\n }\n\n const linia = liniesGuardades[currentIndex];\n const utterance = new SpeechSynthesisUtterance(linia);\n\n const selectedLang = voiceSelect.value;\n const voice = getBestVoiceAndReport(selectedLang);\n if (voice) {\n utterance.voice = voice;\n }\n\n utterance.rate = 1;\n utterance.pitch = 1;\n\n utterance.onstart = () => {\n isSpeaking = true;\n marcarLinia(currentIndex);\n };\n\n utterance.onend = () => {\n currentIndex++;\n setTimeout(() => {\n speakLinia();\n }, getPausaEntreLinies());\n };\n\n speechSynthesis.speak(utterance);\n }\n\n function speakText() {\n if (isSpeaking) return;\n prepararEditor();\n liniesGuardades = getLinies();\n currentIndex = 0;\n speechSynthesis.cancel();\n speakLinia();\n }\n\n speakBtn.addEventListener('click', speakText);\n\n toggleBtn.addEventListener('click', () => {\n if (isSpeaking) {\n speechSynthesis.cancel();\n isSpeaking = false;\n } else {\n speakLinia();\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\nSi s\u2019executa des d\u2019android s\u2019ha d\u2019ajusta la llengua desde configuraci\u00f3\/config adicional\/idioma\/sortida TTS\n\n<p><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"><!DOCTYPE html>\n<html lang=\"ca\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Caixa Comod\u00ed - Text a veu<\/title>\n <link rel=\"icon\" href=\"calculadora.ico\" type=\"image\/x-icon\">\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n background-color: #f0f0f0;\n height: 100vh;\n }\n\n .container {\n background-color: rgb(213, 225, 225);\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n max-width: 440px;\n width: 100%;\n height: 60%;\n margin-top: 30px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n h2 {\n text-align: center;\n color: #333;\n margin: 0 0 15px 0;\n font-size: 1.4em;\n }\n\n #editor {\n font-size: 1.3em;\n padding: 8px;\n margin: 8px 0;\n width: 100%;\n height: 320px;\n overflow-y: auto;\n border: 1px solid #ccc;\n white-space: pre-wrap;\n background: white;\n border-radius: 5px;\n box-sizing: border-box;\n }\n\n select {\n font-size: 1em;\n padding: 6px;\n margin: 6px 4px 0 0;\n width: calc(50% - 8px);\n height: 36px;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-sizing: border-box;\n }\n\n #debugInfo {\n margin: 10px 0;\n padding: 8px;\n background: #fff;\n border-radius: 5px;\n font-size: 0.9em;\n color: #333;\n border: 1px solid #ccc;\n }\n\n .controls {\n display: flex;\n justify-content: center;\n gap: 16px;\n margin-top: 12px;\n }\n\n #speakBtn, #toggleBtn {\n font-size: 24px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 8px;\n width: 50px;\n height: 50px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #speakBtn:hover, #toggleBtn:hover {\n background: #0056b3;\n }\n\n .linia {\n display: block;\n padding: 0.2em;\n transition: background-color 0.3s ease;\n }\n\n .activa {\n background-color: hsl(180, 1%, 72%);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h2>? Text a veu<\/h2>\n\n <div id=\"editor\" contenteditable=\"true\" placeholder=\"Escriu el text que vols escoltar\">\nto run into somebody.<br>\nhave a good trip.<br>\nto pass on greetings.<br>\nthere\u2019s a restroom in the caf\u00e9.\n <\/div>\n <div>\n <select id=\"voiceSelect\">\n <option value=\"\">Idioma<\/option>\n <option value=\"en-US\">?? Angl\u00e8s (US)<\/option>\n <option value=\"en-GB\">?? Angl\u00e8s (UK)<\/option>\n <option value=\"fr-FR\">?? Franc\u00e8s<\/option>\n <option value=\"de-DE\">?? Alemany<\/option>\n <option value=\"it-IT\">?? Itali\u00e0<\/option>\n <option value=\"pt-PT\">?? Portugu\u00e8s<\/option>\n <option value=\"es-ES\">?? Espanyol<\/option>\n <option value=\"ca-ES\">?\ufe0f Catal\u00e0<\/option>\n <\/select>\n\n <select id=\"pauseSelect\">\n <option value=\"1\">\u23f1\ufe0f Pausa x1<\/option>\n <option value=\"2\">\u23f1\ufe0f Pausa x2<\/option>\n <option value=\"3\">\u23f1\ufe0f Pausa x3<\/option>\n <option value=\"4\">\u23f1\ufe0f Pausa x4<\/option>\n <option value=\"10\">\u23f1\ufe0f Pausa x10<\/option>\n <\/select>\n <\/div>\n\n \n <div id=\"debugInfo\">\n ? Selecciona un idioma i prem \"?\" per veure quina veu s'utilitza.\n <\/div>\n\n <div class=\"controls\">\n <button id=\"speakBtn\" title=\"Escolta el text\">?<\/button>\n <button id=\"toggleBtn\" title=\"Atura o repr\u00e8n\">\u23f9\ufe0f<\/button>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const editor = document.getElementById('editor');\n const speakBtn = document.getElementById('speakBtn');\n const toggleBtn = document.getElementById('toggleBtn');\n const voiceSelect = document.getElementById('voiceSelect');\n const pauseSelect = document.getElementById('pauseSelect');\n const debugInfo = document.getElementById('debugInfo');\n\n let voices = [];\n let isSpeaking = false;\n let liniesGuardades = [];\n let currentIndex = 0;\n\n function loadVoices() {\n voices = speechSynthesis.getVoices();\n \/\/ Opcional: mostra totes les veus disponibles al carregar (per depuraci\u00f3)\n \/\/ console.log('Veus disponibles:', voices.map(v => `${v.name} (${v.lang})`));\n }\n\n speechSynthesis.onvoiceschanged = loadVoices;\n loadVoices();\n\n const idiomaGuardat = localStorage.getItem('idiomaSeleccionat');\n if (idiomaGuardat) {\n voiceSelect.value = idiomaGuardat;\n }\n\n voiceSelect.addEventListener('change', () => {\n localStorage.setItem('idiomaSeleccionat', voiceSelect.value);\n \/\/ Actualitzem el missatge quan es canvia l'idioma\n debugInfo.textContent = `? Idioma seleccionat: ${voiceSelect.options[voiceSelect.selectedIndex].text}`;\n });\n\n function getLinies() {\n const text = editor.innerText || editor.textContent;\n return text.split('\\n').map(l => l.trim()).filter(l => l);\n }\n\n function marcarLinia(index) {\n const linies = editor.querySelectorAll('.linia');\n linies.forEach((el, i) => {\n el.classList.toggle('activa', i === index);\n });\n }\n\n function prepararEditor() {\n const linies = getLinies();\n editor.innerHTML = '';\n linies.forEach((text, i) => {\n const span = document.createElement('span');\n span.className = 'linia';\n span.textContent = text;\n editor.appendChild(span);\n editor.appendChild(document.createElement('br'));\n });\n }\n\n function getPausaEntreLinies() {\n const factor = parseInt(pauseSelect.value || '1');\n return 500 * factor;\n }\n\n \/\/ ? Funci\u00f3 per trobar la millor veu i mostrar informaci\u00f3\n function getBestVoiceAndReport(langCode) {\n if (!langCode) {\n debugInfo.innerHTML = `\u2139\ufe0f Cap idioma seleccionat. S'utilitzar\u00e0 la veu per defecte.`;\n return null;\n }\n\n \/\/ Normalitzem per a comparacions flexibles\n const normalizedTarget = langCode.replace('-', '_').toLowerCase();\n\n \/\/ 1. Cerca exacta (amb normalitzaci\u00f3)\n let best = voices.find(v => \n v.lang.replace('-', '_').toLowerCase() === normalizedTarget\n );\n\n if (best) {\n debugInfo.innerHTML = `\u2705 Idioma demanat: <strong>${langCode}<\/strong><br>?\ufe0f Veus trobada: <strong>${best.name}<\/strong> (${best.lang})`;\n return best;\n }\n\n \/\/ 2. Cerca per prefix (p. ex., \"ca\" per a \"ca-ES\")\n const prefix = langCode.split('-')[0].toLowerCase();\n best = voices.find(v => v.lang.toLowerCase().startsWith(prefix));\n\n if (best) {\n debugInfo.innerHTML = `\u26a0\ufe0f Idioma demanat: <strong>${langCode}<\/strong><br>?\ufe0f Veus aproximada: <strong>${best.name}<\/strong> (${best.lang})`;\n return best;\n }\n\n \/\/ 3. No s'ha trobat cap veu\n debugInfo.innerHTML = `\u274c Idioma demanat: <strong>${langCode}<\/strong><br>? Cap veu trobada. Comprova que tens l'idioma instal\u00b7lat a Android.`;\n return null;\n }\n\n function speakLinia() {\n if (currentIndex >= liniesGuardades.length) {\n isSpeaking = false;\n setTimeout(() => {\n speakText();\n }, 2000);\n return;\n }\n\n const linia = liniesGuardades[currentIndex];\n const utterance = new SpeechSynthesisUtterance(linia);\n\n const selectedLang = voiceSelect.value;\n const voice = getBestVoiceAndReport(selectedLang);\n if (voice) {\n utterance.voice = voice;\n }\n\n utterance.rate = 1;\n utterance.pitch = 1;\n\n utterance.onstart = () => {\n isSpeaking = true;\n marcarLinia(currentIndex);\n };\n\n utterance.onend = () => {\n currentIndex++;\n setTimeout(() => {\n speakLinia();\n }, getPausaEntreLinies());\n };\n\n speechSynthesis.speak(utterance);\n }\n\n function speakText() {\n if (isSpeaking) return;\n prepararEditor();\n liniesGuardades = getLinies();\n currentIndex = 0;\n speechSynthesis.cancel();\n speakLinia();\n }\n\n speakBtn.addEventListener('click', speakText);\n\n toggleBtn.addEventListener('click', () => {\n if (isSpeaking) {\n speechSynthesis.cancel();\n isSpeaking = false;\n } else {\n speakLinia();\n }\n });\n });\n <\/script>\n<\/body>\n<\/html><\/pre>\n<p><\/p>\n<p><\/p>\n<p><\/p>\n<p><\/p>\n<p><mark class=\"has-inline-color\" style=\"background-color: rgba(0, 0, 0, 0); color: #e81313;\">Si s’executa des d’android s’ha d’ajusta la llengua desde configuraci\u00f3\/config adicional\/idioma\/sortida TTS<\/mark><\/p>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Caixa Comod\u00ed – Text a veu ? Text a veu to run into somebody. have a good trip. to pass on greetings. there\u2019s a restroom in the caf\u00e9. Idioma?? Angl\u00e8s (US)?? Angl\u00e8s (UK)?? Franc\u00e8s?? Alemany?? Itali\u00e0?? Portugu\u00e8s?? Espanyol?\ufe0f Catal\u00e0 \u23f1\ufe0f … <a href=\"https:\/\/www.beseit.net\/?page_id=17082\">Continua llegint <span class=\"meta-nav\">→<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":3167,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"class_list":["post-17082","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/pages\/17082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17082"}],"version-history":[{"count":13,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/pages\/17082\/revisions"}],"predecessor-version":[{"id":17102,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/pages\/17082\/revisions\/17102"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/media\/3167"}],"wp:attachment":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}