英語トレーニング

jsdoit.html

<button id="controller">開始</button>
<div id="display-ja">
    
</div>
<div id="display-en">
    
</div>

jsdoit.js

var data = [
    {"ja": "これは良い車です。", "en": "This is a good car."},
    {"ja": "この本は良い。", "en": "This book is good."},
    {"ja": "あれはおもしろい雑誌ですか？はい、そうです。", "en": "Is that an interesting magazine? Yes, it is."}
];

$(function() {
    var Speaker = function (rate) {
        var u = new SpeechSynthesisUtterance();
        u.rate = rate || 1.0;
        u.onerror = function () {
            console.log('onerror');
        };
        u.onstart = function () {
            console.log('onstart');
        }
        u.onpause = function () {
            console.log('onpause');
        }
        u.onresume = function () {
            console.log('onresume');
        }
        u.onboundary = function () {
            console.log('onboundary');
        }
        
        this.speak = function (text, lang, func) {
            console.log('speak');
            window.speechSynthesis.cancel();
            u.text = text;
            u.lang = lang;
            u.onend = function () {
                console.log('onend');
                if (func) func();
            }
            window.speechSynthesis.speak(u);
        };

        this.english = function (text, func) {
            this.speak(text, 'en-US', func);
        };

        this.japanese = function(text, func) {
            this.speak(text, 'ja-JP', func);
        }
    };
    
    var speaker = new Speaker();
        
    var training = function (index) {
        $('#display-ja').text(data[index].ja);
        $('#display-en').empty();
        speaker.japanese(data[index].ja, function() {
            console.log('wait english');
            setTimeout(function () {
                $('#display-en').text(data[index].en);
                speaker.english(data[index].en, function() {
                    if (index < data.length - 1) {
                        setTimeout(function () {
                            training(index + 1);
                        }, 1000 * 2);
                    }
                });
            }, 1000 * 5);
        });
    };
    
    $('#controller').click(function () {
        training(0);
    });
});