{"id":3951,"date":"2022-12-29T18:21:23","date_gmt":"2022-12-29T18:21:23","guid":{"rendered":"http:\/\/kevinbk.com\/?p=3951"},"modified":"2022-12-29T18:37:30","modified_gmt":"2022-12-29T18:37:30","slug":"customizando-codigo-do-responsivevoice","status":"publish","type":"post","link":"https:\/\/kevinbk.com\/de\/anpassen-responsivevoice-code\/","title":{"rendered":"Anpassen des ResponsiveVoice-Codes"},"content":{"rendered":"

ResponsiveVoice ist ein beliebtes kostenloses Sprachtext-API-Tool, mit dem Benutzer Lesetext, W\u00f6rter und Ausschnitte zu ihrer Website hinzuf\u00fcgen k\u00f6nnen. Aber wie k\u00f6nnen Sie diese Codes so anpassen, dass sie die gew\u00fcnschte Leistung erbringen? <\/p>\n\n\n\n

Obwohl ResponsiveVoice kostenlos ist, hat es einen kostenpflichtigen Plan, der es unterst\u00fctzt. Das gro\u00dfe Problem ist, dass kostenlose Benutzer keine Aufmerksamkeit erhalten. Keine der API-Dokumentationen aktualisiert, was der Dienst bereitstellt. <\/p>\n\n\n\n

Beim Versuch, verschiedene Codes zu verwenden und zu bearbeiten, konnte ich es nicht so hinbekommen, wie ich es wollte. Gl\u00fccklicherweise gelang es mir mit Hilfe von KI nach mehreren Stunden, mit JavaScript so zu bearbeiten, wie ich es wollte. <\/p>\n\n\n\n

So f\u00fcgen Sie ResponsiveVoice zu Ihrer Website hinzu<\/h2>\n\n\n\n

Um ResponsiveVoice zu Ihrer Website hinzuzuf\u00fcgen, m\u00fcssen Sie ein Konto erstellen und einen API-Schl\u00fcssel f\u00fcr Ihre Website generieren. Dann f\u00fcgen Sie einfach das folgende Skript in die Kopfzeile Ihres Projekts ein. <\/p>\n\n\n\n

<script src=\"https:\/\/code.responsivevoice.org\/responsivevoice.js?key=YOUR_UNIQUE_KEY\"><\/script><\/code><\/pre>\n\n\n\n
Nachdem Sie dieses Skript hinzugef\u00fcgt haben, k\u00f6nnen Sie anderes Javascript erstellen, damit es auf Ihrer Website funktioniert. Sie k\u00f6nnen die API aufrufen, um Text Ihrer Wahl auszusprechen, indem Sie Zeichenfolgen, Variablen oder vordefinierte Texte verwenden. <\/p>\n\n\n\n
Es ist m\u00f6glich, das Skript dazu zu bringen, bestimmte Tags, ausgew\u00e4hlten Text oder sogar die ganze Seite auszusprechen. Dazu m\u00fcssen Sie nur das Javascript erstellen und die responsivevoice mit dem folgenden Code aufrufen: <\/p>\n\n\n\n
responsiveVoice.speak(\"text-or-var\");<\/code><\/pre>\n\n\n\n
Hinzuf\u00fcgen von Parametern in responsiveVoice.Speak<\/h2>\n\n\n\n
Um den ResponsiveVoice-Code anzupassen, k\u00f6nnen Sie die in der ResponsiveVoice-Dokumentation verf\u00fcgbaren Konfigurationsoptionen verwenden. Einige der h\u00e4ufigsten Optionen sind:<\/p>\n\n\n\n
    \n
  1. Stimme<\/code>: Hier k\u00f6nnen Sie die Stimme angeben, die zum Abspielen des Textes verwendet wird (die Sprache). Sie k\u00f6nnen aus verf\u00fcgbaren Stimmen f\u00fcr die ausgew\u00e4hlte Sprache ausw\u00e4hlen.<\/li>\n\n\n\n
  2. Bewertung<\/code>: Erm\u00f6glicht die Steuerung der Sprechgeschwindigkeit. H\u00f6here Werte f\u00fchren zu einer schnelleren Sprache, w\u00e4hrend niedrigere Werte zu einer langsameren Sprache f\u00fchren.<\/li>\n\n\n\n
  3. Tonh\u00f6he<\/code>: Erm\u00f6glicht die Steuerung der Sprechh\u00f6he. H\u00f6here Werte f\u00fchren zu einer h\u00f6heren Sprache, w\u00e4hrend niedrigere Werte zu einer tieferen Sprache f\u00fchren.<\/li>\n\n\n\n
  4. Volumen<\/code>: Erm\u00f6glicht die Steuerung der Sprechlautst\u00e4rke. H\u00f6here Werte f\u00fchren zu lauterer Sprache, w\u00e4hrend niedrigere Werte zu leiserer Sprache f\u00fchren.<\/li>\n<\/ol>\n\n\n\n
    Um diese Optionen zu verwenden, f\u00fcgen Sie sie beim Aufrufen der Funktion einfach als Parameter hinzu responsiveVoice.speak()<\/code>.<\/p>\n\n\n
    \n
    \"-\"<\/figure><\/div>\n\n\n
    Schaltfl\u00e4che hinzuf\u00fcgen, um ein HTML-Element auszusprechen<\/h2>\n\n\n\n
    Falls Sie den Inhalt eines Tags aussprechen m\u00f6chten, k\u00f6nnen Sie dies unten mit Javascript tun. In diesem Fall f\u00fcgt das Skript jeweils eine Schaltfl\u00e4che hinzu
     der Seite, entfernt einige HTML-Tags mit Regex (in meinem Fall und andere) und den Inhalt des Tags aussprechen
     . <\/p>\n\n\n\n
    function adicionarBotoesPlay() {\n  \/\/ Obt\u00e9m todas as tags <pre> da p\u00e1gina\n  var tagsPre = document.getElementsByTagName(\"pre\");\n  \/\/ Para cada tag <pre>...\n  for (var i = 0; i < tagsPre.length; i++) {\n    \/\/ Cria um novo bot\u00e3o de play\n    var botaoPlay = document.createElement(\"button\");\n\t\tbotaoPlay.setAttribute(\"class\", \"playbt\");\n    botaoPlay.innerHTML = \"\u25b7\";\n    \/\/ Adiciona o bot\u00e3o de play \u00e0 tag <pre>\n    tagsPre[i].appendChild(botaoPlay);\n    \/\/ Configura o evento de clique do bot\u00e3o para chamar a fun\u00e7\u00e3o de pron\u00fancia do ResponsiveVoice\n    botaoPlay.addEventListener(\"click\", function() { \n      \/\/ Obt\u00e9m o conte\u00fado da tag <pre>\n      \/\/ Obt\u00e9m o elemento HTML que voc\u00ea deseja selecionar\n      var conteudoPre = this.parentNode.innerHTML;\n      \/\/ Substitui todas as tags <rt> e seu conte\u00fado pelo texto vazio\n      var textoSemRt = conteudoPre.replace(\/<rt>([\\s\\S]*?)<\\\/rt>\/g, \"\").replace(\/<button[^>]*>.*?<\\\/button>\/g, \"\");\n\t\t\tvar textoSemHtml = textoSemRt.replace(\/<[^>]*>\/g, \"\");\n      \/\/ Solicita a pron\u00fancia do conte\u00fado sem as tags <rt> pelo ResponsiveVoice Text To Speech\n\t\t\t\/\/ Cria um novo elemento de texto com o texto selecionado\n\t\t\tresponsiveVoice.speak(\" \");\n \u00a0 \u00a0 \u00a0responsiveVoice.speak(textoSemHtml, \"Japanese Female\", {\n\t\t  rate: 0.8,\n  \t\tonend: function() {\n    \/\/ Executa alguma a\u00e7\u00e3o depois que a pron\u00fancia \u00e9 conclu\u00edda\n  }\n});\n    });\n  }\n}\n\/\/ Executa a fun\u00e7\u00e3o quando a p\u00e1gina terminar de carregar\nwindow.addEventListener(\"load\", adicionarBotoesPlay);<\/code><\/pre>\n\n\n\n
    Der obige Code beginnt mit dem Hinzuf\u00fcgen der Schaltfl\u00e4chen und dem Abrufen der Tags
     , konfiguriert dann ein Ereignis, sodass beim Klicken auf die Schaltfl\u00e4che der Inhalt des Tags abgerufen wird
     zusammen mit HTML, entfernt mit \u201ereplace\u201c die Tags und andere Tags, einschlie\u00dflich des Inhalts der Schaltfl\u00e4che selbst. <\/p>\n\n\n\n
    Dann f\u00fchrt es unter Verwendung der Klartextvariablen die Aussprache der japanischen Sprache mit einer Geschwindigkeit von 0,8 aus. Der Code am Ende wird ben\u00f6tigt, um die Schaltfl\u00e4chen zu erstellen. <\/p>\n\n\n\n
    Die Codes f\u00fcr diesen Artikel k\u00f6nnen zwischen hinzugef\u00fcgt werden innerhalb des Body- oder Head-Tags Ihrer Website. <\/pre>\n\n\n\n
    Ausgew\u00e4hlten Bildschirminhalt lesen<\/h2>\n\n\n\n
    ResponsiveVoice verf\u00fcgt nativ \u00fcber eine Option zum Aktivieren des Lesens ausgew\u00e4hlter Seiteninhalte. Sie k\u00f6nnen Ihr eigenes Javascript verwenden und anpassen. In meinem Fall habe ich nur japanische Buchstaben ausgesprochen. <\/p>\n\n\n\n
    responsiveVoice.setDefaultVoice(\"Japanese Female\");\ndocument.addEventListener(\"mouseup\", function() {\n  \/\/ Obt\u00e9m o texto selecionado pelo usu\u00e1rio\n  var selecao = window.getSelection().toString();\n  \/\/ Verifica se o texto selecionado n\u00e3o est\u00e1 vazio\n  if (selecao) {\n    \/\/ Verifica se o texto selecionado s\u00f3 cont\u00e9m caracteres japoneses\n    var caracteresJaponeses = \/^[\\u3041-\\u3096\\u30A0-\\u30FF\\u4E00-\\u9FFF]+$\/;\n    if (caracteresJaponeses.test(selecao)) {\n      \/\/ Solicita a pron\u00fancia do texto selecionado pelo ResponsiveVoice Text To Speech\n      responsiveVoice.speak(selecao, \"Japanese Female\", {\n        onend: function() {\n          \/\/ Executa alguma a\u00e7\u00e3o depois que a pron\u00fancia \u00e9 conclu\u00edda\n}\n      });\n    }\n  }\n});<\/code><\/pre>\n\n\n\n
      Ich hoffe, diese Codes helfen Ihnen, Ihr Problem mit ResponsiveVoice zu l\u00f6sen. Wenn Sie den Code weiter anpassen m\u00fcssen, bitten Sie einfach eine k\u00fcnstliche Intelligenz um Hilfe. <\/p>","protected":false},"excerpt":{"rendered":"
    ResponsiveVoice ist ein beliebtes kostenloses Sprachtext-API-Tool, mit dem Benutzer dies tun k\u00f6nnen<\/p>","protected":false},"author":1,"featured_media":3832,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/kevinbk.com\/wp-content\/uploads\/2022\/11\/javascript.jpg","_links":{"self":[{"href":"https:\/\/kevinbk.com\/de\/wp-json\/wp\/v2\/posts\/3951"}],"collection":[{"href":"https:\/\/kevinbk.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kevinbk.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/de\/wp-json\/wp\/v2\/comments?post=3951"}],"version-history":[{"count":4,"href":"https:\/\/kevinbk.com\/de\/wp-json\/wp\/v2\/posts\/3951\/revisions"}],"predecessor-version":[{"id":3956,"href":"https:\/\/kevinbk.com\/de\/wp-json\/wp\/v2\/posts\/3951\/revisions\/3956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/de\/wp-json\/wp\/v2\/media\/3832"}],"wp:attachment":[{"href":"https:\/\/kevinbk.com\/de\/wp-json\/wp\/v2\/media?parent=3951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kevinbk.com\/de\/wp-json\/wp\/v2\/categories?post=3951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}