【教師オリジナルアプリを作ろう】オリジナルの英文を聞かせる音読アプリの作り方をはじめから(JavaScript)

<meta name="viewport" content="width=device-width,initial-scale=1">

<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">

<link rel="stylesheet" href="./fasgram.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>

<script>

let uttr = new SpeechSynthesisUtterance();
let voices = window.speechSynthesis.getVoices();

function start_display() {

    $('#display').empty();

    const content = '<p class="size-2">ボタンを押して、トレーニングを開始しましょう。</p>'
        + '<div class="btn-wrapper">'
        + '<button type="button" id="start-button" class="btn btn-start size-1">音読練習</button>'
        + '</div>';
    $('#display').append(content);

    $('#start-button').on('click', function() {
        $('#mp3-start')[0].play();
        setTimeout(() => {
            read_aloud();
        },1500);
    });

async function read_aloud() {

    const content = '<div style="text-align:right;"><button type="button" id="home-btn" class="size-3">最初に戻る</button></div>'
        + '<p id="instruction" class="size-3">英文をタップして音声を再生してください。音声に合わせて，声に出して読みましょう。</p>'
        + '<p id="question-number" class="size-3"></p>'
        + '<p id="en-sentence" class="size-1"></p>'
        + '<p id="ja-sentence" class="size-3"></p>'
        + '<div id="console" class="btn-wrapper">'
        + '<button type="button" id="confirm" class="btn btn-confirm size-1">次に進む</button>'
        + '</div>';
    $('#display').empty().append(content);

    $('#home-btn').on('click', function(){
        speechSynthesis.cancel();
        const result = window.confirm('スタート画面に戻ります。');
        if(result) {
            location.reload();
        }
    });

    const data = await fetch('./sentences.json');
    const obj = await data.json();
    const obj_json = JSON.stringify(obj); //json文字列に変換
    const texts = JSON.parse(obj_json); //配列に格納

sentences.json

[["Due to the rain, our performance in the game was far from perfect.",
    "雨のせいで、試合の出来は決して完璧ではありませんでした。"],
["Emergency doors can be found at both ends of this hallway.",
    "非常口はこの廊下の両端にあります。"],
["My plans for studying abroad depend on whether I can get a scholarship.",
    "私の留学計画は、私が奨学金を得ることができるかどうかにかかっています。"],
["Noriko can speak Swahili and so can Marco.",
    "ノリコはスワヒリ語を話すことができ、マルコも話すことができます。"],
["To say you will go jogging every day is one thing, but to do it is another.",
    "あなたが毎日ジョギングに行くと言うことと、それをすることは別です。"],
["Our boss is a hard worker, but can be difficult to get along with.",
    "私たちの上司は働き者ですが、仲良くするのは難しいかもしれません。"],
["When Ayano came to my house, it happened that nobody was at home.",
    "アヤノが私の家に来たとき、たまたま誰もいなかった。"],
["We’ll be able to get home on time as long as the roads are clear.",
    "道順がはっきりしていれば、私たちは時間通りに家に帰ることができるでしょう。"],
["I know you said you weren’t going to the sports festival, but it is an important event, so please give it a second thought.",
    "私はあなたがスポーツフェスティバルには行かないと言っていたことは知っていますが、それは重要なイベントですので、もう一度考え直してください。"],
["I didn’t recognize any of the guests except for the two sitting in the back row.",
    ["私は後ろの列に座っている2人を除いて、招待客の誰も分かりませんでした。"],
["Some parents are opposed to letting children watch TV at dinner time.",
    "夕食時に子供にテレビを見させることに反対する親もいる。"],
["However hard it may seem to be, we have to do the job.",
    "どんなに大変そうに見えても、私たちは仕事をしなければなりません。"],
["I met Shigeo at the supermarket by chance.",
    "私はスーパーで偶然シゲオに会った。"],
["This plan needs the support of at least two thirds of the members present at this meeting.",
    "この計画には、この会議に出席しているメンバーの少なくとも3分の2以上の賛成が必要です。"],
["Peace Memorial Park lies in the center of the city.",
    "平和記念公園は市の中心部に位置しています。"],
["Does getting together on Friday suit you?",
    "金曜日に集まるということで良いですか。"],
["It was in her garden that she found the buried treasure.",
    "彼女が埋もれていた宝を見つけたのは彼女の庭だった。"],
["What did you go to Tokyo for during the Golden Week holiday?",
    "ゴールデンウィークの間，あなたは何のために東京に行きましたか。"],
["The beginning of today’s board meeting was the very moment I wanted to make use of to announce our new project.",
    "今日の役員会の始まりは、まさに私が自分たちの新しいプロジェクトの発表に活かしたいと思った瞬間だった。"],
["We tried to talk Satoru out of buying such an expensive sports car.",
    "私たちはそれほど高価なスポーツカーを買わないようにサトルを説得しようとした。"],
["Casey was getting worried because the bus going to the airport was clearly behind schedule.",
    "空港へ行くバスが明らかに予定より遅れているのでケーシーは心配になった。"],
["If you are in a hurry, you should call Double Quick Taxi because they usually come in no time.",
    "急いでいる場合は、ダブルクイックタクシーは大抵すぐに来るので、電話してください。"],
["After almost dropping the expensive glass vase, James decided not to touch any other objects in the store.",
    "高価なガラスの花瓶を落としそうになったあと、ジェームズは店内の他の物に触れないと決心した。"],
["We should make the changes to the document quickly as we are running out of time.",
    "私たちは時間が不足しているので、素早くその書類を変更すべきです。"],
["It was impossible to meet everyone’s demands about the new project.",
    "新しいプロジェクトに対するみんなの要求に応えることは不可能でした。"],
["Write a list of everything you need for the camping trip. Otherwise, you might forget to buy some things.",
"キャンプ旅行に必要なものすべての一覧表を書いて下さい。そうでなければ、あなたはいくつかのものを買うのを忘れるかもしれません。"],
["Text messaging has become a common means of communication between individuals.",
    "携帯電話のメールは個人間のコミュニケーションの一般的な手段となっている。"],
["I was shocked when I watched the completely surprising ending of the movie.",
    "私は映画の本当に驚くような結末を見てショックを受けました。"],
["There is no avoiding the increase in traffic on this highway during holidays."],
    "休暇中のこの高速道路の交通量の増加は避けられない。"],
["The police officer asked the witness to describe the situation as accurately as possible.",
    "警察官は目撃者にできるだけ正確に状況を説明するよう求めた。"],
["I’ll look up the train schedule before going to the station, just in case.",
    "念のため、駅に行く前に列車の時刻表を調べます。"],
["When I tried to play an online game, the computer would not work at all.",
    "オンラインゲームをプレイしようとしたときに、コンピューターがどうしても動かなかった。"],
["You’ll have more job opportunities in the city, but your living expenses will be higher.",
    "あなたは都市でより多くの仕事の機会を得ることができるが、生活費はより高くなるだろう。"],
["Confused about how to deal with the situation, they sat in silence waiting for someone to start speaking.",
    "その状況に対処する方法について混乱したので、彼らは誰かが話し始めるのを待ちながら座っていた。"],
["Vancouver was the largest of the four Canadian cities we visited.",
    "バンクーバーは私たちが訪れたカナダの4つの都市の中で最大だった。"],
["Their smiles disappeared after getting directions, for they still had a long way to walk.",
    "指示を得たあと彼らの笑顔は消えた。というのも彼らには歩くための長い道のりがあった。"],
["I think the new teacher is a bit too strict. What do you think of her?",
    "新しい先生は少し厳しすぎると思います。彼女をどう思いますか。"],
["His continuous support kept the international trade project from being a failure.",
    "彼の継続的な支援は、国際貿易プロジェクトが失敗するのを防いだ。"],
["It will take less time to get to the airport when the construction of the monorail is finished.",
    "モノレールの建設が完了すれば、空港に着くまでの時間が短くなるだろう。"],
["It can be difficult to tell real leather shoes from artificial leather ones by their appearance.",
    "見た目で本物の革の靴と人工皮革の靴を区別するのは難しいことがある。"]]

texts[0][0] = "Due to the rain, our performance in the game was far from perfect."
texts[0][1] = "雨のせいで、試合の出来は決して完璧ではありませんでした。"
texts[1][0] = "Emergency doors can be found at both ends of this hallway."
texts[1][1] = "非常口はこの廊下の両端にあります。"
texts[2][0] = "My plans for studying abroad depend on whether I can get a scholarship."
texts[2][1] = "私の留学計画は、私が奨学金を得ることができるかどうかにかかっています。"

......

    for(let i = 0; i < 1000; i++) {
        let a = Math.floor(Math.random() * texts.length);
        let b = Math.floor(Math.random() * texts.length);
        [texts[a], texts[b]] = [texts[b], texts[a]];
    }

    for(let id = 0; id < 5; id++) {

        const en_sentence = texts[id][0];
        const ja_sentence = texts[id][1];
        $('#question-number').text('No. '+(id+1));
        $('#en-sentence').text(en_sentence);
        $('#ja-sentence').text(ja_sentence);

en_sentence = "Due to the rain, our performance in the game was far from perfect."
ja_sentence = "雨のせいで、試合の出来は決して完璧ではありませんでした。"

        $('#en-sentence').on('click', function(){

            $("#en-sentence").effect("highlight", { color: "#ccdeff" }, 2000);

            let voice;
            if(id % 2 == 0) {
                voice = 'female';
            } else {
                voice = 'male';
            }

            speech_sentence(en_sentence, voice);

        await new Promise((resolve) => {
            $('#confirm').on('click', function(){
                speechSynthesis.cancel();
                $('#en-sentence').off();
                resolve();
            });
        });

    await new Promise((resolve) => {
        const content = '<div class="size-1"><div class="mb-1">トレーニング終了です。</div>'
            + '<div class="btn-wrapper">'
            + '<button type="button" id="confirm" class="btn btn-confirm size-1">最初に戻る</button>'
            + '</div>';
        $('#display').empty();
        $('#comment_box').empty();
        $('#display').append(content);
        //OKボタンが押されたらスタート画面へ
        $('#confirm').on('click', function() {
            speechSynthesis.cancel();
            location.reload();
            resolve();
        });
    });

function speech_sentence(sentence, voice) {
    speechSynthesis.cancel();
    voices = speechSynthesis.getVoices();
    if(voice == 'female') {
        uttr.voice = voices[3]; //女性の声
    } else {
        uttr.voice = voices[5]; //男性の声
    }
    uttr.volume = 1.0; //音量
    uttr.rate = 0.9; //読み上げ速度
    uttr.pitch = 1.0; //音程
    uttr.lang = 'en-US'; //言語
    uttr.text = sentence; //読み上げテキスト
    speechSynthesis.speak(uttr); //再生
}

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>fasgram 英文法トレーニングwebアプリ</title>
<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">
<link rel="stylesheet" href="./fasgram.css">
</head>
<body>
<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>
<script>
//音声のインスタンス化
let uttr = new SpeechSynthesisUtterance();
let voices = window.speechSynthesis.getVoices();
//スタート画面
function start_display() {
    $('#display').empty();
    const content = '<p class="size-2">ボタンを押して、トレーニングを開始しましょう。</p>'
        + '<div class="btn-wrapper">'
        + '<button type="button" id="start-button" class="btn btn-start size-1">音読練習</button>'
        + '</div>';
    $('#display').append(content);
    $('#start-button').on('click', function() {
        $('#mp3-start')[0].play();
        setTimeout(() => {
            read_aloud();
        },1500);
    });
}
//語句選択問題
async function read_aloud() {
    //画面の初期化とレイアウトの設定
    const content = '<div style="text-align:right;"><button type="button" id="home-btn" class="size-3">最初に戻る</button></div>'
        + '<p id="instruction" class="size-3">英文をタップして音声を再生してください。音声に合わせて，声に出して読みましょう。</p>'
        + '<p id="question-number" class="size-3"></p>'
        + '<p id="en-sentence" class="size-1"></p>'
        + '<p id="ja-sentence" class="size-3"></p>'
        + '<div id="console" class="btn-wrapper">'
        + '<button type="button" id="confirm" class="btn btn-confirm size-1">次に進む</button>'
        + '</div>';
    $('#display').empty().append(content);
    //ホームボタンが押されたら最初に戻る
    $('#home-btn').on('click', function(){
        speechSynthesis.cancel();
        const result = window.confirm('スタート画面に戻ります。');
        if(result) {
            location.reload();
        }
    });
    //データの読み込み
    const data = await fetch('./sentences.json');
    const obj = await data.json();
    const obj_json = JSON.stringify(obj); //json文字列に変換
    const texts = JSON.parse(obj_json); //配列に格納
    //データをシャッフル
    for(let i = 0; i < 1000; i++) {
        let a = Math.floor(Math.random() * texts.length);
        let b = Math.floor(Math.random() * texts.length);
        [texts[a], texts[b]] = [texts[b], texts[a]];
    }
    //音読を順番に行う
    for(let id = 0; id < 5; id++) {
        //英文と日本文の表示
        const en_sentence = texts[id][0];
        const ja_sentence = texts[id][1];
        $('#question-number').text('No. '+(id+1));
        $('#en-sentence').text(en_sentence);
        $('#ja-sentence').text(ja_sentence);
        $('#en-sentence').on('click', function(){
            $("#en-sentence").effect("highlight", { color: "#ccdeff" }, 2000);
            //問題番号が奇数なら女性，偶数なら男性
            let voice;
            if(id % 2 == 0) {
                voice = 'female';
            } else {
                voice = 'male';
            }
            //音声を再生する
            speech_sentence(en_sentence, voice);
        });
        await new Promise((resolve) => {
            $('#confirm').on('click', function(){
                speechSynthesis.cancel();
                $('#en-sentence').off();
                resolve();
            });
        });
    }
    //全問終了のメッセージ
    await new Promise((resolve) => {
        const content = '<div class="size-1"><div class="mb-1">トレーニング終了です。</div>'
            + '<div class="btn-wrapper">'
            + '<button type="button" id="confirm" class="btn btn-confirm size-1">最初に戻る</button>'
            + '</div>';
        $('#display').empty();
        $('#comment_box').empty();
        $('#display').append(content);
        //OKボタンが押されたらスタート画面へ
        $('#confirm').on('click', function() {
            speechSynthesis.cancel();
            location.reload();
            resolve();
        });
    });
}
function speech_sentence(sentence, voice) {
    speechSynthesis.cancel();
    voices = speechSynthesis.getVoices();
    if(voice == 'female') {
        uttr.voice = voices[3]; //女性の声
    } else {
        uttr.voice = voices[5]; //男性の声
    }
    uttr.volume = 1.0; //音量
    uttr.rate = 0.9; //読み上げ速度
    uttr.pitch = 1.0; //音程
    uttr.lang = 'en-US'; //言語
    uttr.text = sentence; //読み上げテキスト
    speechSynthesis.speak(uttr); //再生
}
//スタート画面
start_display();
</script>
</body>
</html>

/*フォントファミリー*/
body {
    font-family: Georgia, sans-serif;
}
/*スマートフォン用の基準文字サイズ*/
body {
    font-size: 24px;
}
/*デスクトップ用の基準文字サイズ*/
@media screen and (min-width:680px) {
    body {
        display: flex;
        justify-content: center;
        font-size: 18px;
    }
}
/*コンテナの幅*/
#container {
    max-width: 680px;
}
/*フォントサイズ*/
.size-1 {
    font-size: 1.5rem;
}
.size-2 {
    font-size: 1.25rem;
}
.size-3 {
    font-size: 1.0rem;
}
.size-4 {
    font-size: 0.75rem;
}
.size-5 {
    font-size: 0.5rem;
}
/*文字色*/
.color-blue {
    color: #3366CC;
}
.color-red {
    color: #FF6600;
}
/*左マージン*/
.ml-1 {
    margin-left: 10px;
}
/*下マージン*/
.mb-1 {
    margin-bottom: 10px;
}
/*中央に表示するメッセージ*/
.message {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 200px;
    background-color: #e5eeff;
    border-radius: 1.0rem;
    border: solid 2px #ffffff;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);/*影*/
}
/*ボタンの共通設定*/
.btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn {
    font-weight: 700;
    line-height: 1.5;
    padding: 1rem 4rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 0.25rem;
    border: solid 2px #ffffff;
    border-radius: 1.0rem;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
}
/*スタートボタンの色*/
.btn-start {
    color: #fff;
    background-color: #6699ff;
    border-radius: 2.5rem;
}
.btn-start:hover {
    color: #fff;
    background: #70a1ff;
}
/*OKボタンの色*/
.btn-confirm {
    color: #fff;
    background-color: #99cc33;
}
.btn-confirm:hover {
    color: #fff;
    background: #a7d741;
}
/*大問表示*/
#question-number {
    font-weight: 700;
}
/*選択肢の枠線*/
.box-1 {
    padding: 0.5em 1em;
    margin: 0.25em 0;
    font-weight: bold;
    color: #6091d3;
    background: #FFF;
    border: solid 2px #6091d3;
    border-radius: 10px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
}
.box-1 p {
    margin: 0; 
    padding: 0;
}
/*バッジ*/
.badge {
    padding: 3px 6px;
    margin-right: 8px;
    margin-left: 1px;
    font-size: 75%;
    color: white;
    border-radius: 6px;
    box-shadow: 0 0 3px #ddd;
    white-space: nowrap;
    background-color: #58ACFA;
}
#home-btn {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    background: #f1e767;
    background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
    background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
    background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
    -webkit-box-shadow: inset 1px 1px 1px #fff;
    box-shadow: inset 1px 1px 1px #fff;
}
#home-btn:hover {
    background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
    background: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%);
    background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
  }
#en-sentence {
    padding: 15px;
    border-radius: 10px;
}