【第四回】JavaScript初心者が最強のTOEFLタイピングアプリを作りたい【音声読み上げ機能】

JavaScript
この記事は約3分で読めます。

この記事の最終更新日: 2021年3月16日

【第四回】JavaScript初心者が最強のTOEFLタイピングアプリを作りたい【音声読み上げ機能追加!】

はじめに

今回もTOEFLタイピングアプリの進捗を報告していきます。

今回はなかなか良い機能を追加できました。

タイピングアプリはこちらから遊ぶことができます。

タイピングゲーム

2021年3月16日追記

最新のタイピングアプリはこちらです。

Heroku | Application Error

前回の記事はこちら

スクリーンショット

TOEFLタイピング 名詞 音声付き
TOEFLタイピングゲーム 単語 ゆるプロ日記
TOEFL 単語タイピング メニュー

追加機能

今回は以下の機能を追加しました。

  • 音声読み上げ機能の追加
  • スタートボタンの追加
  • コースごとの総単語数を追加
  • スペースキーを押下時に画面スクロールしないように修正
  • メニュー画面のレイアウト修正

音声読み上げ機能を追加するには

英語学習で必須ともいえる、音声を追加しました。

タイピングしながらリスニングできるようになりました。

これでかなり実用性が上がったのではないでしょうか。

読み上げにはブラウザのAPIを呼び出して使っています。

const speech = new SpeechSynthesisUtterance();
speech.lang = 'en-US';
speechSynthesis.cancel();
speech.text = text;//読み上げたい単語を代入
speechSynthesis.speak(speech);

ただし、呼び出す際はユーザー操作(ボタン押下などのイベント)からでないと警告が発生するようです。

このアプリも警告が出ているので、今後修正していきます。

スタートボタンの配置

ゲーム開始時のボタンを用意しました。

音声の注意喚起などが目的です。

ボタンの位置は、cssで直接変えられないので<div>タグで囲んで領域を設定するなど、

レイアウトの工夫が必要です。

メニュー画面のレイアウト

リストタグ<ul><li>を使って整えました。

今後cssファイルから、デザインを整えていく予定です。

スペースキー押下時に画面スクロールしないようにするには

一通りの単語をタイピングし終わったら、スペースキーで最初に戻るようにしていました。

しかし、スペースキーを押すと画面がスクロールしてしまうという問題があります。

そこで、以下のコードをタイピング後の処理に書くことで解決しました。

window.onkeydown = function(e) {
    return !(e.keyCode == 32);
    }

今後について

タイピングゲームの本機能をもう少し修正したら、コースを増やしていきたいです。

イラストや写真も一緒に見れるようにすることも検討中です。

以上、daigoroでした。

次の記事はこちら

コメント

タイトルとURLをコピーしました