Personalizzazione del codice ResponsiveVoice

ResponsiveVoice è un popolare strumento API Speech Text gratuito che consente agli utenti di aggiungere testo di lettura, parole e frammenti al proprio sito web. Ma come personalizzare questi codici per eseguire nel modo desiderato?

ResponsiveVoice nonostante sia gratuito, ha un piano a pagamento che lo supporta. Il grosso problema è che gli utenti gratuiti non ricevono attenzione. Nessuna delle due documentazioni API aggiornerà ciò che il servizio fornisce.

Durante il tentativo di utilizzare e modificare vari codici, non sono riuscito a farlo funzionare nel modo desiderato. Fortunatamente con l'aiuto dell'intelligenza artificiale, dopo diverse ore, sono riuscito a modificare come volevo con JavaScript.

Come aggiungere ResponsiveVoice al tuo sito web

Per aggiungere ResponsiveVoice al tuo sito web, devi creare un account e generare una chiave API per il tuo sito web. Quindi inserisci il seguente script nell'intestazione del tuo progetto.

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

Dopo aver aggiunto questo script, puoi creare altri javascript per farlo funzionare sul tuo sito. Puoi chiamare l'API per pronunciare il testo che preferisci, utilizzando stringhe, variabili o testi predeterminati.

È possibile fare in modo che lo Script pronunci tag specifici, testo selezionato o anche l'intera pagina. Per questo, devi solo creare il javascript e chiamare responsivevoice con il seguente codice:

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

Aggiunta di parametri in responsiveVoice.Speak

Per personalizzare il codice di ResponsiveVoice, puoi utilizzare le opzioni di configurazione disponibili nella documentazione di ResponsiveVoice. Alcune delle opzioni più comuni includono:

1. voce: Consente di specificare la voce che verrà utilizzata per riprodurre il testo (la lingua). Puoi scegliere tra le voci disponibili per la lingua selezionata.
2. Vota: consente di controllare la velocità del parlato. Valori più alti si tradurranno in un parlato più veloce, mentre valori più bassi si tradurranno in un parlato più lento.
3. intonazione: consente di controllare il tono del parlato. Valori più alti produrranno discorsi con tono più alto, mentre valori più bassi produrranno discorsi con tono più basso.
4. volume: consente di controllare il volume della conversazione. Valori più alti si tradurranno in un parlato più forte, mentre valori più bassi si tradurranno in un parlato più basso.

Per utilizzare queste opzioni, basta aggiungerle come parametri quando si chiama la funzione responsiveVoice.speak().

Aggiunta di Button per pronunciare un elemento HTML

Nel caso in cui desideri pronunciare il contenuto di un tag, puoi farlo con javascript di seguito. In questo caso lo Script aggiunge un pulsante su ciascuno

 del sito, rimuove alcuni tag HTML con regex (nel mio caso e altri) e pronunciare il contenuto del 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);
Il codice sopra inizia aggiungendo i pulsanti e ottenendo i tag
 , quindi configura un evento in modo che, se si fa clic sul pulsante, ottenga il contenuto del tag
 insieme all'HTML, rimuoverà utilizzando "sostituisci" i tag e altri tag, compreso il contenuto del pulsante stesso. 

Quindi, utilizzando la variabile di testo pulito, esegue la pronuncia della lingua giapponese a una velocità di 0,8. Il codice alla fine è necessario per creare i pulsanti. 
I codici per questo articolo possono essere aggiunti tra all'interno del tag body o head del tuo sito. 
Leggi il contenuto dello schermo selezionato



Nativamente, ResponsiveVoice ha un'opzione per abilitare la lettura del contenuto della pagina selezionata. Puoi usare il tuo Javascript e personalizzarlo. Nel mio caso ho fatto pronunciare solo lettere giapponesi. 
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
}
      });
    }
  }
});
 Spero che questi codici ti aiutino a risolvere il tuo problema con ResponsiveVoice. Se hai bisogno di personalizzare ulteriormente il codice, chiedi aiuto a un'Intelligenza Artificiale.