JavaScriptのWeb音声APIを使用した音声合成

39220 ワード

texttospeech javascript テキストリンク

WebスピーチAPIは、Webアプリに音声データを組み込むために使用されます.このチュートリアルでは、Web音声APIを使用して音声を実装する簡単なWebページを構築します.Web音声APIのブラウザ互換性を確認できますhere .

必要条件

このチュートリアルでは次のようにします.

HTMLとJavaScriptの基本的な理解.

コードエディター.私は使用するVisual Studio Code .

Webページを表示するブラウザGoogle Chrome or Mozilla Firefox .

プロジェクトディレクトリ

プロジェクトの新しいディレクトリを作成し、index.html and textToSpeech.js .

project-directory/
|-index.html
|-textToSpeech.js

HTMLページ

HTMLファイルで設定しましょう

空の選択メニュー.私たちは、Javascriptを使用して利用できる声のリストで、空の選択メニューを満たします.

ボリューム、ピッチ、およびレートの範囲スライダー.

エーtextarea 入力する.

音声のコントロールボタン.

使いましたBootstrap 5 Webページのスタイルを設定します.ブートストラップに新しい場合は、チェックアウトdocumentation より良い理解を得るために.

<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="index.css" />
    <title>Text to Speech</title>
  </head>
  <body class="container mt-5 bg-dark">
    <h1 class="text-light">Text to Speech</h1>
    <p class="lead text-light mt-4">Select Voice</p>

    <!-- Select Menu for Voice -->
    <select id="voices" class="form-select bg-secondary text-light"></select>

    <!-- Range Slliders for Volume, Rate & Pitch -->
    <div class="d-flex mt-4 text-light">
      <div>
        <p class="lead">Volume</p>
        <input type="range" min="0" max="1" value="1" step="0.1" id="volume" />
        <span id="volume-label" class="ms-2">1</span>
      </div>
      <div class="mx-5">
        <p class="lead">Rate</p>
        <input type="range" min="0.1" max="10" value="1" id="rate" step="0.1" />
        <span id="rate-label" class="ms-2">1</span>
      </div>
      <div>
        <p class="lead">Pitch</p>
        <input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
        <span id="pitch-label" class="ms-2">1</span>
      </div>
    </div>

    <!-- Text Area  for the User to Type -->
    <textarea class="form-control bg-dark text-light mt-5" cols="30" rows="10" placeholder="Type here..."></textarea>

    <!-- Control Buttons -->
    <div class="mb-5">
      <button id="start" class="btn btn-success mt-5 me-3">Start</button>
      <button id="pause" class="btn btn-warning mt-5 me-3">Pause</button>
      <button id="resume" class="btn btn-info mt-5 me-3">Resume</button>
      <button id="cancel" class="btn btn-danger mt-5 me-3">Cancel</button>
    </div>
  </body>
  <script src="./textToSpeech.js"></script>
</html>

JavaScriptファイル

のインスタンスを作成しましょう SpeechSynthesisUtterance クラス.このインスタンスをさまざまなプロパティで設定します.

let speech = new SpeechSynthesisUtterance();

プロパティ

では、このプロパティを設定しましょうSpeechSynthesisUtterance インスタンス.
には6つのプロパティがありますSpeechSynthesisUtterance 我々が微調整することができるインスタンス.
以下のようになります:
言語
The language プロパティは、発話の言語を取得して設定します.を返します.<html lang="en"> Lang値を使用するか、<html lang="en"> langが設定されていない.
この関数は、BCP 47 language tag .

speech.lang = "en";

テキスト
The text プロパティは、発話が話されたときに合成されるテキストを取得して設定します.テキストはプレーンテキストとして提供できます.この場合、TextボタンをクリックするとTextプロパティを設定する必要があります.
ボタンにクリックリスナーを加えましょう.ボタンをクリックすると、テキスト値をtextarea そしてこのプロパティに設定します.
あなたはイベントリスナーについての詳細を学ぶことができますhere .

document.querySelector("#talk").addEventListener("click", () => {
  speech.text = document.querySelector("textarea").value;
});

音量:
The volume プロパティは、発話の音量を取得して設定します.0(最低)と1(最高)の間のボリューム値を表すfloatです.このプロパティが設定されていない場合、既定値は1です.
を加えましょうonInput リスナーvolume 範囲スライダと調整volume プロパティは、スライダの値が変更されます.私たちは既に、HTMLタグにおけるMIN、MAX、およびデフォルト値を設定しました.
セットしましょう<span> これはvolume ウェブページの範囲スライダーの横にある.

document.querySelector("#rate").addEventListener("input", () => {
  // Get rate Value from the input
  const rate = document.querySelector("#rate").value;

  // Set rate property of the SpeechSynthesisUtterance instance
  speech.rate = rate;

  // Update the rate label
  document.querySelector("#rate-label").innerHTML = rate;
});

レート
The rate プロパティは、発話のレートを取得して設定します.それは0.1(最低)と10(最高)の間に及ぶことができるレート値を表す浮動小数点数です.このプロパティが設定されていない場合、既定値は1です.
を加えましょうonInput リスナーrate 範囲スライダと調整rate プロパティは、スライダの値が変更されます.私たちは既に、HTMLタグにおけるMIN、MAX、およびデフォルト値を設定しました.
セットしましょう<span> これはrate ウェブページの範囲スライダーの横にある.

document.querySelector("#volume").addEventListener("input", () => {
  // Get volume Value from the input
  const volume = document.querySelector("#volume").value;

  // Set volume property of the SpeechSynthesisUtterance instance
  speech.volume = volume;

  // Update the volume label
  document.querySelector("#volume-label").innerHTML = volume;
});

ピッチ
The pitch プロパティは、発話のピッチを取得して設定します.それは0(最低)と2(最高)の間に及ぶことができるピッチ値を表す浮動小数点数です.このプロパティが設定されていない場合、既定のピッチは1です.
を加えましょうonInput リスナーpitch スライダを変更し、スライダーの値が変更されたときにピッチプロパティを調整します.私たちは既に、HTMLタグにおけるMIN、MAX、およびデフォルト値を設定しました.
セットしましょう<span> これはpitch ウェブページの範囲スライダーの横にある.

document.querySelector("#pitch").addEventListener("input", () => {
  // Get pitch Value from the input
  const pitch = document.querySelector("#pitch").value;

  // Set pitch property of the SpeechSynthesisUtterance instance
  speech.pitch = pitch;

  // Update the pitch label
  document.querySelector("#pitch-label").innerHTML = pitch;
});

声
The voice プロパティは、発話を話すのに使用される音声を取得して設定します.これは SpeechSynthesisVoice オブジェクト.それがセットされないならば、発話の言語セッティングのために利用できる最も適切なデフォルト音声は使用されます.
発声の声を設定するには、私たちはwindow オブジェクト.ウィンドウオブジェクトが読み込まれると、すぐに利用できません.これは非同期操作です.音声が読み込まれるとイベントが発生します.音声がロードされたときに実行する関数を設定できます.

window.speechSynthesis.onvoiceschanged = () => {
  // On Voices Loaded
};

我々の声のリストを得ることができますwindow.speechSynthesis.getVoices() . これはSpeechSynthesisVoice 利用できるオブジェクト.リストをグローバルな配列に保存して、利用可能な声のリストで、ウェブページの選択メニューを更新しましょう.

let voices = []; // global array

window.speechSynthesis.onvoiceschanged = () => {
  // Get List of Voices
  voices = window.speechSynthesis.getVoices();

  // Initially set the First Voice in the Array.
  speech.voice = voices[0];

  // Set the Voice Select List. (Set the Index as the value, which we'll use later when the user updates the Voice using the Select Menu.)
  let voiceSelect = document.querySelector("#voices");
  voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};

今すぐボイスメニューを更新しましたonChange それを更新するイベントリスナーSpeechSynthesisUtterance インスタンスの声.ユーザーが音声を更新すると、インデックス番号(各オプションの値として設定)と音声のグローバルな配列を使用して音声を更新します.

document.querySelector("#voices").addEventListener("change", () => {
  speech.voice = voices[document.querySelector("#voices").value];
});

コントロール

SpeechSynthesisインスタンスにコントロールを追加しましょう.
起動
私たちはSpeechSynthesisUtterance インスタンスwindow.speechSynthesis.speak() スタートボタンがクリックされたときのメソッド.これは、テキストを音声に変換を開始します.Textプロパティは、このメソッドを呼び出す前に設定する必要があります.

NOTE: If you start another text to speech while an instance is already running, it'll get queued behind the one that is currently running.

document.querySelector("#talk").addEventListener("click", () => {
  speech.text = document.querySelector("textarea").value;
  window.speechSynthesis.speak(speech);
});

一時停止:
我々は、一時停止することができますSpeechSynthesisUtterance 現在実行中のインスタンスwindow.speechSynthesis.pause() . 一時停止ボタンを選びましょうclick イベントリスナーと一時停止SpeechSynthesisUtterance ボタンがクリックされたときのインスタンス.

