Elementary audio playback support

This commit is contained in:
Alex Yatskov 2016-06-13 22:09:39 -07:00
parent 96dd2d45f9
commit e0f91b9a8a
6 changed files with 41 additions and 13 deletions

View File

@ -93,25 +93,33 @@ templates['kanji-list.html'] = template({"1":function(container,depth0,helpers,p
+ ((stack1 = container.invokePartial(partials["footer.html"],depth0,{"name":"footer.html","data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
},"usePartial":true,"useData":true,"useDepths":true});
templates['term.html'] = template({"1":function(container,depth0,helpers,partials,data,blockParams,depths) {
var stack1;
var stack1, helper, alias1=container.lambda, alias2=container.escapeExpression, alias3=depth0 != null ? depth0 : {};
return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.enableAnkiConnect : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
return " <div class=\"action-bar\">\n <a href=\"#\" title=\"Pronounce\" class=\"action-pronounce\" data-sequence=\""
+ alias2(alias1((depths[1] != null ? depths[1].sequence : depths[1]), depth0))
+ "\" data-index=\""
+ alias2(((helper = (helper = helpers.index || (data && data.index)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias3,{"name":"index","hash":{},"data":data}) : helper)))
+ "\"><img src=\""
+ alias2(alias1((depths[1] != null ? depths[1].root : depths[1]), depth0))
+ "/img/pronounce.png\"></a>\n"
+ ((stack1 = helpers["if"].call(alias3,(depth0 != null ? depth0.enableAnkiConnect : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ " </div>\n";
},"2":function(container,depth0,helpers,partials,data,blockParams,depths) {
var helper, alias1=container.lambda, alias2=container.escapeExpression, alias3=depth0 != null ? depth0 : {}, alias4=helpers.helperMissing, alias5="function";
return " <div class=\"action-bar\">\n <a href=\"#\" title=\"Add term as expression\" class=\"action-link disabled\" data-sequence=\""
return " <a href=\"#\" title=\"Add term as expression\" class=\"action-learn disabled\" data-sequence=\""
+ alias2(alias1((depths[1] != null ? depths[1].sequence : depths[1]), depth0))
+ "\" data-mode=\"vocab_kanji\" data-index=\""
+ alias2(((helper = (helper = helpers.index || (data && data.index)) != null ? helper : alias4),(typeof helper === alias5 ? helper.call(alias3,{"name":"index","hash":{},"data":data}) : helper)))
+ "\"><img src=\""
+ alias2(alias1((depths[1] != null ? depths[1].root : depths[1]), depth0))
+ "/img/add_vocab_kanji.png\"></a>\n <a href=\"#\" title=\"Add term as reading\" class=\"action-link disabled\" data-sequence=\""
+ "/img/add_vocab_kanji.png\"></a>\n <a href=\"#\" title=\"Add term as reading\" class=\"action-learn disabled\" data-sequence=\""
+ alias2(alias1((depths[1] != null ? depths[1].sequence : depths[1]), depth0))
+ "\" data-mode=\"vocab_kana\" data-index=\""
+ alias2(((helper = (helper = helpers.index || (data && data.index)) != null ? helper : alias4),(typeof helper === alias5 ? helper.call(alias3,{"name":"index","hash":{},"data":data}) : helper)))
+ "\"><img src=\""
+ alias2(alias1((depths[1] != null ? depths[1].root : depths[1]), depth0))
+ "/img/add_vocab_kana.png\"></a>\n </div>\n";
+ "/img/add_vocab_kana.png\"></a>\n";
},"4":function(container,depth0,helpers,partials,data) {
var stack1, helper, options, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", buffer =
" <div class=\"term-expression\"><ruby>";

BIN
ext/fg/img/pronounce.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 610 B

View File

@ -167,6 +167,13 @@ class Client {
});
}
api_pronounce(index) {
const dfn = this.definitions[index];
const url = `http://assets.languagepod101.com/dictionary/japanese/audiomp3.php?kana=${dfn.reading}&kanji=${dfn.expression}`;
const audio = new Audio(url);
audio.play();
}
api_displayKanji(kanji) {
bgFindKanji(kanji, (definitions) => {
const sequence = ++this.sequence;

View File

@ -26,8 +26,8 @@ function registerKanjiLinks() {
}
}
function registerActionLinks() {
for (const link of [].slice.call(document.getElementsByClassName('action-link'))) {
function registerLearnLinks() {
for (const link of [].slice.call(document.getElementsByClassName('action-learn'))) {
link.addEventListener('click', (e) => {
e.preventDefault();
const ds = e.currentTarget.dataset;
@ -36,9 +36,20 @@ function registerActionLinks() {
}
}
function registerPronounceLinks() {
for (const link of [].slice.call(document.getElementsByClassName('action-pronounce'))) {
link.addEventListener('click', (e) => {
e.preventDefault();
const ds = e.currentTarget.dataset;
window.parent.postMessage({action: 'pronounce', params: ds.index}, '*');
});
}
}
function onDomContentLoaded() {
registerKanjiLinks();
registerActionLinks();
registerLearnLinks();
registerPronounceLinks();
}
function onMessage(e) {
@ -50,7 +61,7 @@ function onMessage(e) {
function api_setActionState({index, state, sequence}) {
for (const mode in state) {
const matches = document.querySelectorAll(`.action-link[data-sequence="${sequence}"][data-index="${index}"][data-mode="${mode}"]`);
const matches = document.querySelectorAll(`.action-learn[data-sequence="${sequence}"][data-index="${index}"][data-mode="${mode}"]`);
if (matches.length === 0) {
return;
}

View File

@ -22,6 +22,7 @@
"fg/img/add_kanji.png",
"fg/img/add_vocab_kana.png",
"fg/img/add_vocab_kanji.png",
"fg/img/pronounce.png",
"fg/js/frame.js",
"fg/ttf/kanji-stroke-orders.ttf",
"fg/ttf/vl-gothic-regular.ttf"

View File

@ -1,11 +1,12 @@
<div class="term-definition">
{{#with options}}
{{#if enableAnkiConnect}}
<div class="action-bar">
<a href="#" title="Add term as expression" class="action-link disabled" data-sequence="{{../sequence}}" data-mode="vocab_kanji" data-index="{{@index}}"><img src="{{../root}}/img/add_vocab_kanji.png"></a>
<a href="#" title="Add term as reading" class="action-link disabled" data-sequence="{{../sequence}}" data-mode="vocab_kana" data-index="{{@index}}"><img src="{{../root}}/img/add_vocab_kana.png"></a>
</div>
<a href="#" title="Pronounce" class="action-pronounce" data-sequence="{{../sequence}}" data-index="{{@index}}"><img src="{{../root}}/img/pronounce.png"></a>
{{#if enableAnkiConnect}}
<a href="#" title="Add term as expression" class="action-learn disabled" data-sequence="{{../sequence}}" data-mode="vocab_kanji" data-index="{{@index}}"><img src="{{../root}}/img/add_vocab_kanji.png"></a>
<a href="#" title="Add term as reading" class="action-learn disabled" data-sequence="{{../sequence}}" data-mode="vocab_kana" data-index="{{@index}}"><img src="{{../root}}/img/add_vocab_kana.png"></a>
{{/if}}
</div>
{{/with}}
{{#if reading}}