Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
英語トレーニング
<button id="controller">開始</button>
<div id="display-ja">
</div>
<div id="display-en">
</div>
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);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment