ResponsiveVoice コードのカスタマイズ

ResponsiveVoice は、ユーザーが読み上げテキスト、単語、スニペットを Web サイトに追加できる、人気のある無料の Speech Text API ツールです。しかし、これらのコードをカスタマイズして、希望どおりに実行するにはどうすればよいでしょうか?

ResponsiveVoice は無料ですが、それをサポートする有料プランがあります。大きな問題は、無料のユーザーが注目されないことです。どちらの API ドキュメントも、サービスが提供するものを更新しません。

さまざまなコードを使用および編集しようとすると、思うように動作させることができませんでした。幸いなことに、AI の助けを借りて、数時間後、JavaScript で思い通りに編集することができました。

ResponsiveVoice を Web サイトに追加する方法

ResponsiveVoice を Web サイトに追加するには、アカウントを作成し、Web サイトの API キーを生成する必要があります。次に、次のスクリプトをプロジェクトのヘッダーに配置します。

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

このスクリプトを追加した後、他の JavaScript を作成してサイトで機能させることができます。 API を呼び出して、文字列、変数、または事前定義されたテキストを使用して、選択したテキストを発音できます。

スクリプトに特定のタグ、選択したテキスト、またはページ全体を発音させることができます。そのためには、JavaScript を作成し、次のコードでレスポンシブボイスを呼び出すだけです。

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

RespondVoice.Speak にパラメーターを追加する

ResponsiveVoice コードをカスタマイズするには、ResponsiveVoice のドキュメントで利用可能な構成オプションを使用できます。最も一般的なオプションには次のものがあります。

1. ボイス: テキストの再生に使用する音声 (言語) を指定できます。選択した言語で使用可能な音声から選択できます。
2. 割合: 読み上げ速度を制御できます。値を大きくすると発声が速くなり、値を小さくすると発声が遅くなります。
3. ピッチ: スピーチのピッチを制御できます。値が高いほど高い音声になり、低い値は低い音声になります。
4. 音量: 話す音量を制御できます。値を大きくすると発声が大きくなり、値を小さくすると発声が小さくなります。

これらのオプションを使用するには、関数を呼び出すときにパラメーターとして追加するだけです レスポンシブボイス.スピーク().

HTML 要素を発音するためのボタンを追加する

タグの内容を読み上げたい場合は、以下の JavaScript を使用して実行できます。この場合、スクリプトはそれぞれにボタンを追加します

サイトの、正規表現でいくつかの HTML タグを削除します (私の場合など）、タグの内容を発音します
. 




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



上記のコードは、ボタンを追加してタグを取得することから始まります
、次に、ボタンがクリックされた場合にタグのコンテンツを取得するようにイベントを構成します
HTML と一緒に、タグを「置換」して削除しますボタン自体のコンテンツを含むその他のタグ。 




次に、きれいなテキスト変数を使用して、0.8 の速度で日本語の発音を実行します。ボタンを作成するには、最後のコードが必要です。 



この記事のコードは、サイトの body タグまたは head タグ内。 



選択した画面コンテンツを読み上げる






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 に関する問題の解決に役立つことを願っています。コードをさらにカスタマイズする必要がある場合は、人工知能に助けを求めてください。