ブラウザ標準で、英語を良い感じに発音してくれる、ということなので、
簡単な単語学習用アプリにしてみました。
ブラウザによって利用可能な音声が違う、ということで、色々試してみると面白いかも知れません。
英単語 よみ・かき・リスニング練習アプリ
HTML / CSS / JavaScript だけで動作する、ローカル利用可能な英単語練習アプリです。
DEMO
ソース
起動方法
index.html をブラウザで開きます。
Chrome、Edge、Firefox、Safari などの比較的新しいブラウザを推奨します。
Web サーバは任意です。file:// で開いても動作します。
取り敢えずはデモを利用してもらうのが楽だと思います。
主な機能
- プリセット英単語（カレンダー、天気・気温、気持ち・感情など）
- 個別単語の登録・削除
- 読み：英単語 → 日本語四択
- 書き：一文字欠落・連続二文字欠落・英単語四択
- リスニング：音声 → 英単語四択
- 15 カテゴリから出題範囲を選択
- 10〜100 問
- 単語ごとの出題有無
- 単語一覧 CSV 出力
- スコア履歴の保存・確認・CSV 出力・削除
- 5 種類の画面テーマ（ライト、パステルカラー、レトロセピア、グレースケール、ダーク）
- localStorage 利用
音声について
外部音声 API は使用していません。ブラウザ標準の speechSynthesis を使用します。
音声の種類、発音、利用可否は OS・ブラウザ・端末に依存します。
個別登録の日本語について
外部辞書 API を使わないため、日本語訳は利用者が入力します。
「音声を確認」では、英単語の読み上げと、入力済みの日本語表示を確認できます。
データ保存場所
以下はブラウザの localStorage に保存されます。
- 個別登録単語
- 単語ごとの出題設定
- スコア履歴
- 選択中の画面テーマ
ブラウザデータを消去すると削除されます。必要に応じて CSV を保存してください。
ファイル構成
-
index.html：画面 -
style.css：デザイン -
app.js：単語、出題、音声、保存、CSV 処理