document.querySelector("#pause").addEventListener("click", () => {
  window.speechSynthesis.pause();
});

再開
我々は、再開することができますSpeechSynthesisUtterance 使用時に一時停止するインスタンスwindow.speechSynthesis.resume() . レジュームボタンを選びましょうclick それにイベントリスナーと再開SpeechSynthesisUtterance ボタンがクリックされたときのインスタンス.

document.querySelector("#resume").addEventListener("click", () => {
  window.speechSynthesis.resume();
});

キャンセル
我々はキャンセルすることができますSpeechSynthesisUtterance 現在実行中のインスタンスwindow.speechSynthesis.cancel() . キャンセルボタンを選びましょうclick イベントリスナーとキャンセルSpeechSynthesisUtterance ボタンがクリックされたときのインスタンス.

document.querySelector("#resume").addEventListener("click", () => {
  window.speechSynthesis.resume();
});

の最終バージョンtextToSpeech.js :

// Initialize new SpeechSynthesisUtterance object
let speech = new SpeechSynthesisUtterance();

// Set Speech Language
speech.lang = "en";

let voices = []; // global array of available voices

window.speechSynthesis.onvoiceschanged = () => {
  // Get List of Voices
  voices = window.speechSynthesis.getVoices();

  // Initially set the First Voice in the Array.
  speech.voice = voices[0];

  // Set the Voice Select List. (Set the Index as the value, which we'll use later when the user updates the Voice using the Select Menu.)
  let voiceSelect = document.querySelector("#voices");
  voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};

document.querySelector("#rate").addEventListener("input", () => {
  // Get rate Value from the input
  const rate = document.querySelector("#rate").value;

  // Set rate property of the SpeechSynthesisUtterance instance
  speech.rate = rate;

  // Update the rate label
  document.querySelector("#rate-label").innerHTML = rate;
});

document.querySelector("#volume").addEventListener("input", () => {
  // Get volume Value from the input
  const volume = document.querySelector("#volume").value;

  // Set volume property of the SpeechSynthesisUtterance instance
  speech.volume = volume;

  // Update the volume label
  document.querySelector("#volume-label").innerHTML = volume;
});

document.querySelector("#pitch").addEventListener("input", () => {
  // Get pitch Value from the input
  const pitch = document.querySelector("#pitch").value;

  // Set pitch property of the SpeechSynthesisUtterance instance
  speech.pitch = pitch;

  // Update the pitch label
  document.querySelector("#pitch-label").innerHTML = pitch;
});

document.querySelector("#voices").addEventListener("change", () => {
  // On Voice change, use the value of the select menu (which is the index of the voice in the global voice array)
  speech.voice = voices[document.querySelector("#voices").value];
});

document.querySelector("#start").addEventListener("click", () => {
  // Set the text property with the value of the textarea
  speech.text = document.querySelector("textarea").value;

  // Start Speaking
  window.speechSynthesis.speak(speech);
});

document.querySelector("#pause").addEventListener("click", () => {
  // Pause the speechSynthesis instance
  window.speechSynthesis.pause();
});

document.querySelector("#resume").addEventListener("click", () => {
  // Resume the paused speechSynthesis instance
  window.speechSynthesis.resume();
});

document.querySelector("#cancel").addEventListener("click", () => {
  // Cancel the speechSynthesis instance
  window.speechSynthesis.cancel();
});

結果

Githubページを使用して展開されたプロジェクトを見ることができますhere .
また、最後のコードをチェックアウトすることができますGitHub Repository .

再生しましょう

我々は、ボイス、テキストエリア、およびコントロールボタンの選択メニューでHTMLページを作成しました.

新しいJavaScriptファイルを作成し、HTMLファイルにリンクしました.

私たちは新しいSpeechSynthesisUtterance オブジェクト.

我々は、1960年代の6つの特性を調整しましたSpeechSynthesisUtterance インスタンス.彼らはピッチ、ボリューム、テキスト、音声、レート、および言語です.

我々は、コントロールボタンにリスナーを追加するSpeechSynthesisUtterance クリックするとインスタンス.スタート、一時停止、再開、キャンセル.

おめでとう.🥳 あなたはそれをした.
読書ありがとう!

Reference

この問題について(JavaScriptのWeb音声APIを使用した音声合成), 我々は、より多くの情報をここで見つけました https://dev.to/zolomohan/text-to-speech-using-the-web-speech-api-in-javascript-2gfo

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

repl.it

Web_React #12