Pular para o conteúdo
Kevinbk
  • Artigos
  • Loja
  • Cursos
  • Fórum
  • games
  • 0
  • 0
  • EN FR DE IT KO PT ES
  • Entre em contato
Kevinbk
  • 0
  • 0
    • Artigos
    • Loja
    • Cursos
    • Fórum
    • games
  • EN FR DE IT KO PT ES
  • Entre em contato

Customizando Código do ResponsiveVoice

  • Todos os blogs
  • Conhecimento
  • Customizando Código do ResponsiveVoice
  • 13 de outubro de 2025 por
    Customizando Código do ResponsiveVoice
    Kevinbk
    | Nenhum comentário ainda

    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.

    em Conhecimento
    Faça login para deixar um comentário
    Como converter SRT para Texto com Regex e Javascript
    © Kevinbk - Todos os Direitos Reservados - Termos & Política