SFの初期の時代以來、私たちは私たちと會話する機(jī)械を夢見てきました。今日、これは一般的です。ただし、 Webサイトが「話す」ことを可能にする技術(shù)は、まだ比較的新しいものです。

Web Speech APIのSpeechSynthesisコンポーネントにより、Talking Webページを作成できます。まだ実験的であると考えられていますが、最新のChrome、Safari、およびFirefoxバージョンで優(yōu)れたサポートを誇っています。

特にエキサイティングな側(cè)面は、複數(shù)の言語での使用です。 Mac OSXおよびほとんどのWindowsシステムは、堅牢なクロスブラウザーサポートを提供します。 Chromeは動的に聲をロードするので、OSに國際的な聲がない場合でも、Chromeはそれらを提供します。さまざまな言語で同じテキストを話す3段ページを作成します。コアコードは既存のドキュメントから採用されていますが、最終バージョンは機(jī)能を追加し、PolyGlot Codepenで表示可能です。

ステップ1：シンプルな基盤

スピーチコンテンツのテキスト入力を含む基本ページと、音聲をトリガーするボタンから始めましょう。

<div>
  <h1>単純なテキストからスピーチ</h1>
  <p id="warning">申し訳ありませんが、ブラウザはWeb Speech APIをサポートしていません。</p>  
  <textarea id="txtFld" placeholder="Type text here..."></textarea><br>
  <button id="speakBtn">話す</button><br>
  <p>注：最適なMACパフォーマンスには、最新のChrome、Safari、またはFirefoxを使用してください。 Windowsでは、Chromeを使用してください。</p>
</div>

ID「警告」の段落は、JavaScriptがWeb Speech APIの非互換性を検出した場合にのみ表示されます。 TextareaとボタンのIDに注意してください。 JavaScriptで使用します。

HTMLスタイリングを自由にカスタマイズしてください。私のデモを出発點(diǎn)として使用することもできます。

互換性のないブラウザー（時代遅れのインターネットエクスプローラーなど）を使用しているユーザーの混亂を避けるために、無効なボタン狀態(tài)をスタイリングすることをお勧めします。また、最初にCSSを使用して警告を非表示にします。

ボタン：無効{
  カーソル：禁止されていません。
  不透明：0.3;
}

＃警告 {
  色：赤;
  表示：なし;
  フォントサイズ：1.4rem;
}

JavaScriptのために！ 「Speak」ボタンとTextareaを參照する変數(shù)を定義します。イベントリスナーは、DOMロード後にinit()関數(shù)が実行されることを保証します。 document.querySelectorのショートカットとして、ヘルパー関數(shù)「qs」（以下に定義）を使用します。 speakBtnのイベントリスナーはtalk()関數(shù)を呼び出します。

talk()関數(shù)は、 SpeechSynthesisUtteranceオブジェクト（Web Speech APIの一部）を作成し、Textareaのテキストをtextプロパティに割り當(dāng)て、 speechSynthesis.speak()を使用してオーディオを再生します。音聲は、ブラウザとOSによって異なります。私のMacでは、デフォルトはAlex（American English）です。ステップ2では、音聲選択メニューを追加します。

 speakbtn、txtfld;

function init（）{
  speakbtn = qs（ "＃speakbtn"）;
  txtfld = qs（ "＃txtfld"）;
  speakbtn.addeventlistener（ "click"、talk、false）;
  if（！window.speechsynthesis）{
    speakbtn.disabled = true;
    qs（ "＃警告"）。style.display = "block";
  }
}

function talk（）{
  let u = new SpeechSynthesisteutter（）;
  u.text = txtfld.value;
  speechsynthesis.speak（u）;
}

//再利用可能なユーティリティ関數(shù)
function qs（selectortext）{
  document.queryselector（selectortext）を返します。
}

document.addeventlistener（ 'domcontentloaded'、init）;

ステップ2：國際音聲選択

デフォルトを超えて言語を使用するには、追加のコードが必要です。音聲オプションの選択要素を追加しましょう。

<h1>多言語のテキストからスピーチ</h1>
<div>
  <label for="speakerMenu">聲：</label>
  <select id="speakerMenu"></select>
</div>

メニューを入力する前に、言語コードを名前にマップします。各言語には、2文字のコードがあります（例：英語の「en」、スペイン語の「es」）。 {"code": "pt", "name": "Portuguese"}などのオブジェクトの配列を作成します。ヘルパー関數(shù)は、特定のプロパティ値をこの配列を検索します。それを使用して、選択した音聲のコードに一致する言語名を見つけます。次の機(jī)能を追加します。

関數(shù)getLanguagetags（）{
  // ...（前と同じ）...
}

function searchObjects（array、prop、term、casesensitive = false）{
  // ...（前と同じ）...
}

次に、JavaScriptを使用してSelect Elementのオプションを設(shè)定しましょう。 #speakerMenu Select要素、言語表示用のプレースホルダー（後で削除）、ボイスの配列（ allVoices ）、言語コードの配列（ langtags ）、および選択した音聲（ voiceIndex ）を追跡する変數(shù)の変數(shù)を宣言します。

 Speakbtn、txtfld、speakermenu、allvoices、langtags、beoveindex = 0;

