ResponsiveVoice 코드를 사용자 정의하기

Photo of author

kevinbk

기사

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: permite especificar a voz que será usada para reproduzir o texto (o idioma). Você pode escolher entre as vozes disponíveis para o idioma selecionado.
  2. rate: permite controlar a velocidade da fala. Valores mais altos resultarão em fala mais rápida, enquanto valores mais baixos resultarão em fala mais lenta.
  3. pitch: permite controlar o tom da fala. Valores mais altos resultarão em fala mais aguda, enquanto valores mais baixos resultarão em fala mais grave.
  4. volume: permite controlar o volume da fala. Valores mais altos resultarão em fala mais alta, enquanto valores mais baixos resultarão em fala mais baixa.

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

Customizando código do responsivevoice - voice control 2598422 1920

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의 속도로 일본어로 발음을 수행합니다. 마지막에 있는 코드는 버튼을 만드는 데 필요합니다. 





이 문서의 코드는 웹 사이트의 body 또는 head 태그 내에서  사이에 추가될 수 있습니다. 





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





기본적으로 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
}
      });
    }
  }
});





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