{"id":16294,"date":"2025-06-08T10:52:43","date_gmt":"2025-06-08T08:52:43","guid":{"rendered":"https:\/\/www.beseit.net\/?p=16294"},"modified":"2025-06-08T12:35:31","modified_gmt":"2025-06-08T10:35:31","slug":"stud-i-speechsynthesis","status":"publish","type":"post","link":"http:\/\/www.beseit.net\/?p=16294","title":{"rendered":"STUD I speechSynthesis"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Objectiu<\/h2>\n\n\n\n<p>Fer sonar <code>$_SESSION['resposta_session']<\/code> amb <code>speechSynthesis<\/code> en dues situacions:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Quan es prem el bot\u00f3 <strong>\u201ccomprovar\u201d<\/strong>.<\/li>\n\n\n\n<li>Quan es prem la tecla <strong>Return\/Enter<\/strong>.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">? Estructura recomanada<\/h2>\n\n\n\n<p>Assumim que:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El bot\u00f3 &#8220;comprovar&#8221; envia la resposta via <code>POST<\/code> a <code>salvar_pregunta_resposta_actual.php<\/code>.<\/li>\n\n\n\n<li>Despr\u00e9s es redirigeix o recarrega <code>index.php<\/code>.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">? PAS 1: Afegeix el text a <code>index.php<\/code><\/h2>\n\n\n\n<p>Al final de <code>index.php<\/code>, afegeix aix\u00f2:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">? Afegeix un div ocult amb la resposta<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">phpCopiaModifica<code>&lt;?php\nif (!empty($_SESSION['resposta_session'])) {\n    $respostaJS = htmlspecialchars($_SESSION['resposta_session'], ENT_QUOTES);\n    echo \"&lt;div id='respostaAVeure' style='display:none;'&gt;$respostaJS&lt;\/div&gt;\";\n}\n?&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">? PAS 2: Afegeix el codi JavaScript que fa sonar la resposta<\/h2>\n\n\n\n<p>Tamb\u00e9 a <code>index.php<\/code>, just <strong>abans de <code>&lt;\/body&gt;<\/code><\/strong>, afegeix:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopiaModifica<code>&lt;script&gt;\nfunction speak(text) {\n    if ('speechSynthesis' in window) {\n        const utterance = new SpeechSynthesisUtterance(text);\n        speechSynthesis.cancel(); \/\/ Evita que s'encavalquin\n        speechSynthesis.speak(utterance);\n    } else {\n        console.warn(\"El navegador no suporta lectura de text.\");\n    }\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    const respostaDiv = document.getElementById(\"respostaAVeure\");\n    if (respostaDiv &amp;&amp; respostaDiv.textContent.trim() !== \"\") {\n        speak(respostaDiv.textContent.trim());\n    }\n});\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>Aix\u00f2 far\u00e0 que <strong>la resposta soni cada cop que es carregui <code>index.php<\/code><\/strong> amb una nova <code>$_SESSION['resposta_session']<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">? PAS 3: Assegura\u2019t que s\u2019hi arriba despr\u00e9s de &#8220;Comprovar&#8221;<\/h2>\n\n\n\n<p>A <code>salvar_pregunta_resposta_actual.php<\/code>, assegura\u2019t que, despr\u00e9s de processar la resposta, s\u2019hi estableixi la sessi\u00f3 i es redirigeixi a <code>index.php<\/code>. Exemple:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">phpCopiaModifica<code>session_start();\n$_SESSION['resposta_session'] = $textQueVolsFerSonar;\n\n\/\/ Despr\u00e9s de guardar la resposta\nheader(\"Location: ..\/stud\/index.php\");\nexit;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">? PAS 4: Captura la tecla RETURN (Enter)<\/h2>\n\n\n\n<p>A <code>index.php<\/code>, pots capturar la tecla <code>Enter<\/code> per simular el clic del bot\u00f3 &#8220;Comprovar&#8221;. Afegeix aquest JavaScript:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopiaModifica<code>&lt;script&gt;\ndocument.addEventListener(\"keydown\", function(event) {\n    if (event.key === \"Enter\") {\n        const boto = document.getElementById(\"botoComprovar\");\n        if (boto) boto.click();\n    }\n});\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>Assegura\u2019t que el bot\u00f3 &#8220;Comprovar&#8221; tingui l\u2019<code>id=\"botoComprovar\"<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopiaModifica<code>&lt;button id=\"botoComprovar\"&gt;Comprovar&lt;\/button&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 Resultat final:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El bot\u00f3 \u201cComprovar\u201d (o la tecla Enter) envia la resposta.<\/li>\n\n\n\n<li>El servidor guarda la resposta a <code>$_SESSION['resposta_session']<\/code>.<\/li>\n\n\n\n<li><code>index.php<\/code> recull la resposta i la fa sonar amb veu autom\u00e0ticament.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">? Extra (opcional):<\/h3>\n\n\n\n<p>Si vols evitar que soni dues vegades al recarregar, pots:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fer <code>unset($_SESSION['resposta_session'])<\/code> despr\u00e9s de generar el div.<\/li>\n\n\n\n<li>O afegir un flag per controlar-ho via JS o sessi\u00f3.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Objectiu Fer sonar $_SESSION[&#8216;resposta_session&#8217;] amb speechSynthesis en dues situacions: ? Estructura recomanada Assumim que: ? PAS 1: Afegeix el text a index.php Al final de index.php, afegeix aix\u00f2: ? Afegeix un div ocult amb la resposta phpCopiaModifica&lt;?php if (!empty($_SESSION[&#8216;resposta_session&#8217;])) { &hellip; <a href=\"http:\/\/www.beseit.net\/?p=16294\">Continua llegint <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":3170,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-16294","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bloc-de-notes"],"_links":{"self":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16294"}],"version-history":[{"count":1,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16294\/revisions"}],"predecessor-version":[{"id":16295,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/posts\/16294\/revisions\/16295"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=\/wp\/v2\/media\/3170"}],"wp:attachment":[{"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16294"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.beseit.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}