{"id":16876,"date":"2025-10-25T17:37:59","date_gmt":"2025-10-25T15:37:59","guid":{"rendered":"https:\/\/www.beseit.net\/?p=16876"},"modified":"2026-05-01T12:24:21","modified_gmt":"2026-05-01T10:24:21","slug":"%f0%9f%94%8a-conversor-de-text-a-veu","status":"publish","type":"post","link":"https:\/\/www.beseit.net\/?p=16876","title":{"rendered":"<span>\u2b50\u2b50<\/span>Conversor de text a veu"},"content":{"rendered":"Simple text to speak mut\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n<!-- \/wp:post-content --><!-- wp:paragraph -->\n\n<iframe loading=\"lazy\" src=\"https:\/\/www.beseit.net\/tts_edge\/speak_button.html\" width=\"100%\" height=\"550\" frameborder=\"0\" scrolling=\"yes\"><\/iframe>\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n\nPer afegir aquest codi de sota cal usar el connector <strong>Enlighter<\/strong>, afegir un bloc a la entrada amb el mateix nom i descarregat el codi del porta-retalls\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:enlighter\/codeblock -->\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=\"\">&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<!-- \/wp:enlighter\/codeblock -->\n\n<!-- wp:paragraph -->\n\n<!-- \/wp:paragraph -->\n\n<!-- wp:enlighter\/codeblock -->\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=\"\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"ca\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;title&gt;Conversor de text a veu&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      font-family: sans-serif;\n      padding: 2em;\n      background-color: #f4f4f4;\n    }\n    input {\n      font-size: 1.2em;\n      padding: 0.5em;\n      margin-top: 1em;\n      width: 100%;\n      max-width: 500px;\n    }\n    #speakBtn {\n      font-size: 2em;\n      background: none;\n      border: none;\n      cursor: pointer;\n      margin-top: 1em;\n    }\n    #speakBtn:hover {\n      color: #0078D7;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h2&gt;? Conversor de text a veu&lt;\/h2&gt;\n  &lt;input type=\"text\" id=\"cercar\" placeholder=\"Escriu el text que vols escoltar\"&gt;\n  &lt;button id=\"speakBtn\" title=\"Escolta el text\"&gt;?&lt;\/button&gt;\n\n  &lt;script&gt;\n    document.addEventListener('DOMContentLoaded', () =&gt; {\n      const inputElement = document.getElementById('cercar');\n      const speakBtn = document.getElementById('speakBtn');\n      let voices = [];\n\n      function loadVoices() {\n        voices = speechSynthesis.getVoices();\n      }\n\n      speechSynthesis.onvoiceschanged = loadVoices;\n      loadVoices();\n\n      function speakText() {\n        const text = inputElement.value.trim();\n        if (!text) return;\n\n        const utterance = new SpeechSynthesisUtterance(text);\n        const zira = voices.find(v =&gt; v.name === 'Microsoft Zira - English (United States)');\n\n        if (zira) {\n          utterance.voice = zira;\n          utterance.lang = zira.lang;\n        }\n\n        utterance.rate = 1;\n        utterance.pitch = 1;\n\n        speechSynthesis.cancel();\n        speechSynthesis.speak(utterance);\n      }\n\n      speakBtn.addEventListener('click', speakText);\n\n      \/\/ ? Repetir cada 10 segons\n      setInterval(speakText, 10000);\n    });\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<!-- \/wp:enlighter\/codeblock -->","protected":false},"excerpt":{"rendered":"<p>Simple text to speak mut Per afegir aquest codi de sota cal usar el connector Enlighter, afegir un bloc a la entrada amb el mateix nom i descarregat el codi del porta-retalls &lt;!DOCTYPE html&gt; &lt;!&#8211; Declara que aquest document \u00e9s &hellip; <a href=\"https:\/\/www.beseit.net\/?p=16876\">Continua llegint <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":3168,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[194,1],"tags":[],"class_list":["post-16876","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tts","category-bloc-de-notes"],"_links":{"self":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"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=16876"}],"version-history":[{"count":37,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16876\/revisions"}],"predecessor-version":[{"id":18016,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16876\/revisions\/18016"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/media\/3168"}],"wp:attachment":[{"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}