3 files changed, 22 insertions, 4 deletions

diff --git a/ext/fg/img/pronounce.png b/ext/fg/img/pronounce.png
new file mode 100644
index 00000000..6056d234
--- /dev/null
+++ b/ext/fg/img/pronounce.png
diff --git a/ext/fg/js/client.js b/ext/fg/js/client.js
index ec2ea630..4ac40b65 100644
--- a/ext/fg/js/client.js
+++ b/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;
diff --git a/ext/fg/js/frame.js b/ext/fg/js/frame.js
index a61bb9ee..376d4826 100644
--- a/ext/fg/js/frame.js
+++ b/ext/fg/js/frame.js
@@ -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;
         }