英語トレーニング (Deferredのthen)

README

音声が出ます。日本語に対応する英文を作りましょう。

jsdoit.css

body {
  font: 30px sans-serif;
}

jsdoit.html

<div class="container">
    <button id="controller" class="btn btn-default">
        <span class="glyphicon glyphicon-play" aria-hidden= "true"></span>
    </button>
    <div id="display-ja"></div>
    <div id="display-en"></div>
</div>

jsdoit.js

// forked from takatama's "英語トレーニング (Deferredのdoneでnest)" http://jsdo.it/takatama/xpwE
// forked from takatama's "英語トレーニング" http://jsdo.it/takatama/qGIF
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."},
    {"ja": "あの雑誌はおもしろいですか？  いえ、おもしろくありません。", "en": "It that magazine interesting?  No, it isn't."},
    {"ja": "あれは正しくない。", "en": "That is not right."},
    {"ja": "これは本物の犬ではない。", "en": "This is not a real dog."},
    {"ja": "このおにぎりはあまり美味しくない。", "en": "This rice ball is not very tasty."},
    {"ja": "あれは塩ですか、それとも砂糖ですか？  塩です。", "en": "Is that salt or sugar?  It is salt."},
    {"ja": "あの男性はイタリアじんですか、それともフランス人ですか？  イタリアじんです。", "en": "It that man Italian or French?  He is Italian."},
    {"ja": "あの女性は韓国じんですか、それとも日本人ですか？  韓国じんです。", "en": "Is that woman Korean or Japanese?  She is Korean."}  
];

$(function() {    
    var Speaker = function (data, onUpdateJapanese, onUpdateEnglish) {

        var u = new SpeechSynthesisUtterance();

        if (window.navigator.userAgent.indexOf('iPhone') !== -1) {
            u.rate = 0.5;
        }
        
        var speak = function (text, lang) {
            var dfd = $.Deferred();
            window.speechSynthesis.cancel();
            u.text = text;
            u.lang = lang;
            u.onend = function () {
                dfd.resolve();
            };
            window.speechSynthesis.speak(u);
            return dfd.promise();
        };

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

        this.speakJapanese = function (text) {
            return speak(text, 'ja-JP');
        };

        var that = this;
        
        var wait = function(durationMilliSec, times) {
            var steps = times || 0;
            var dfd = $.Deferred();
            dfd.notify(steps);
            that.timer = setInterval(function () {
                steps -= 1;
                if (steps <= 0) {
                    clearInterval(that.timer);
                    that.timer = null;
                    dfd.resolve();
                }
                dfd.notify(steps);
            }, durationMilliSec);
            return dfd.promise();
        };

        var getJapanese = function () {
            return data[that.index].ja;
        };
        
        var getEnglish = function () {
            return data[that.index].en;
        };
        
        this.start = function (index) {
            console.log('start ' + index);
            this.index = index || 0;
            if (this.index > data.length - 1) {
                return;
            }

            var ja = getJapanese();
            var en = getEnglish();

            if (onUpdateJapanese) {
                onUpdateJapanese(ja);
            }
            speaker.speakJapanese(ja)
            .then(function() {
                return wait(1000, 5).progress(function(steps) {
                    if (onUpdateEnglish) {
                        onUpdateEnglish(steps);
                    }
                });
            })
            .then(function () {
                if (onUpdateEnglish) {
                    onUpdateEnglish(en);
                }
                return speaker.speakEnglish(en);
            })
            .then(function () {
                return wait(2000).done(function () {
                    that.index += 1;
                    that.start(that.index);
                });
            });
            this.status = 'playing';
        };
        
        this.pause = function () {
            console.log('pause');
            console.log(that.timer);
            window.speechSynthesis.cancel();
            if (that.timer) {
                clearInterval(that.timer);
                that.timer = null;
            }
            that.status = 'pausing';
        };
        
        this.resume = function () {
            console.log('resume');
            this.status = 'playing';
            this.start(this.index);
        };
        
        this.status = 'stopping';
        
        this.toggle = function () {
            if (this.status === 'playing') {
                this.pause();
            } else if (this.status === 'pausing') {
                this.resume();
            } else {
                this.start();
            }
        }
    };
    
    var speaker = new Speaker(data, function (ja) {
        $('#display-ja').text(ja);
        $('#display-en').empty();
    }, function (en) {
        $('#display-en').text(en);
    });
    
    $('#controller').click(function () {
        speaker.toggle();
        console.log('status is ' + speaker.status);
        if (speaker.status === 'playing') {
            $('#controller span').toggleClass('glyphicon-play glyphicon-pause');
        } else {
            $('#controller span').toggleClass('glyphicon-pause glyphicon-play');
        }
    });
});