{"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\/pl\/customizando-codigo-do-responsivevoice\/","title":{"rendered":"Dostosowywanie kodu ResponsiveVoice"},"content":{"rendered":"

O ResponsiveVoice \u00e9 uma ferramenta de API de pron\u00fancia de texto (Speech Text) famosa e gratuita, que permite os usu\u00e1rios adicionar leitura de texto, palavras e trechos em seu site. Mas como customizar esses c\u00f3digos para realizar da forma que deseja? <\/p>\n\n\n\n

ResponsiveVoice apesar de ser gratuito, tem um plano pago, que oferece suporte. O grande problema \u00e9 que os usu\u00e1rios gratuitos n\u00e3o recebem aten\u00e7\u00e3o. Nem documenta\u00e7\u00e3o de API atualizara o servi\u00e7o fornece. <\/p>\n\n\n\n

Ao tentar usar e editar v\u00e1rios c\u00f3digos, n\u00e3o consegui fazer funcionar da forma que desejo. Felizmente com a ajuda da IA, depois de v\u00e1rias horas, consegui com JavaScript editar da forma que desejo. <\/p>\n\n\n\n

Como adicionar o ResponsiveVoice no seu website<\/h2>\n\n\n\n

Para adicionar o ResponsiveVoice no seu site, voc\u00ea precisa criar uma conta e gerar uma chave de API para seu website. Depois basta colocar o seguinte Script no cabe\u00e7alho de seu projeto. <\/p>\n\n\n\n

<script src=\"https:\/\/code.responsivevoice.org\/responsivevoice.js?key=YOUR_UNIQUE_KEY\"><\/script><\/code><\/pre>\n\n\n\n
Ap\u00f3s adicionar esse Script, voc\u00ea pode criar outros javascript para fazer funcionar em seu site. Voc\u00ea pode chamar a API para pronunciar um texto de sua escolha, usando strings, vari\u00e1veis ou textos predeterminados. <\/p>\n\n\n\n
\u00c9 poss\u00edvel fazer o Script pronunciar tags espec\u00edficas, texto selecionado ou at\u00e9 toda p\u00e1gina. Para isso, voc\u00ea s\u00f3 precisa criar o javascript e chamar o responsivevoice com o seguinte c\u00f3digo: <\/p>\n\n\n\n
responsiveVoice.speak(\"text-or-var\");<\/code><\/pre>\n\n\n\n
Adicionando par\u00e2metros no responsiveVoice.Speak<\/h2>\n\n\n\n
Para customizar o c\u00f3digo do ResponsiveVoice, voc\u00ea pode usar as op\u00e7\u00f5es de configura\u00e7\u00e3o dispon\u00edveis na documenta\u00e7\u00e3o do ResponsiveVoice. Algumas das op\u00e7\u00f5es mais comuns incluem:<\/p>\n\n\n\n
    \n
  1. voice<\/code>: permite especificar a voz que ser\u00e1 usada para reproduzir o texto (o idioma). Voc\u00ea pode escolher entre as vozes dispon\u00edveis para o idioma selecionado.<\/li>\n\n\n\n
  2. rate<\/code>: permite controlar a velocidade da fala. Valores mais altos resultar\u00e3o em fala mais r\u00e1pida, enquanto valores mais baixos resultar\u00e3o em fala mais lenta.<\/li>\n\n\n\n
  3. pitch<\/code>: permite controlar o tom da fala. Valores mais altos resultar\u00e3o em fala mais aguda, enquanto valores mais baixos resultar\u00e3o em fala mais grave.<\/li>\n\n\n\n
  4. volume<\/code>: permite controlar o volume da fala. Valores mais altos resultar\u00e3o em fala mais alta, enquanto valores mais baixos resultar\u00e3o em fala mais baixa.<\/li>\n<\/ol>\n\n\n\n
    Para usar essas op\u00e7\u00f5es, basta adicion\u00e1-las como par\u00e2metros ao chamar a fun\u00e7\u00e3o responsiveVoice.speak()<\/code>.<\/p>\n\n\n
    \n
    \"-\"<\/figure><\/div>\n\n\n
    Adicionando Bot\u00e3o para pronunciar um elemento HTML<\/h2>\n\n\n\n
    Caso deseja pronunciar o conte\u00fado de uma tag, voc\u00ea pode fazer isso com javascript abaixo. Nesse caso o Script adiciona um bot\u00e3o em cada 
     do site, remove com regex algumas tags em HTML (no meu caso  e demais) e pronunci\u00e1 o conte\u00fado da 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
    O c\u00f3digo acima come\u00e7a adicionando os bot\u00f5es e pegando as tags 
    , depois configura um evento para caso aconte\u00e7a um clique no bot\u00e3o, ele vai obter o conte\u00fado da tag 
     juntamente com HTML, vai remover usando \u201creplace\u201d as tags  e demais tags, incluindo o conte\u00fado do pr\u00f3prio bot\u00e3o. <\/p>\n\n\n\n
    Depois, usando a vari\u00e1vel do texto limpo, ele realiza a pron\u00fancia no idioma japon\u00eas em uma velocidade de 0.8. O c\u00f3digo no final \u00e9 necess\u00e1rio para cria\u00e7\u00e3o dos bot\u00f5es. <\/p>\n\n\n\n
    Kody tego artyku\u0142u mo\u017cna doda\u0107 mi\u0119dzy znacznikami  wewn\u0105trz tagu body albo head na swojej stronie. <\/pre>\n\n\n\n
    Ler conte\u00fado selecionado da tela<\/h2>\n\n\n\n
    Nativamente, o ResponsiveVoice tem uma op\u00e7\u00e3o para ativar a leitura do conte\u00fado selecionado da p\u00e1gina. Voc\u00ea pode usar seu pr\u00f3prio Javascript e customizar. No meu caso eu fiz com que apenas letras japonesas fossem pronunciadas. <\/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
      Espero que esses c\u00f3digos ajudem voc\u00ea a resolver seu problema com ResponsiveVoice. Caso precise customizar mais ainda o c\u00f3digo, basta pedir ajuda a uma Intelig\u00eancia Artificial. <\/p>","protected":false},"excerpt":{"rendered":"
    O ResponsiveVoice to popularne i bezp\u0142atne narz\u0119dzie do API odczytu tekstu na g\u0142os, kt\u00f3re umo\u017cliwia u\u017cytkownikom<\/p>","protected":false},"author":1,"featured_media":3832,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"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\/pl\/wp-json\/wp\/v2\/posts\/3951"}],"collection":[{"href":"https:\/\/kevinbk.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kevinbk.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/pl\/wp-json\/wp\/v2\/comments?post=3951"}],"version-history":[{"count":4,"href":"https:\/\/kevinbk.com\/pl\/wp-json\/wp\/v2\/posts\/3951\/revisions"}],"predecessor-version":[{"id":3956,"href":"https:\/\/kevinbk.com\/pl\/wp-json\/wp\/v2\/posts\/3951\/revisions\/3956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/pl\/wp-json\/wp\/v2\/media\/3832"}],"wp:attachment":[{"href":"https:\/\/kevinbk.com\/pl\/wp-json\/wp\/v2\/media?parent=3951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kevinbk.com\/pl\/wp-json\/wp\/v2\/categories?post=3951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}