Anpassen des ResponsiveVoice-Codes

ResponsiveVoice ist ein beliebtes kostenloses Sprachtext-API-Tool, mit dem Benutzer Lesetext, Wörter und Ausschnitte zu ihrer Website hinzufügen können. Aber wie können Sie diese Codes so anpassen, dass sie die gewünschte Leistung erbringen?

Obwohl ResponsiveVoice kostenlos ist, hat es einen kostenpflichtigen Plan, der es unterstützt. Das große Problem ist, dass kostenlose Benutzer keine Aufmerksamkeit erhalten. Keine der API-Dokumentationen aktualisiert, was der Dienst bereitstellt.

Beim Versuch, verschiedene Codes zu verwenden und zu bearbeiten, konnte ich es nicht so hinbekommen, wie ich es wollte. Glücklicherweise gelang es mir mit Hilfe von KI nach mehreren Stunden, mit JavaScript so zu bearbeiten, wie ich es wollte.

So fügen Sie ResponsiveVoice zu Ihrer Website hinzu

Um ResponsiveVoice zu Ihrer Website hinzuzufügen, müssen Sie ein Konto erstellen und einen API-Schlüssel für Ihre Website generieren. Dann fügen Sie einfach das folgende Skript in die Kopfzeile Ihres Projekts ein.

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

Nachdem Sie dieses Skript hinzugefügt haben, können Sie anderes Javascript erstellen, damit es auf Ihrer Website funktioniert. Sie können die API aufrufen, um Text Ihrer Wahl auszusprechen, indem Sie Zeichenfolgen, Variablen oder vordefinierte Texte verwenden.

Es ist möglich, das Skript dazu zu bringen, bestimmte Tags, ausgewählten Text oder sogar die ganze Seite auszusprechen. Dazu müssen Sie nur das Javascript erstellen und die responsivevoice mit dem folgenden Code aufrufen:

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

Hinzufügen von Parametern in responsiveVoice.Speak

Um den ResponsiveVoice-Code anzupassen, können Sie die in der ResponsiveVoice-Dokumentation verfügbaren Konfigurationsoptionen verwenden. Einige der häufigsten Optionen sind:

1. Stimme: Hier können Sie die Stimme angeben, die zum Abspielen des Textes verwendet wird (die Sprache). Sie können aus verfügbaren Stimmen für die ausgewählte Sprache auswählen.
2. Bewertung: Ermöglicht die Steuerung der Sprechgeschwindigkeit. Höhere Werte führen zu einer schnelleren Sprache, während niedrigere Werte zu einer langsameren Sprache führen.
3. Tonhöhe: Ermöglicht die Steuerung der Sprechhöhe. Höhere Werte führen zu einer höheren Sprache, während niedrigere Werte zu einer tieferen Sprache führen.
4. Volumen: Ermöglicht die Steuerung der Sprechlautstärke. Höhere Werte führen zu lauterer Sprache, während niedrigere Werte zu leiserer Sprache führen.

Um diese Optionen zu verwenden, fügen Sie sie einfach als Parameter beim Aufruf der Funktion responsiveVoice.speak() hinzu.

Schaltfläche hinzufügen, um ein HTML-Element auszusprechen

Falls Sie den Inhalt eines Tags aussprechen möchten, können Sie dies unten mit Javascript tun. In diesem Fall fügt das Skript jeweils eine Schaltfläche hinzu

 der Seite, entfernt einige HTML-Tags mit Regex (in meinem Fall und andere) und den Inhalt des Tags aussprechen
 . 




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



Der obige Code beginnt mit dem Hinzufügen der Schaltflächen und dem Abrufen der Tags
 , konfiguriert dann ein Ereignis, sodass beim Klicken auf die Schaltfläche der Inhalt des Tags abgerufen wird
 zusammen mit HTML, entfernt mit „replace“ die Tags und andere Tags, einschließlich des Inhalts der Schaltfläche selbst. 




Dann führt es unter Verwendung der Klartextvariablen die Aussprache der japanischen Sprache mit einer Geschwindigkeit von 0,8 aus. Der Code am Ende wird benötigt, um die Schaltflächen zu erstellen. 



Die Codes für diesen Artikel können zwischen hinzugefügt werden innerhalb des Body- oder Head-Tags Ihrer Website. 



Ausgewählten Bildschirminhalt lesen






ResponsiveVoice verfügt nativ über eine Option zum Aktivieren des Lesens ausgewählter Seiteninhalte. Sie können Ihr eigenes Javascript verwenden und anpassen. In meinem Fall habe ich nur japanische Buchstaben ausgesprochen. 



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



  Ich hoffe, diese Codes helfen Ihnen, Ihr Problem mit ResponsiveVoice zu lösen. Wenn Sie den Code weiter anpassen müssen, bitten Sie einfach eine künstliche Intelligenz um Hilfe.