英会話学習サイトの英語音声読み上げを「Web Speech API Speech Synthesis」にしてみた。

以前作成した英会話学習サイトに英語音声読み上げ機能を付けていたが、その機能が使えなくなったので、「Web Speech API Speech Synthesis」を使ってみた。

Web Speech APIは、ブラウザのネイティブAPIで、大半のブラウザで利用できる。使い方はすごく簡単で、JavaScriptで、下のような関数を作っておいて、英文テキストを渡してやるだけ。英語だけでなく、日本語など各国語に対応している。

function speak(text) {
	var speech = new SpeechSynthesisUtterance(text);
	speech.lang = 'en-US';	// アメリカ英語
	speechSynthesis.speak(speech);	// 音声読み上げ
}

Web Speech API対応にした英会話学習サイトは以下。モバイル版とPC版がある。フレーズはNHKゴガクルから拝借した。

≪2nd 英語：モバイル版≫

https://ok2nd.sakura.ne.jp/eigo/mobile/

f:id:art2nd:20191231140704j:plain

f:id:art2nd:20191231140706j:plain

モバイル版では、フレーズを１つずつ表示する。日本語、英語それぞれを隠すこともできる。表示順をランダムにもできる。Autoボタンを押すと、自動的に順次またはランダムにフレーズを表示。時間間隔は1秒から8秒の間で設定できる。「英語を隠す」状態でAutoにすると、日本語表示してから一定時間後に英語表示をする。「音声」ボタンを押すと、英文を読み上げる。「音声Auto」にしておくと、フレーズが切り替わると同時に音声読み上げをする。