Elementary audio playback support

ext/bg/js/templates.js

@@ -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>";

ext/fg/js/client.js

@@ -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;

ext/fg/js/frame.js

@@ -26,8 +26,8 @@ function registerKanjiLinks() {
     }
 }
 
-function registerActionLinks() {
+function registerLearnLinks() {
-    for (const link of [].slice.call(document.getElementsByClassName('action-link'))) {
+    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;
         }

ext/manifest.json

@@ -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"

tmpl/term.html

@@ -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="Pronounce" class="action-pronounce" data-sequence="{{../sequence}}" data-index="{{@index}}"><img src="{{../root}}/img/pronounce.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>
+        {{#if enableAnkiConnect}}
-    </div>
+        <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}}