ResponsiveVoice 코드를 사용자 정의하기

ResponsiveVoice는 사용자가 웹사이트에 텍스트 읽기, 단어 및 스니펫을 추가할 수 있는 인기 있는 무료 음성 텍스트 API 도구입니다. 하지만 이러한 코드를 원하는 방식으로 작동하도록 사용자 정의하려면 어떻게 해야 할까요?

ResponsiveVoice는 무료이지만 지원을 제공하는 유료 요금제가 있습니다. 가장 큰 문제는 무료 사용자는 아무런 관심을 받지 못한다는 것입니다. 이 서비스는 업데이트된 API 문서도 제공하지 않습니다.

다양한 코드를 사용하고 편집하려고 시도했지만 원하는 방식으로 작동할 수 없었습니다. 다행히도 AI의 도움으로 몇 시간 만에 자바스크립트로 원하는 방식으로 편집할 수 있었습니다.

웹사이트에 반응형 보이스를 추가하는 방법

사이트에 응답형 보이스를 추가하려면 계정을 만들고 웹사이트의 API 키를 생성해야 합니다. 그런 다음 프로젝트 헤더에 다음 스크립트를 배치하기만 하면 됩니다.

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

이 스크립트를 추가한 후 다른 자바스크립트를 만들어 사이트에서 작동하도록 할 수 있습니다. 문자열, 변수 또는 미리 정해진 텍스트를 사용하여 API를 호출하여 원하는 텍스트를 발음할 수 있습니다.

스크립트가 특정 태그, 선택한 텍스트 또는 전체 페이지를 발음하도록 할 수 있습니다. 이렇게 하려면 다음 코드를 사용하여 자바스크립트를 만들고 응답형 보이스를 호출하기만 하면 됩니다:

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

Adicionando parâmetros no responsiveVoice.Speak

응답형 음성 코드를 사용자 지정하려면 응답형 음성 문서에서 제공되는 구성 옵션을 사용할 수 있습니다. 가장 일반적인 옵션은 다음과 같습니다:

1. voice를 사용하면 텍스트(언어)를 재생하는 데 사용할 음성을 지정할 수 있습니다. 선택한 언어에 사용할 수 있는 음성 중에서 선택할 수 있습니다.
2. rate말하기: 말하기 속도를 제어할 수 있습니다. 값이 높을수록 말하기 속도가 빨라지고, 값이 낮을수록 말하기 속도가 느려집니다.
3. pitch톤: 말의 톤을 조절할 수 있습니다. 값이 높을수록 높은 음조로 말하고, 값이 낮을수록 낮은 음조로 말합니다.
4. volume볼륨: 말의 볼륨을 조절할 수 있습니다. 값이 클수록 말소리가 커지고, 값이 작을수록 말소리가 작아집니다.

이 옵션을 사용하려면 responsiveVoice.speak() 함수를 호출할 때 매개변수로 추가하기만 하면 됩니다.

HTML 요소를 발음하는 버튼 추가하기

Caso deseja pronunciar o conteúdo de uma tag, você pode fazer isso com javascript abaixo. Nesse caso o Script adiciona um botão em cada

 do site, remove com regex algumas tags em HTML (no meu caso  e demais) e pronunciá o conteúdo da tag 
. 




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



O código acima começa adicionando os botões e pegando as tags 
, depois configura um evento para caso aconteça um clique no botão, ele vai obter o conteúdo da tag 
 juntamente com HTML, vai remover usando “replace” as tags  e demais tags, incluindo o conteúdo do próprio botão. 




그런 다음 명확한 텍스트 변수를 사용하여 0.8의 속도로 일본어로 발음을 수행합니다. 마지막에 있는 코드는 버튼을 만드는 데 필요합니다. 



Os códigos desse artigo podem ser adicionados entre  dentro da tag body ou head do seu site. 



화면에서 선택한 콘텐츠 읽기






기본적으로 ResponsiveVoice에는 선택한 페이지 콘텐츠 읽기를 활성화하는 옵션이 있습니다. 자신만의 자바스크립트를 사용하여 사용자 지정할 수 있습니다. 제 경우에는 일본어 글자만 발음되도록 했습니다. 



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



  이 코드가 응답형 보이스 문제를 해결하는 데 도움이 되었기를 바랍니다. 코드를 더 커스터마이징해야 하는 경우 인공지능에게 도움을 요청하세요.