Personalización del código ResponsiveVoice

ResponsiveVoice es una popular herramienta API de texto de voz gratuita que permite a los usuarios agregar texto de lectura, palabras y fragmentos a su sitio web. Pero, ¿cómo personalizar estos códigos para que funcionen de la manera que desea?

ResponsiveVoice a pesar de ser gratuito, tiene un plan pago que lo respalda. El gran problema es que los usuarios gratuitos no reciben atención. Ninguna documentación de la API actualizará lo que proporciona el servicio.

Al tratar de usar y editar varios códigos, no pude hacer que funcionara como yo quería. Afortunadamente, con la ayuda de AI, después de varias horas, logré editar de la manera que quería con JavaScript.

Cómo agregar ResponsiveVoice a su sitio web

Para agregar ResponsiveVoice a su sitio web, debe crear una cuenta y generar una clave API para su sitio web. Luego simplemente coloque el siguiente Script en el encabezado de su proyecto.

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

Después de agregar este script, puede crear otro javascript para que funcione en su sitio. Puede llamar a la API para pronunciar el texto de su elección, utilizando cadenas, variables o textos predeterminados.

Es posible hacer que el Script pronuncie etiquetas específicas, texto seleccionado o incluso toda la página. Para eso, solo necesita crear el javascript y llamar a responsivevoice con el siguiente código:

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

Agregar parámetros en responsiveVoice.Speak

Para personalizar el código de ResponsiveVoice, puede usar las opciones de configuración disponibles en la documentación de ResponsiveVoice. Algunas de las opciones más comunes incluyen:

1. voz: Le permite especificar la voz que se utilizará para reproducir el texto (el idioma). Puede elegir entre las voces disponibles para el idioma seleccionado.
2. Velocidad: Le permite controlar la velocidad del habla. Los valores más altos darán como resultado un habla más rápida, mientras que los valores más bajos darán como resultado un habla más lenta.
3. tono: Le permite controlar el tono del discurso. Los valores más altos darán como resultado un tono de voz más alto, mientras que los valores más bajos darán como resultado un tono de voz más bajo.
4. volumen: Le permite controlar el volumen de voz. Los valores más altos darán como resultado un habla más fuerte, mientras que los valores más bajos darán como resultado un habla más baja.

Para usar estas opciones, simplemente agréguelas como parámetros al llamar a la función responsiveVoice.speak().

Agregar botón para pronunciar un elemento HTML

En caso de que desee pronunciar el contenido de una etiqueta, puede hacerlo con javascript a continuación. En este caso, el Script agrega un botón en cada

 del sitio, elimina algunas etiquetas HTML con expresiones regulares (en mi caso y otros) y pronunciar el contenido de la etiqueta
 . 




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



El código anterior comienza agregando los botones y obteniendo las etiquetas.
 , luego configura un evento para que si se hace clic en el botón, obtenga el contenido de la etiqueta
 junto con HTML, eliminará usando "reemplazar" las etiquetas y otras etiquetas, incluido el contenido del propio botón. 




Luego, utilizando la variable de texto limpio, realiza la pronunciación del idioma japonés a una velocidad de 0,8. El código al final es necesario para crear los botones. 



Los códigos de este artículo se pueden añadir entre dentro de la etiqueta principal o del cuerpo de su sitio. 



Leer el contenido de la pantalla seleccionada






De forma nativa, ResponsiveVoice tiene una opción para habilitar la lectura del contenido de la página seleccionada. Puede usar su propio Javascript y personalizarlo. En mi caso solo hice pronunciar letras japonesas. 



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 estos códigos te ayuden a resolver tu problema con ResponsiveVoice. Si necesita personalizar aún más el código, solo solicite ayuda a una Inteligencia Artificial.