Personnalisation du code ResponsiveVoice

ResponsiveVoice est un outil gratuit et populaire de l'API Speech Text qui permet aux utilisateurs d'ajouter du texte de lecture, des mots et des extraits à leur site Web. Mais comment personnaliser ces codes pour qu'ils fonctionnent comme vous le souhaitez ?

ResponsiveVoice, bien qu'il soit gratuit, a un plan payant qui le prend en charge. Le gros problème est que les utilisateurs gratuits n'attirent pas l'attention. Aucune documentation de l'API ne mettra à jour ce que le service fournit.

Lorsque j'essayais d'utiliser et de modifier divers codes, je n'arrivais pas à le faire fonctionner comme je le souhaitais. Heureusement avec l'aide de l'IA, après plusieurs heures, j'ai réussi à éditer comme je veux avec JavaScript.

Comment ajouter ResponsiveVoice à votre site Web

Pour ajouter ResponsiveVoice à votre site Web, vous devez créer un compte et générer une clé API pour votre site Web. Ensuite, placez simplement le script suivant dans l'en-tête de votre projet.

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

Après avoir ajouté ce script, vous pouvez créer un autre javascript pour le faire fonctionner sur votre site. Vous pouvez appeler l'API pour prononcer le texte de votre choix, en utilisant des chaînes, des variables ou des textes prédéterminés.

Il est possible de faire en sorte que le script prononce des balises spécifiques, du texte sélectionné ou même la page entière. Pour cela, il vous suffit de créer le javascript et d'appeler le responsivevoice avec le code suivant :

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

Ajout de paramètres dans responsiveVoice.Speak

Pour personnaliser le code ResponsiveVoice, vous pouvez utiliser les options de configuration disponibles dans la documentation ResponsiveVoice. Certaines des options les plus courantes incluent :

1. voix: permet de spécifier la voix qui sera utilisée pour lire le texte (la langue). Vous pouvez choisir parmi les voix disponibles pour la langue sélectionnée.
2. fréquence: Vous permet de contrôler le débit de parole. Des valeurs plus élevées entraîneront une parole plus rapide, tandis que des valeurs inférieures entraîneront une parole plus lente.
3. terrain: Vous permet de contrôler la hauteur de la parole. Des valeurs plus élevées entraîneront un discours plus aigu, tandis que des valeurs inférieures entraîneront un discours plus grave.
4. volume: Vous permet de contrôler le volume d'élocution. Des valeurs plus élevées se traduiront par un discours plus fort, tandis que des valeurs inférieures se traduiront par un discours plus silencieux.

Pour utiliser ces options, ajoutez-les simplement en tant que paramètres lors de l'appel de la fonction responsiveVoice.speak().

Ajout d'un bouton pour prononcer un élément HTML

Si vous souhaitez prononcer le contenu d'un tag, vous pouvez le faire avec le javascript ci-dessous. Dans ce cas, le script ajoute un bouton sur chaque

 du site, supprime certaines balises HTML avec regex (dans mon cas et autres) et prononcer le contenu de la balise
 . 

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);
Le code ci-dessus commence par ajouter les boutons et obtenir les balises
 , puis configure un événement pour que si le bouton est cliqué, il obtienne le contenu de la balise
 avec HTML, supprimera en utilisant "remplacer" les balises et d'autres balises, y compris le contenu du bouton lui-même. 

Ensuite, en utilisant la variable de texte propre, il effectue la prononciation de la langue japonaise à une vitesse de 0,8. Le code à la fin est nécessaire pour créer les boutons. 
Les codes de cet article peuvent être ajoutés entre à l'intérieur de la balise body ou head de votre site. 
Lire le contenu de l'écran sélectionné



Nativement, ResponsiveVoice a une option pour activer la lecture du contenu de la page sélectionnée. Vous pouvez utiliser votre propre Javascript et le personnaliser. Dans mon cas je n'ai fait prononcer que des lettres japonaises. 
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
}
      });
    }
  }
});
 J'espère que ces codes vous aideront à résoudre votre problème avec ResponsiveVoice. Si vous avez besoin de personnaliser davantage le code, demandez simplement de l'aide à une intelligence artificielle.