{"id":16905,"date":"2025-10-26T09:22:52","date_gmt":"2025-10-26T07:22:52","guid":{"rendered":"https:\/\/www.beseit.net\/?page_id=16905"},"modified":"2025-10-26T11:35:51","modified_gmt":"2025-10-26T09:35:51","slug":"pagina-tts","status":"publish","type":"page","link":"https:\/\/www.beseit.net\/?page_id=16905","title":{"rendered":"TTS"},"content":{"rendered":"<!DOCTYPE html>\n<!-- Declara que aquest document \u00e9s HTML5 -->\n<html lang=\"ca\">\n<!-- L'idioma principal del contingut \u00e9s el catal\u00e0 -->\n<head>\n  <meta charset=\"UTF-8\">\n  <!-- Assegura la correcta visualitzaci\u00f3 de car\u00e0cters especials i emojis -->\n  <title>Conversor de text a veu<\/title>\n  <!-- T\u00edtol que apareix a la pestanya del navegador -->\n\n  <style>\n    \/* Estils generals de la p\u00e0gina *\/\n    body {\n      font-family: sans-serif;        \/* Tipus de lletra llegible *\/\n      padding: 2em;                   \/* Espai al voltant del contingut *\/\n      background-color: hsl(194, 91%, 91%); \/* Fons  suau *\/\n    }\n\n    \/* Estil com\u00fa per al camp de text i el selector d'idioma *\/\n    input, select {\n      font-size: 1.2em;               \/* Mida de lletra una mica m\u00e9s gran *\/\n      padding: 0.5em;                 \/* Espai interior dins dels camps *\/\n      margin-top: 1em;                \/* Separaci\u00f3 superior *\/\n      width: 100%;                    \/* Ocupen tot l'ample disponible *\/\n      max-width: 500px;               \/* Per\u00f2 no m\u00e9s de 500px *\/\n    }\n\n    \/* Estil del bot\u00f3 d'altaveu (?) *\/\n    #speakBtn {\n      font-size: 2em;                 \/* Molt gran per facilitar la interacci\u00f3 *\/\n      background: none;               \/* Sense fons *\/\n      border: none;                   \/* Sense vores *\/\n      cursor: pointer;                \/* Cursor en forma de m\u00e0 en passar-hi *\/\n      margin-top: 1em;                \/* Separaci\u00f3 respecte als elements anteriors *\/\n    }\n\n    \/* Efecte visual quan l'usuari passa el ratol\u00ed pel bot\u00f3 *\/\n    #speakBtn:hover {\n      color: #c8e3f8;                 \/* Canvia a un blau m\u00e9s clar *\/\n    }\n  <\/style>\n<\/head>\n\n<body>\n  <!-- T\u00edtol visible de la p\u00e0gina amb un emoji d'altaveu -->\n  <h2>? Conversor de text a veu<\/h2>\n\n  <!-- Camp on l'usuari escriu el text a sintetitzar -->\n  <input type=\"text\" id=\"cercar\" placeholder=\"Escriu el text que vols escoltar\">\n\n  <!-- Selector per triar la veu\/idioma desitjat -->\n  <select id=\"voiceSelect\">\n    <option value=\"\">Selecciona 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    <!-- Els valors (value) s\u00f3n codis d'idioma est\u00e0ndard BCP 47 -->\n  <\/select>\n\n  <!-- Bot\u00f3 per iniciar la s\u00edntesi de veu -->\n  <button id=\"speakBtn\" title=\"Escolta el text\">?<\/button>\n\n  <script>\n    \/\/ S'executa quan tot el contingut HTML ha carregat\n    document.addEventListener('DOMContentLoaded', () => {\n      \/\/ Refer\u00e8ncies als elements HTML que necessitarem\n      const inputElement = document.getElementById('cercar');      \/\/ Camp de text\n      const speakBtn = document.getElementById('speakBtn');        \/\/ Bot\u00f3 d'altaveu\n      const voiceSelect = document.getElementById('voiceSelect');  \/\/ Selector d'idioma\n      let voices = [];  \/\/ Array per emmagatzemar les veus disponibles\n\n      \/\/ Funci\u00f3 per carregar la llista de veus del sistema\n      function loadVoices() {\n        voices = speechSynthesis.getVoices();\n        \/\/ Aquesta API pot trigar a carregar les veus en alguns navegadors\n      }\n\n      \/\/ Assegurem-nos que les veus es carreguin, fins i tot si arriben m\u00e9s tard\n      speechSynthesis.onvoiceschanged = loadVoices;\n      loadVoices(); \/\/ Intentem carregar-les ja des del principi\n\n      \/\/ Funci\u00f3 principal: converteix el text a veu\n      function speakText() {\n        const text = inputElement.value.trim(); \/\/ Obtenim i netegem el text\n        if (!text) return; \/\/ Si est\u00e0 buit, no fem res\n\n        const selectedLang = voiceSelect.value; \/\/ Idioma seleccionat per l'usuari\n        const utterance = new SpeechSynthesisUtterance(text); \/\/ Creem l'objecte de parla\n\n        \/\/ Busquem una veu que coincideixi exactament amb l'idioma triat\n        const voice = voices.find(v => v.lang === selectedLang);\n\n        if (voice) {\n          \/\/ Si la trobem, l'assignem\n          utterance.voice = voice;\n          utterance.lang = voice.lang;\n        } else {\n          \/\/ Si no, mostrem un av\u00eds a la consola (per depuraci\u00f3)\n          console.log('No s\\'ha trobat cap veu per a ' + selectedLang);\n          \/\/ Nota: l'API pot usar una veu per defecte si no s'assigna cap\n        }\n\n        \/\/ Par\u00e0metres opcionals de parla\n        utterance.rate = 1;   \/\/ Velocitat normal (1 = 100%)\n        utterance.pitch = 1;  \/\/ To normal\n\n        \/\/ Cancel\u00b7lem qualsevol parla anterior per evitar solapaments\n        speechSynthesis.cancel();\n        \/\/ Iniciem la nova s\u00edntesi de veu\n        speechSynthesis.speak(utterance);\n      }\n\n      \/\/ Quan l'usuari fa clic al bot\u00f3, es llegeix el text\n      speakBtn.addEventListener('click', speakText);\n\n      \/\/ \u26a0\ufe0f Aquesta l\u00ednia fa que el text es llegeixi AUTOM\u00c0TICAMENT cada 10 segons\n      \/\/ Pot ser \u00fatil per a demostracions, per\u00f2 pot resultar molest en \u00fas normal\n      setInterval(speakText, 10000);\n    });\n  <\/script>\n<\/body>\n<\/html>\n\n<pre class=\"wp-block-code\"><code><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;!-- Declara que aquest document \u00e9s HTML5 --&gt;\n&lt;html lang=\"ca\"&gt;\n&lt;!-- L'idioma principal del contingut \u00e9s el catal\u00e0 --&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;!-- Assegura la correcta visualitzaci\u00f3 de car\u00e0cters especials i emojis --&gt;\n  &lt;title&gt;Conversor de text a veu&lt;\/title&gt;\n  &lt;!-- T\u00edtol que apareix a la pestanya del navegador --&gt;\n\n  &lt;style&gt;\n    \/* Estils generals de la p\u00e0gina *\/\n    body {\n      font-family: sans-serif;        \/* Tipus de lletra llegible *\/\n      padding: 2em;                   \/* Espai al voltant del contingut *\/\n      background-color: hsl(194, 91%, 91%); \/* Fons blau clar suau *\/\n    }\n\n    \/* Estil com\u00fa per al camp de text i el selector d'idioma *\/\n    input, select {\n      font-size: 1.2em;               \/* Mida de lletra una mica m\u00e9s gran *\/\n      padding: 0.5em;                 \/* Espai interior dins dels camps *\/\n      margin-top: 1em;                \/* Separaci\u00f3 superior *\/\n      width: 100%;                    \/* Ocupen tot l'ample disponible *\/\n      max-width: 500px;               \/* Per\u00f2 no m\u00e9s de 500px *\/\n    }\n\n    \/* Estil del bot\u00f3 d'altaveu (?) *\/\n    #speakBtn {\n      font-size: 2em;                 \/* Molt gran per facilitar la interacci\u00f3 *\/\n      background: none;               \/* Sense fons *\/\n      border: none;                   \/* Sense vores *\/\n      cursor: pointer;                \/* Cursor en forma de m\u00e0 en passar-hi *\/\n      margin-top: 1em;                \/* Separaci\u00f3 respecte als elements anteriors *\/\n    }\n\n    \/* Efecte visual quan l'usuari passa el ratol\u00ed pel bot\u00f3 *\/\n    #speakBtn:hover {\n      color: #c8e3f8;                 \/* Canvia a un blau m\u00e9s clar *\/\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n  &lt;!-- T\u00edtol visible de la p\u00e0gina amb un emoji d'altaveu --&gt;\n  &lt;h2&gt;? Conversor de text a veu&lt;\/h2&gt;\n\n  &lt;!-- Camp on l'usuari escriu el text a sintetitzar --&gt;\n  &lt;input type=\"text\" id=\"cercar\" placeholder=\"Escriu el text que vols escoltar\"&gt;\n\n  &lt;!-- Selector per triar la veu\/idioma desitjat --&gt;\n  &lt;select id=\"voiceSelect\"&gt;\n    &lt;option value=\"\"&gt;Selecciona idioma&lt;\/option&gt;\n    &lt;option value=\"en-US\"&gt;?? Angl\u00e8s (US)&lt;\/option&gt;\n    &lt;option value=\"en-GB\"&gt;?? Angl\u00e8s (UK)&lt;\/option&gt;\n    &lt;option value=\"fr-FR\"&gt;?? Franc\u00e8s&lt;\/option&gt;\n    &lt;option value=\"de-DE\"&gt;?? Alemany&lt;\/option&gt;\n    &lt;option value=\"it-IT\"&gt;?? Itali\u00e0&lt;\/option&gt;\n    &lt;option value=\"pt-PT\"&gt;?? Portugu\u00e8s&lt;\/option&gt;\n    &lt;option value=\"es-ES\"&gt;?? Espanyol&lt;\/option&gt;\n    &lt;option value=\"ca-ES\"&gt;?\ufe0f Catal\u00e0&lt;\/option&gt;\n    &lt;!-- Els valors (value) s\u00f3n codis d'idioma est\u00e0ndard BCP 47 --&gt;\n  &lt;\/select&gt;\n\n  &lt;!-- Bot\u00f3 per iniciar la s\u00edntesi de veu --&gt;\n  &lt;button id=\"speakBtn\" title=\"Escolta el text\"&gt;?&lt;\/button&gt;\n\n  &lt;script&gt;\n    \/\/ S'executa quan tot el contingut HTML ha carregat\n    document.addEventListener('DOMContentLoaded', () =&gt; {\n      \/\/ Refer\u00e8ncies als elements HTML que necessitarem\n      const inputElement = document.getElementById('cercar');      \/\/ Camp de text\n      const speakBtn = document.getElementById('speakBtn');        \/\/ Bot\u00f3 d'altaveu\n      const voiceSelect = document.getElementById('voiceSelect');  \/\/ Selector d'idioma\n      let voices = [];  \/\/ Array per emmagatzemar les veus disponibles\n\n      \/\/ Funci\u00f3 per carregar la llista de veus del sistema\n      function loadVoices() {\n        voices = speechSynthesis.getVoices();\n        \/\/ Aquesta API pot trigar a carregar les veus en alguns navegadors\n      }\n\n      \/\/ Assegurem-nos que les veus es carreguin, fins i tot si arriben m\u00e9s tard\n      speechSynthesis.onvoiceschanged = loadVoices;\n      loadVoices(); \/\/ Intentem carregar-les ja des del principi\n\n      \/\/ Funci\u00f3 principal: converteix el text a veu\n      function speakText() {\n        const text = inputElement.value.trim(); \/\/ Obtenim i netegem el text\n        if (!text) return; \/\/ Si est\u00e0 buit, no fem res\n\n        const selectedLang = voiceSelect.value; \/\/ Idioma seleccionat per l'usuari\n        const utterance = new SpeechSynthesisUtterance(text); \/\/ Creem l'objecte de parla\n\n        \/\/ Busquem una veu que coincideixi exactament amb l'idioma triat\n        const voice = voices.find(v =&gt; v.lang === selectedLang);\n\n        if (voice) {\n          \/\/ Si la trobem, l'assignem\n          utterance.voice = voice;\n          utterance.lang = voice.lang;\n        } else {\n          \/\/ Si no, mostrem un av\u00eds a la consola (per depuraci\u00f3)\n          console.log('No s\\'ha trobat cap veu per a ' + selectedLang);\n          \/\/ Nota: l'API pot usar una veu per defecte si no s'assigna cap\n        }\n\n        \/\/ Par\u00e0metres opcionals de parla\n        utterance.rate = 1;   \/\/ Velocitat normal (1 = 100%)\n        utterance.pitch = 1;  \/\/ To normal\n\n        \/\/ Cancel\u00b7lem qualsevol parla anterior per evitar solapaments\n        speechSynthesis.cancel();\n        \/\/ Iniciem la nova s\u00edntesi de veu\n        speechSynthesis.speak(utterance);\n      }\n\n      \/\/ Quan l'usuari fa clic al bot\u00f3, es llegeix el text\n      speakBtn.addEventListener('click', speakText);\n\n      \/\/ \u26a0\ufe0f Aquesta l\u00ednia fa que el text es llegeixi AUTOM\u00c0TICAMENT cada 10 segons\n      \/\/ Pot ser \u00fatil per a demostracions, per\u00f2 pot resultar molest en \u00fas normal\n      setInterval(speakText, 10000);\n    });\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Conversor de text a veu ? Conversor de text a veu Selecciona idioma?? Angl\u00e8s (US)?? Angl\u00e8s (UK)?? Franc\u00e8s?? Alemany?? Itali\u00e0?? Portugu\u00e8s?? Espanyol?\ufe0f Catal\u00e0 ? &lt;!DOCTYPE html&gt; &lt;!&#8211; Declara que aquest document \u00e9s HTML5 &#8211;&gt; &lt;html lang=&#8221;ca&#8221;&gt; &lt;!&#8211; L&#8217;idioma principal del &hellip; <a href=\"https:\/\/www.beseit.net\/?page_id=16905\">Continua llegint <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":3167,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-maxima-amplada.php","meta":{"footnotes":""},"categories":[],"class_list":["post-16905","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/pages\/16905","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=16905"}],"version-history":[{"count":5,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/pages\/16905\/revisions"}],"predecessor-version":[{"id":16916,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/pages\/16905\/revisions\/16916"}],"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=16905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}