Skip to content

Instantly share code, notes, and snippets.

@takatama
Created Dec 1, 2014
Embed
What would you like to do?
英語トレーニング (Deferredのthen)
音声が出ます。日本語に対応する英文を作りましょう。
body {
font: 30px sans-serif;
}
<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>
// 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');
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment