ブラウザをJavaScriptで対話させる方法

1. 最も単純な例

言いたい単語やフレーズを受け取ってブラウザに読み上げさせる基本的な関数を作成しましょう。ほとんどの最新ブラウザで利用可能なネイティブの speechSyntehsis API を利用します。

関数speak(文){
    const utterance = 新しい SpeechSynthesisUtterance(sentence)
    window.speechSynthesis.speak(発話)
}

//テスト
話す('hello world');

信じられないかもしれませんが、ほとんどのブラウザに文章を読み上げさせるには、上記のコードだけが必要です。ここで何が起こっているのか見てみましょう。

単語をパラメータとして受け取るspeak()関数を作成しました。サウンドオブジェクトを作成します。これは実際には、何を言うか、どのように言うかに関するすべてのデータを含む言語要求オブジェクトです。

2. 音声の速度とピッチをカスタマイズする

もう少し複雑な例を作って、話される言葉の速度とピッチを変更してみましょう。

/**
 * @param sentence: 発音する文 * @param pitch: ピッチ、値の範囲 (0 - 2) デフォルト値: 1
 * @param rate: 発話速度、値の範囲 (0.1 - 10) デフォルト値: 1
 */
関数speak(文, ピッチ, 速度) {
    const utterance = 新しい SpeechSynthesisUtterance(sentence)

    発話率 = 率
    utterance.pitch = ピッチ

    window.speechSynthesis.speak(発話)
}

上記の例では、元の関数に基づいて、ピッチと話す速度の 2 つのパラメーターを追加しました。サウンドオブジェクトを作成した後、サウンドオブジェクトの特定のプロパティを直接変更できます。ただし、現時点ではコンストラクターまたはセッターメソッドを通じて変更することはできません。

pitch は 0 から 2 までの範囲の浮動小数点数で、デフォルト値は 1 です。この値の効果は、エンジンやサウンドによって制限される場合があります。

rate は 0.1 から 10 までの範囲の浮動小数点数で、デフォルト値は 1 です。

ここで、上記のコードを簡単な文章で呼び出すと、ブラウザは通常の発話速度とトーンで次のように話します。

話す('Hello world', 1, 1)

3. 音量の調整方法

ピッチやテンポを調整するのと同じように、音量も調整できます。その方法を簡単に見てみましょう。

/**
 * @param sentence: 発音する文 * @param volume: 音量、値の範囲 (0 - 1) デフォルト値: 0.5
 */
関数speak(文, 音量) {
    const utterance = 新しい SpeechSynthesisUtterance(sentence)

    発話.音量 = 音量

    window.speechSynthesis.speak(発話)
}

前のコードを変更して、ボリュームパラメータを渡します。音量も 0 から 1 までの浮動小数点数で、デフォルト値は 0.5 です。

同様に、現在のところ、コンストラクターまたはセッターメソッドを介してボリュームを設定する方法はありません。これで、必要な文と音量をこの関数に渡し、希望する結果を聞くことができます。

4. よく使われる機能

speechSynthesis オブジェクトには、役に立つ関数がいくつかあります。言語の学習の進行を一時停止、再開、またはキャンセルすることもできます。簡単に見てみましょう:

const utterance = new SpeechSynthesisUtterance('Hello world');
window.speechSynthesis.speak(発話);

// 一時停止 window.speechSynthesis.pause();
// 再開 window.speechSynthesis.resume();
// キャンセル window.speechSynthesis.cancel();

上記のコードは必要な文章を読み上げ、音声は一時停止、再開され、最後にキャンセルされます。上記のコードをブラウザで試すこともできます。

また、speechSynthesis オブジェクトの paused プロパティを通じてオーディオが一時停止されているかどうかを直接判断することもできます。このプロパティは、オーディオが一時停止されているかどうかを示すブール値を返します。

window.speechSynthesis.paused // ブール値

まだ読んでいない文章が残っている場合はどうすればよいでしょうか?また、pending というプロパティもあり、これは発話待ちの音声があるかどうかを確認するために使用されます。処理が保留中の音声があるかどうかを示すブール値を返します。

const utterThis = new SpeechSynthesisUtterance('Hello world');
const utterThat = new SpeechSynthesisUtterance('Hello JavaScript');

window.speechSynthesis.speak(utterThis);
window.speechSynthesis.speak(utterThat);
ウィンドウの音声合成が保留中。

上記のコードを実行すると、2 つの音声クリップがキューに入れられ、順番に再生されます。 pending プロパティを取得すると、再生を待機している 2 番目の音声があるため、この値は true を返します。

注: 音声が 1 つしかない場合は、再生する音声がキューに登録されていないため、pending プロパティは常に false を返します。

5. イベント監視

SpeechSynthesisUtteranceapi を使用すると、いくつかの便利なイベントをリッスンできます。一緒に見てみましょう:

const utterance = new SpeechSynthesisUtterance('Hello world')

utterance.addEventListener('start', () => console.log('発話の開始'))
utterance.addEventListener('pause', () => console.log('発話が一時停止されました'))
utterance.addEventListener('resume', () => console.log('発話が再開されました'))
utterance.addEventListener('end', () => console.log('発話終了'))

window.speechSynthesis.speak(発話)