{"id":3951,"date":"2022-12-29T18:21:23","date_gmt":"2022-12-29T18:21:23","guid":{"rendered":"http:\/\/kevinbk.com\/?p=3951"},"modified":"2022-12-29T18:37:30","modified_gmt":"2022-12-29T18:37:30","slug":"customizando-codigo-do-responsivevoice","status":"publish","type":"post","link":"https:\/\/kevinbk.com\/it\/customizing-responsivevoice-code\/","title":{"rendered":"Personalizzazione del codice ResponsiveVoice"},"content":{"rendered":"

ResponsiveVoice \u00e8 un popolare strumento API Speech Text gratuito che consente agli utenti di aggiungere testo di lettura, parole e frammenti al proprio sito web. Ma come personalizzare questi codici per eseguire nel modo desiderato? <\/p>\n\n\n\n

ResponsiveVoice nonostante sia gratuito, ha un piano a pagamento che lo supporta. Il grosso problema \u00e8 che gli utenti gratuiti non ricevono attenzione. Nessuna delle due documentazioni API aggiorner\u00e0 ci\u00f2 che il servizio fornisce. <\/p>\n\n\n\n

Durante il tentativo di utilizzare e modificare vari codici, non sono riuscito a farlo funzionare nel modo desiderato. Fortunatamente con l'aiuto dell'intelligenza artificiale, dopo diverse ore, sono riuscito a modificare come volevo con JavaScript. <\/p>\n\n\n\n

Come aggiungere ResponsiveVoice al tuo sito web<\/h2>\n\n\n\n

Per aggiungere ResponsiveVoice al tuo sito web, devi creare un account e generare una chiave API per il tuo sito web. Quindi inserisci il seguente script nell'intestazione del tuo progetto. <\/p>\n\n\n\n

<script src=\"https:\/\/code.responsivevoice.org\/responsivevoice.js?key=YOUR_UNIQUE_KEY\"><\/script><\/code><\/pre>\n\n\n\n
Dopo aver aggiunto questo script, puoi creare altri javascript per farlo funzionare sul tuo sito. Puoi chiamare l'API per pronunciare il testo che preferisci, utilizzando stringhe, variabili o testi predeterminati. <\/p>\n\n\n\n
\u00c8 possibile fare in modo che lo Script pronunci tag specifici, testo selezionato o anche l'intera pagina. Per questo, devi solo creare il javascript e chiamare responsivevoice con il seguente codice: <\/p>\n\n\n\n
responsiveVoice.speak(\"text-or-var\");<\/code><\/pre>\n\n\n\n
Aggiunta di parametri in responsiveVoice.Speak<\/h2>\n\n\n\n
Per personalizzare il codice di ResponsiveVoice, puoi utilizzare le opzioni di configurazione disponibili nella documentazione di ResponsiveVoice. Alcune delle opzioni pi\u00f9 comuni includono:<\/p>\n\n\n\n
    \n
  1. voce<\/code>: Consente di specificare la voce che verr\u00e0 utilizzata per riprodurre il testo (la lingua). Puoi scegliere tra le voci disponibili per la lingua selezionata.<\/li>\n\n\n\n
  2. Vota<\/code>: consente di controllare la velocit\u00e0 del parlato. Valori pi\u00f9 alti si tradurranno in un parlato pi\u00f9 veloce, mentre valori pi\u00f9 bassi si tradurranno in un parlato pi\u00f9 lento.<\/li>\n\n\n\n
  3. intonazione<\/code>: consente di controllare il tono del parlato. Valori pi\u00f9 alti produrranno discorsi con tono pi\u00f9 alto, mentre valori pi\u00f9 bassi produrranno discorsi con tono pi\u00f9 basso.<\/li>\n\n\n\n
  4. volume<\/code>: consente di controllare il volume della conversazione. Valori pi\u00f9 alti si tradurranno in un parlato pi\u00f9 forte, mentre valori pi\u00f9 bassi si tradurranno in un parlato pi\u00f9 basso.<\/li>\n<\/ol>\n\n\n\n
    Per utilizzare queste opzioni, basta aggiungerle come parametri quando si chiama la funzione responsiveVoice.speak()<\/code>.<\/p>\n\n\n
    \n
    \"-\"<\/figure><\/div>\n\n\n
    Aggiunta di Button per pronunciare un elemento HTML<\/h2>\n\n\n\n
    Nel caso in cui desideri pronunciare il contenuto di un tag, puoi farlo con javascript di seguito. In questo caso lo Script aggiunge un pulsante su ciascuno
     del sito, rimuove alcuni tag HTML con regex (nel mio caso e altri) e pronunciare il contenuto del tag
     . <\/p>\n\n\n\n
    function adicionarBotoesPlay() {\n  \/\/ Obt\u00e9m todas as tags <pre> da p\u00e1gina\n  var tagsPre = document.getElementsByTagName(\"pre\");\n  \/\/ Para cada tag <pre>...\n  for (var i = 0; i < tagsPre.length; i++) {\n    \/\/ Cria um novo bot\u00e3o de play\n    var botaoPlay = document.createElement(\"button\");\n\t\tbotaoPlay.setAttribute(\"class\", \"playbt\");\n    botaoPlay.innerHTML = \"\u25b7\";\n    \/\/ Adiciona o bot\u00e3o de play \u00e0 tag <pre>\n    tagsPre[i].appendChild(botaoPlay);\n    \/\/ Configura o evento de clique do bot\u00e3o para chamar a fun\u00e7\u00e3o de pron\u00fancia do ResponsiveVoice\n    botaoPlay.addEventListener(\"click\", function() { \n      \/\/ Obt\u00e9m o conte\u00fado da tag <pre>\n      \/\/ Obt\u00e9m o elemento HTML que voc\u00ea deseja selecionar\n      var conteudoPre = this.parentNode.innerHTML;\n      \/\/ Substitui todas as tags <rt> e seu conte\u00fado pelo texto vazio\n      var textoSemRt = conteudoPre.replace(\/<rt>([\\s\\S]*?)<\\\/rt>\/g, \"\").replace(\/<button[^>]*>.*?<\\\/button>\/g, \"\");\n\t\t\tvar textoSemHtml = textoSemRt.replace(\/<[^>]*>\/g, \"\");\n      \/\/ Solicita a pron\u00fancia do conte\u00fado sem as tags <rt> pelo ResponsiveVoice Text To Speech\n\t\t\t\/\/ Cria um novo elemento de texto com o texto selecionado\n\t\t\tresponsiveVoice.speak(\" \");\n \u00a0 \u00a0 \u00a0responsiveVoice.speak(textoSemHtml, \"Japanese Female\", {\n\t\t  rate: 0.8,\n  \t\tonend: function() {\n    \/\/ Executa alguma a\u00e7\u00e3o depois que a pron\u00fancia \u00e9 conclu\u00edda\n  }\n});\n    });\n  }\n}\n\/\/ Executa a fun\u00e7\u00e3o quando a p\u00e1gina terminar de carregar\nwindow.addEventListener(\"load\", adicionarBotoesPlay);<\/code><\/pre>\n\n\n\n
    Il codice sopra inizia aggiungendo i pulsanti e ottenendo i tag
     , quindi configura un evento in modo che, se si fa clic sul pulsante, ottenga il contenuto del tag
     insieme all'HTML, rimuover\u00e0 utilizzando "sostituisci" i tag e altri tag, compreso il contenuto del pulsante stesso. <\/p>\n\n\n\n
    Quindi, utilizzando la variabile di testo pulito, esegue la pronuncia della lingua giapponese a una velocit\u00e0 di 0,8. Il codice alla fine \u00e8 necessario per creare i pulsanti. <\/p>\n\n\n\n
    I codici in questo articolo possono essere aggiunti tra all'interno del tag body o head del tuo sito web. <\/pre>\n\n\n\n
    Leggi il contenuto dello schermo selezionato<\/h2>\n\n\n\n
    Nativamente, ResponsiveVoice ha un'opzione per abilitare la lettura del contenuto della pagina selezionata. Puoi usare il tuo Javascript e personalizzarlo. Nel mio caso ho fatto pronunciare solo lettere giapponesi. <\/p>\n\n\n\n
    responsiveVoice.setDefaultVoice(\"Japanese Female\");\ndocument.addEventListener(\"mouseup\", function() {\n  \/\/ Obt\u00e9m o texto selecionado pelo usu\u00e1rio\n  var selecao = window.getSelection().toString();\n  \/\/ Verifica se o texto selecionado n\u00e3o est\u00e1 vazio\n  if (selecao) {\n    \/\/ Verifica se o texto selecionado s\u00f3 cont\u00e9m caracteres japoneses\n    var caracteresJaponeses = \/^[\\u3041-\\u3096\\u30A0-\\u30FF\\u4E00-\\u9FFF]+$\/;\n    if (caracteresJaponeses.test(selecao)) {\n      \/\/ Solicita a pron\u00fancia do texto selecionado pelo ResponsiveVoice Text To Speech\n      responsiveVoice.speak(selecao, \"Japanese Female\", {\n        onend: function() {\n          \/\/ Executa alguma a\u00e7\u00e3o depois que a pron\u00fancia \u00e9 conclu\u00edda\n}\n      });\n    }\n  }\n});<\/code><\/pre>\n\n\n\n
      Spero che questi codici ti aiutino a risolvere il tuo problema con ResponsiveVoice. Se hai bisogno di personalizzare ulteriormente il codice, chiedi aiuto a un'Intelligenza Artificiale. <\/p>","protected":false},"excerpt":{"rendered":"
    ResponsiveVoice \u00e8 un popolare strumento API Speech Text gratuito che consente agli utenti di farlo<\/p>","protected":false},"author":1,"featured_media":3832,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/kevinbk.com\/wp-content\/uploads\/2022\/11\/javascript.jpg","_links":{"self":[{"href":"https:\/\/kevinbk.com\/it\/wp-json\/wp\/v2\/posts\/3951"}],"collection":[{"href":"https:\/\/kevinbk.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kevinbk.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/it\/wp-json\/wp\/v2\/comments?post=3951"}],"version-history":[{"count":4,"href":"https:\/\/kevinbk.com\/it\/wp-json\/wp\/v2\/posts\/3951\/revisions"}],"predecessor-version":[{"id":3956,"href":"https:\/\/kevinbk.com\/it\/wp-json\/wp\/v2\/posts\/3951\/revisions\/3956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/it\/wp-json\/wp\/v2\/media\/3832"}],"wp:attachment":[{"href":"https:\/\/kevinbk.com\/it\/wp-json\/wp\/v2\/media?parent=3951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kevinbk.com\/it\/wp-json\/wp\/v2\/categories?post=3951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}