自定义ResponsiveVoice的代码

ResponsiveVoice是一个著名的和免费的语文发音API工具,允许用户在您的网站上添加文本阅读,单词和段落,但如何定制这些代码以实现您想要的方式?

ResponsiveVoice虽然是免费的,但它有一个付费的计划,提供支持。最大的问题是免费用户没有得到注意。

当我试图使用和编辑各种代码时,我无法让它以我想要的方式工作。幸运的是,经过人工智能的帮助,经过几个小时后,我可以用JavaScript编辑它以我想要的方式。

如何在您的网站上添加 ResponsiveVoice

要在您的网站上添加ResponsiveVoice,您需要创建一个帐户并为您的网站生成API密钥,然后只需将以下脚本放入您的项目标题。

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

添加此脚本后,您可以创建其他 javascript,以便在您的网站上运行。您可以调用API来发音您所选择的文本,使用字符串、变量或预定义文本。

您可以让 Script 发音特定标签、选择的文本或整个页面,您只需要创建 javascript 并使用以下代码调用 responsivevoice:

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

在 responsiveVoice.Speak 中添加参数

要定制 ResponsiveVoice 代码,您可以使用在 ResponsiveVoice 文档中提供的设置选项。 一些最常见的选项包括:

1. voice: 允许您指定将用于播放文本(语言)的声音。您可以从可用的声音中选择所选择的语言。
2. rate: 允许控制语音速度.较高的值会导致更快的语音,而较低的值会导致更慢的语音。
3. pitch: 允许控制语音的语音。较高的值会导致更尖锐的语音,而较低的值会导致更严重的语音。
4. volume: 允许控制语音量.较高的值会导致更高的语音,而较低的值会导致更低的语音。

要使用这些选项,只需在呼叫函数时将它们添加为参数。 responsiveVoice.speak().

添加按钮来发音 HTML 元素

如果你想发音一个标签的内容,你可以使用下面的 javascript。在这种情况下,Script会添加一个按钮,在每个网站上,删除一些HTML标签(在我的例子中, <rt>和其他),并发音标签的内容。

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

上面的代码从添加按钮开始,然后取 <pre> 标签,然后设置一个事件,如果按钮发生,它将获得标签的内容 <pre> 以及 HTML,它将使用“替换”标签 <rt> 和其他标签,包括按钮本身的内容。

然后,使用清洁文本变量,它以0.8的速度在日语进行发音。

此文章的代码可以添加到 <script></script>在您的网站的标签体或头。 

阅读屏幕中选择的内容

原来,ResponsiveVoice有一个选项,允许阅读页面所选择的内容. 您可以使用自己的JavaScript并定制它。 在我的情况下,我只发音了日语字母。

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

希望这些代码能帮助您解决您与 ResponsiveVoice 相关的问题,如果您需要进一步定制代码,只需向人工智能提供帮助。