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 文档中提供的设置选项。 一些最常见的选项包括:
voice
: 允许您指定将用于播放文本(语言)的声音。您可以从可用的声音中选择所选择的语言。rate
: 允许控制语音速度.较高的值会导致更快的语音,而较低的值会导致更慢的语音。pitch
: 允许控制语音的语音。较高的值会导致更尖锐的语音,而较低的值会导致更严重的语音。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 相关的问题,如果您需要进一步定制代码,只需向人工智能提供帮助。