任意のWebページに音声合成機能を追加する方法

の テキスト読み上げ 機能は テキストの話し言葉 デバイスに表示されます。現在、ノートパソコン、タブレット、携帯電話などのデバイス この機能はすでにあります. Webブラウザなど、これらのデバイスで実行されているすべてのアプリケーションは、 それを利用する, そして その機能を拡張する. ナレーション機能は、次のような用途に適しています。 豊富なテキストを表示, それとして リスニングのオプションを提供しています ウェブサイトの訪問者へ.

WebスピーチAPI

の WebスピーチJavaScript API へのゲートウェイです。 Webブラウザで音声合成機能にアクセスする. そのため、テキストを多用するWebページに読み上げ機能を導入して、読者がそのコンテンツを聴くことができるようにしたい場合は、この便利なAPIを使用することができます。 音声合成 インタフェース.

初期コードとサポートチェック

はじめに、次のようにしてWebページを作成しましょう。 ナレーションのサンプルテキスト, そして 3つのボタン.

     
  たくさんの友達とのうさぎ
  うさぎはとても人気がありました… 
 しかし彼は断り、それを述べて… 
  この話の教訓…

ボタンは ナレーションのコントロール. 今私達はかどうか確かめる必要があります UA をサポート 音声合成 インタフェース。そうするために、私達はすぐにJavaScriptと点検する 窓 オブジェクトは 'speechSynthesis' 財産, か否か.

 onload = function（）if（ウィンドウ内の 'speechSynthesis'）/ *音声合成はサポートされています* / else / *音声合成はサポートされていません* /

もし speechSynthesis 利用可能です、まず私たち の参照を作成 speechSynthesis 我々が割り当てること シンセ 変数。私達も フラグを立てる とともに 偽 価値（私達は後でポストでその目的を見るでしょう）、そして私達 参照を作成してイベントハンドラをクリックする 3つのボタン（再生、一時停止、停止）も同様.

ユーザーがボタンの1つをクリックすると、それぞれの機能（onClickPlay（）, onClickPause（）, onClickStop（））と呼ばれる.

 if（ウィンドウ内の 'speechSynthesis'）var synth = speechSynthesis; var flag = false。 / *ボタンへの参照* / var playEle = document.querySelector（ '＃play'）; var pauseEle = document.querySelector（ '＃pause'）; var stopEle = document.querySelector（ '＃stop'）; / *ボタンのクリックイベントハンドラ* / playEle.addEventListener（ 'click'、onClickPlay）; pauseEle.addEventListener（ 'click'、onClickPause）; stopEle.addEventListener（ 'click'、onClickStop）; function onClickPlay（） function onClickPause（） function onClickStop（）

カスタム関数を作成する

それではましょう クリック機能を構築する イベントハンドラによって呼び出される3つの個々のボタンの.

再生/再開

Playボタンがクリックされると、まず私たちは をチェック 旗. もし 偽, に設定します 本当の, ボタンが後でクリックされたときはいつでも、 最初 もし 条件が実行されない （旗が 偽 再び）.

それから私たち の新しいインスタンスを作成します。 音声合成発話 読み上げるテキスト、読み上げ音量、読み上げられた音声、スピード、ピッチ、および言語など、スピーチに関する情報を保持するインターフェイス。記事の本文を追加 コンストラクタのパラメータとして, そしてそれを 発話 変数.

 function onClickPlay（）if（！flag）flag = true; utterance = new SpeechSynthesisUtterance（document.querySelector（ 'article'）。textContent）; utterance.voice = synth.getVoices（）[0]; utterance.onend = function（）flag = false; ; synth.speak（発話）; if（synth.paused）/ *ナレーションの再開/再開* / synth.resume（）;

私達は使用します SpeechSynthesis.getVoices（） メソッド スピーチの声を指定する ユーザーのデバイスで利用可能な音声から。このメソッドはデバイスで利用可能なすべての音声オプションの配列を返すので、 最初に利用可能な機器の音声を割り当てる を使用して utterance.voice = synth.getVoices（）[0]; ステートメント.

の 一人ぼっち プロパティは、イベントハンドラを表します。 スピーチが終了したときに実行されます. その中で、私達はの価値を変える 旗 変数 falseに戻る スピーチを開始するコードが 実行できる ボタンが もう一度クリック.

それから我々は呼び出す SpeechSynthesis.speak（） するための方法 ナレーションを始める. 私達はまた点検する必要があります ナレーションが一時停止されている場合, 読み取り専用を使用しています SpeechSynthesis.paused 財産。ナレーションが一時停止されている場合は、 ナレーションを再開する ボタンをクリックすると、 SpeechSynthesis.resume（） 方法.

2.一時停止

それでは、作成しましょう。 onClickPause（） 最初に確認する機能 ナレーションが進行中で一時停止していない場合. 我々はこれらの条件をテストすることができます SpeechSynthesis.speaking そしてその SpeechSynthesis.paused プロパティ両方の条件が当てはまるならば、 onClickPause（） 関数 スピーチを一時停止 を呼び出すことによって SpeechSynthesis.pause（） 方法.

 function onClickPause（）if（synth.speaking &&！synth.paused）/ *ナレーションの一時停止* / synth.pause（）;

3.停止

の onClickStop（） 機能は に似た建造物 onClickPause（）. スピーチが進行中の場合、 やめて を呼び出すことによって SpeechSynthesis.cancel（） その方法 すべての発話を削除します.

 function onClickStop（）if（synth.speaking）/ *ナレーションを停止* / / *サファリの場合* / flag = false; synth.cancel（）;

発言の取り消しについては、 一人ぼっち イベントは自動的に発生します, その中にすでにフラグリセットコードを追加しました。しかしながら, Safariブラウザにバグがあります それがこのイベントの発生を妨げているのです。 onClickStop（） 関数。 Safariをサポートしたくないのであれば、そうする必要はありません。.

ブラウザサポート

最新のブラウザのすべての最新バージョン 完全または部分的なサポート 音声合成API用です。 Webkitブラウザは複数のタブから音声を再生しません。一時停止はバグがあり（機能はしますがバグがあります）、ユーザーがWebkitブラウザでページをリロードしても音声はリセットされません。.

実演デモ

下記のライブデモを見たり、Githubで完全なコードをチェックしてください。.

ペンを見るÂ??Â°Â…¸×¢スピーチへのテキスト - CodePenのHONGKIAT（@hkdc）によるJavaScript.