Customizing ResponsiveVoice Code

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?

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.

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.

How to add ResponsiveVoice to your website

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.

<script src="https://code.responsivevoice.org/responsivevoice.js?key=YOUR_UNIQUE_KEY"></script>

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.

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:

responsiveVoice.speak("text-or-var");

Adding parameters in responsiveVoice.Speak

To customize the ResponsiveVoice code, you can use the configuration options available in the ResponsiveVoice documentation. Some of the most common options include:

1. voice: 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.
2. rate: Allows you to control the speech rate. Higher values will result in faster speech, while lower values will result in slower speech.
3. pitch: Allows you to control the speech pitch. Higher values will result in higher-pitched speech, while lower values will result in lower-pitched speech.
4. volume: Allows you to control the speaking volume. Higher values will result in louder speech, while lower values will result in quieter speech.

To use these options, simply add them as parameters when calling the function responsiveVoice.speak().

Adding Button to pronounce an HTML element

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
 . 

function adicionarBotoesPlay() {
  // Obtém todas as tags <pre> da página
  var tagsPre = document.getElementsByTagName("pre");
  // Para cada tag <pre>...
  for (var i = 0; i < tagsPre.length; i++) {
    // Cria um novo botão de play
    var botaoPlay = document.createElement("button");
		botaoPlay.setAttribute("class", "playbt");
    botaoPlay.innerHTML = "▷";
    // Adiciona o botão de play à tag <pre>
    tagsPre[i].appendChild(botaoPlay);
    // Configura o evento de clique do botão para chamar a função de pronúncia do ResponsiveVoice
    botaoPlay.addEventListener("click", function() { 
      // Obtém o conteúdo da tag <pre>
      // Obtém o elemento HTML que você deseja selecionar
      var conteudoPre = this.parentNode.innerHTML;
      // Substitui todas as tags <rt> e seu conteúdo pelo texto vazio
      var textoSemRt = conteudoPre.replace(/<rt>([\s\S]*?)<\/rt>/g, "").replace(/<button[^>]*>.*?<\/button>/g, "");
			var textoSemHtml = textoSemRt.replace(/<[^>]*>/g, "");
      // Solicita a pronúncia do conteúdo sem as tags <rt> pelo ResponsiveVoice Text To Speech
			// Cria um novo elemento de texto com o texto selecionado
			responsiveVoice.speak(" ");
      responsiveVoice.speak(textoSemHtml, "Japanese Female", {
		  rate: 0.8,
  		onend: function() {
    // Executa alguma ação depois que a pronúncia é concluída
  }
});
    });
  }
}
// Executa a função quando a página terminar de carregar
window.addEventListener("load", adicionarBotoesPlay);
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 “replace” the tags and other tags, including the content of the button itself. 

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. 
The codes for this article can be added between inside your site's body or head tag. 
Read selected screen content



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. 
responsiveVoice.setDefaultVoice("Japanese Female");
document.addEventListener("mouseup", function() {
  // Obtém o texto selecionado pelo usuário
  var selecao = window.getSelection().toString();
  // Verifica se o texto selecionado não está vazio
  if (selecao) {
    // Verifica se o texto selecionado só contém caracteres japoneses
    var caracteresJaponeses = /^[\u3041-\u3096\u30A0-\u30FF\u4E00-\u9FFF]+$/;
    if (caracteresJaponeses.test(selecao)) {
      // Solicita a pronúncia do texto selecionado pelo ResponsiveVoice Text To Speech
      responsiveVoice.speak(selecao, "Japanese Female", {
        onend: function() {
          // Executa alguma ação depois que a pronúncia é concluída
}
      });
    }
  }
});
 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.