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:
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.
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.
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.
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.
이 옵션을 사용하려면 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
do site, remove com regex algumas tags em HTML (no meu caso