Customizando Código do ResponsiveVoice

O ResponsiveVoice é uma ferramenta de API de pronúncia de texto (Speech Text) famosa e gratuita, que permite os usuários adicionar leitura de texto, palavras e trechos em seu site. Mas como customizar esses códigos para realizar da forma que deseja?

ResponsiveVoice apesar de ser gratuito, tem um plano pago, que oferece suporte. O grande problema é que os usuários gratuitos não recebem atenção. Nem documentação de API atualizara o serviço fornece.

Ao tentar usar e editar vários códigos, não consegui fazer funcionar da forma que desejo. Felizmente com a ajuda da IA, depois de várias horas, consegui com JavaScript editar da forma que desejo.

Como adicionar o ResponsiveVoice no seu website

Para adicionar o ResponsiveVoice no seu site, você precisa criar uma conta e gerar uma chave de API para seu website. Depois basta colocar o seguinte Script no cabeçalho de seu projeto.

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

Após adicionar esse Script, você pode criar outros javascript para fazer funcionar em seu site. Você pode chamar a API para pronunciar um texto de sua escolha, usando strings, variáveis ou textos predeterminados.

É possível fazer o Script pronunciar tags específicas, texto selecionado ou até toda página. Para isso, você só precisa criar o javascript e chamar o responsivevoice com o seguinte código:

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

Adicionando parâmetros no responsiveVoice.Speak

Para customizar o código do ResponsiveVoice, você pode usar as opções de configuração disponíveis na documentação do ResponsiveVoice. Algumas das opções mais comuns incluem:

1. voice: permite especificar a voz que será usada para reproduzir o texto (o idioma). Você pode escolher entre as vozes disponíveis para o idioma selecionado.
2. rate: permite controlar a velocidade da fala. Valores mais altos resultarão em fala mais rápida, enquanto valores mais baixos resultarão em fala mais lenta.
3. pitch: permite controlar o tom da fala. Valores mais altos resultarão em fala mais aguda, enquanto valores mais baixos resultarão em fala mais grave.
4. volume: permite controlar o volume da fala. Valores mais altos resultarão em fala mais alta, enquanto valores mais baixos resultarão em fala mais baixa.

Para usar essas opções, basta adicioná-las como parâmetros ao chamar a função responsiveVoice.speak().

Adicionando Botão para pronunciar um elemento HTML

Caso deseja pronunciar o conteúdo de uma tag, você pode fazer isso com javascript abaixo. Nesse caso o Script adiciona um botão em cada <pre> do site, remove com regex algumas tags em HTML (no meu caso <rt> e demais) e pronunciá o conteúdo da tag <pre>.

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);

O código acima começa adicionando os botões e pegando as tags <pre>, depois configura um evento para caso aconteça um clique no botão, ele vai obter o conteúdo da tag <pre> juntamente com HTML, vai remover usando “replace” as tags <rt> e demais tags, incluindo o conteúdo do próprio botão.

Depois, usando a variável do texto limpo, ele realiza a pronúncia no idioma japonês em uma velocidade de 0.8. O código no final é necessário para criação dos botões.

Os códigos desse artigo podem ser adicionados entre <script></script> dentro da tag body ou head do seu site. 

Ler conteúdo selecionado da tela

Nativamente, o ResponsiveVoice tem uma opção para ativar a leitura do conteúdo selecionado da página. Você pode usar seu próprio Javascript e customizar. No meu caso eu fiz com que apenas letras japonesas fossem pronunciadas.

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
}
      });
    }
  }
});

Espero que esses códigos ajudem você a resolver seu problema com ResponsiveVoice. Caso precise customizar mais ainda o código, basta pedir ajuda a uma Inteligência Artificial.