ここでは，教師が用意した英文を音声として再生し，オーバーラッピングの練習ができるwebアプリを作成します。
音声を聞かせるアプリを作成しようとすれば，ネイティブの声を録音する必要があります。しかし，教師が個人で録音データを用意することは現実的ではないでしょう。そこで，ブラウザの読み上げ機能（speech synthesis APIと言います）を用いて，用意された英文を機械的に読み上げてもらいます。
サンプルページ
サンプルページを公開しているので，動作を確認してみましょう。ブラウザはchromeを推奨します。Internet Explorerでは作動しません。
https://mmsankosho.com/fasgram/read-aloud.html
実際に触れてみると分かりますが，一部に不自然なところもあるものの，全体としては非常に自然な発音として聞くことができます。ひと昔前のロボットのような発音とは異なり，かなり実用的なものに進化しているのではないでしょうか。
ブラウザで音声の読み上げを行うこと自体はそれほど難しいものではありません。今回の記事は，それをある程度webアプリとして操作可能なインターフェイスに落とし込む作業を主な目的としています。
コードの説明
実際のコードを見ていきましょう。使用する言語はJavaScriptです。ここではJavaScriptの学習者のために，なるべく細かく説明を加えていきたいと思います。
<meta name="viewport" content="width=device-width,initial-scale=1">まず，htmlのヘッダーからです。ビューポートの設定を行います。この設定は，スマートフォンで表示したときに文字が勝手に小さくならないようにするために必要です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">jqueryとjquery UIを読み込みます。jqueryは簡単に言えばJavaScriptのコードを省略して記述するためのプラグインです。また，jquery UIは画面のエフェクトを行うためのプラグインで，今回は英文をクリックしたときに背景の色が変化する部分で使用しています。
<link rel="stylesheet" href="./fasgram.css">サイト独自のcssを読み込みます。
<div id="container">
<header><p class="size-5">fasgram 英文法トレーニングwebアプリ<span class="badge">動作サンプル</span></p></header>
<article>
<audio id="mp3-start" src="./mp3/start.mp3"></audio>
<div id="display"></div>
</article>
<footer></footer>
</div>サイトのブロック要素です。この部分については，前回の記事【教師オリジナルアプリを作ろう】英文法アプリの見た目をアプリらしく／スマホに対応させる(JavaScript)を参考にしてください。基本的にそれと同じものです。英文や日本文などの文字は<div id="display"></div>の中に記述していきます。
JavaScriptはブロック要素の中身をあとで書き換えることができるので，いったんブロック要素（文字を入れる箱をイメージしてください）だけを用意して，あとからJavaScriptのコードで中身を入れていくという手順で進めていきます。
JavaScriptのコード
<script>
JavaScriptのコードは<script>～</script>で囲まれた部分に記述していきます。そのうちJavaScriptのコードは別ファイルに分けていきますが，とりあえずはhtmlファイルの中に直接記述していきます。