更新されたinit()関數(shù)は、 #speakerMenuに參照を追加し、Web Speech APIがサポートされている場合はsetUpVoices()を呼び出します。 Chromeの場合、音聲の変更を聞き、セットアップを再実行します。 Chromeは聲を非同期に処理し、この余分なステップを必要とします。

 function init（）{
  // ...（上記のように変更されたinit機(jī)能）...
}

setUpVoices()関數(shù)は、 speechSynthesis.getVoices()を使用してSpeechSynthesisVoiceオブジェクトを取得します。 getAllVoices()を使用して、潛在的な重複聲を処理します。後でフィルタリングするために、各音聲オブジェクトに一意のIDが追加されます。 allVoicesは次のようなオブジェクトが含まれます。

 {id：48、buelguri： "Paulina"、name： "Paulina"、Lang： "es-mx"、localservice：true}、
{id：52、buelguri： "samantha"、name： "samantha"、lang： "en-us"、localservice：true}、
{id：72、buelguri： "google deutsch"、name： "google deutsch"、lang： "de-de"、localservice：false}

setUpVoices()の最後の行は、関數(shù)を呼び出してスピーカーメニューオプションを作成します。音聲IDはオプションの値として使用され、名前と言語が表示されます。

 function setupvoices（）{
  allvoices = getallvoices（）;
  createpeakermenu（allvoices）;
}

関數(shù)getallvoices（）{
  // ...（前と同じ）...
}

関數(shù)CreateSpeakermenu（聲）{
  // ...（前と同じ）...
}

selectSpeaker()関數(shù)（ speakerMenu変更時に呼び出されます）は、選択したインデックスを保存し、選択した音聲を取得し、言語コードを抽出し、 langtagsの言語名を検索し、ディスプレイを更新します。

関數(shù)selectspeaker（）{
  // ...（前と同じ）...
}

最後に、 talk()を更新して、選択した音聲と言語を使用し、音聲レートの設(shè)定を許可します。

 function talk（）{
  // ...（上記のように修正されたトーク機(jī)能）...
}

これにより、ステップ2が完了します。さまざまな聲と言語で実験してください！

ステップ3：完全なポリグロットアプリケーション

最終的なステップでは、UIを改良し、機(jī)能を追加します。

• 言語選択メニュー
• ユーザー調(diào)整可能な音速
• 言語の選択に基づいて変換されるデフォルトのフレーズ

これが更新されたHTMLです：

<div>
  <label for="languageMenu">言語：</label>
  <select id="languageMenu"></select>
</div>

<div>
  <label for="rateFld">スピード：</label>
  <input type="number" id="rateFld" min="0.5" max="2" step="0.1" value="0.8">
</div>

JavaScript変數(shù)宣言を変更して、 allLanguages 、 primaryLanguages 、 langhash 、 langcodehash 、 rateFld 、 languageMenu 、およびblurbsを含めます。 Flag、 initialSetup 、言語メニューの設(shè)定を制御します。

 Speakbtn、txtfld、speakermenu、allvoices、langtags、beoveindex = 0;
Alllanguages、PrimaryLanguages、Langhash、Langcodehashをしましょう。
leatefld、languagemenu、blurbs;
let initialsetup = true;
defaultblurb = "私は私の母國の伝統(tǒng)音楽を楽しんでいます。";

init()関數(shù)は、 blurbsアレイを作成し、 rateFldおよびlanguageMenuを參照し、言語検索用のハッシュテーブルを作成します。

 function init（）{
  // ...（上記のように変更されたinit機(jī)能）...
}

setUpVoices()は、 getAllLanguages() 、 getPrimaryLanguages() 、 filterVoices() 、およびcreateLanguageMenu()を呼び出します。 getAllLanguages() allVoicesから一意の言語を抽出し、 getPrimaryLanguages()メイン言語コードを抽出します。

 function setupvoices（）{
  // ...（上記のように修正されたsetupvoices関數(shù)）...
}

関數(shù)getalllanguages（聲）{
  // ...（前と同じ）...
}

関數(shù)getPrimarylanguages（langlist）{
  // ...（前と同じ）...
}

filterVoices()選択した言語に基づいてallVoicesをフィルターし、 speakerMenuに入力し、Textareaに適切な宣伝文句を更新します。 createLanguageMenu()言語メニューオプションを作成します。 selectLanguage()は、言語が変更されたときに呼び出され、 filterVoices()をトリガーし、音聲選択をリセットします。

関數(shù)filtervoices（）{
  // ...（前と同じ）...
}

関數(shù)CreateLanguageMenu（）{
  // ...（前と同じ）...
}

関數(shù)SelectLanguage（）{
  // ...（前と同じ）...
}

getLookupTable()ユーティリティ関數(shù)を追加します：

 function getlookuptable（objectsarray、propname）{
  // ...（前と同じ）...
}

blurbs Arrayを追加します：

関數(shù)CreateBlurbs（）{
  // ...（前と同じ）...
}

最後に、 talk()を更新して、 rateFldからの音聲レートを使用します。

 function talk（）{
  // ...（上記のように修正されたトーク機(jī)能）...
}

これにより、ポリグロットアプリケーションが完了します。ユーザーは言語を選択し、音聲を選択し、音聲速度を調(diào)整し、選択した言語で話された選択したテキストを聞くことができます。これは、多言語Webアプリケーションを作成するためのWeb Speech APIのパワーと柔軟性を示しています。

以上が多言語翻訳にWeb Speech APIを使用しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。