{"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\/en\/customizing-responsivevoice-code\/","title":{"rendered":"Customizing ResponsiveVoice Code"},"content":{"rendered":"

ResponsiveVoice is a popular free Speech Text API tool that allows users to add reading text, words and snippets to their website. But how to customize these codes to perform the way you want? <\/p>\n\n\n\n

ResponsiveVoice despite being free, has a paid plan that supports it. The big problem is that free users don't get attention. Neither API documentation will update what the service provides. <\/p>\n\n\n\n

When trying to use and edit various codes, I couldn't get it to work the way I want. Fortunately with the help of AI, after several hours, I managed to edit the way I want with JavaScript. <\/p>\n\n\n\n

How to add ResponsiveVoice to your website<\/h2>\n\n\n\n

To add ResponsiveVoice to your website, you need to create an account and generate an API key for your website. Then just put the following Script in the header of your project. <\/p>\n\n\n\n

<script src=\"https:\/\/code.responsivevoice.org\/responsivevoice.js?key=YOUR_UNIQUE_KEY\"><\/script><\/code><\/pre>\n\n\n\n
After adding this Script, you can create other javascript to make it work on your site. You can call the API to pronounce text of your choice, using strings, variables or predetermined texts. <\/p>\n\n\n\n
It is possible to make the Script pronounce specific tags, selected text or even the whole page. For that, you just need to create the javascript and call the responsivevoice with the following code: <\/p>\n\n\n\n
responsiveVoice.speak(\"text-or-var\");<\/code><\/pre>\n\n\n\n
Adding parameters in responsiveVoice.Speak<\/h2>\n\n\n\n
To customize the ResponsiveVoice code, you can use the configuration options available in the ResponsiveVoice documentation. Some of the most common options include:<\/p>\n\n\n\n
    \n
  1. voice<\/code>: Lets you specify the voice that will be used to play the text (the language). You can choose from available voices for the selected language.<\/li>\n\n\n\n
  2. rate<\/code>: Allows you to control the speech rate. Higher values will result in faster speech, while lower values will result in slower speech.<\/li>\n\n\n\n
  3. pitch<\/code>: Allows you to control the speech pitch. Higher values will result in higher-pitched speech, while lower values will result in lower-pitched speech.<\/li>\n\n\n\n
  4. volume<\/code>: Allows you to control the speaking volume. Higher values will result in louder speech, while lower values will result in quieter speech.<\/li>\n<\/ol>\n\n\n\n
    To use these options, simply add them as parameters when calling the function responsiveVoice.speak()<\/code>.<\/p>\n\n\n
    \n
    \"-\"<\/figure><\/div>\n\n\n
    Adding Button to pronounce an HTML element<\/h2>\n\n\n\n
    In case you want to pronounce the content of a tag, you can do that with javascript below. In this case the Script adds a button on each
     of the site, removes some HTML tags with regex (in my case and others) and pronounce the content of the 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
    The above code starts by adding the buttons and getting the tags
     , then configures an event so that if the button is clicked, it will get the content of the tag
     together with HTML, will remove using \u201creplace\u201d the tags and other tags, including the content of the button itself. <\/p>\n\n\n\n
    Then, using the clean text variable, it performs the Japanese language pronunciation at a speed of 0.8. The code at the end is needed to create the buttons. <\/p>\n\n\n\n
    The codes for this article can be added between inside your site's body or head tag. <\/pre>\n\n\n\n
    Read selected screen content<\/h2>\n\n\n\n
    Natively, ResponsiveVoice has an option to enable reading selected page content. You can use your own Javascript and customize. In my case I made only Japanese letters pronounced. <\/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
      Hope these codes help you to solve your problem with ResponsiveVoice. If you need to further customize the code, just ask an Artificial Intelligence for help. <\/p>","protected":false},"excerpt":{"rendered":"
    ResponsiveVoice is a popular free Speech Text API tool that allows users to<\/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\/en\/wp-json\/wp\/v2\/posts\/3951"}],"collection":[{"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/comments?post=3951"}],"version-history":[{"count":4,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/posts\/3951\/revisions"}],"predecessor-version":[{"id":3956,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/posts\/3951\/revisions\/3956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/media\/3832"}],"wp:attachment":[{"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/media?parent=3951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/categories?post=3951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}