Learn Japanese Through Pokemon: Hacking audio into Memrise

I was up studying late last night and quickly realized one of the major problems with this technique is I get no auditory memorization or help with pronunciation.

My first thought was to use the ImTranslator service. Which has very good pronunciation. Better than that of Google Translate. My second thought was the site was too cumbersome to use, and that there should be a good API out there. Unfortunately, most people seem to be the Google version. “No problem!” I thought, “I can find a way to inject ImTranslator’s audio into Memrise!” An hour later, I can click on any row of my Japanese definitions in Memrise to play the associated audio. Here’s how it goes:

1) Find a way to get the audio file from ImTranslator.

2) Find a way to inject that audio when I click on some Japanese using JavaScript.

3) Find a way to have this JavaScript always work when I go to Memrise.

I know I can do the last two with the Spidermonkey extension for Google Chrome, but the first one presents a challenge. Here’s how I tackled that.

Get the cURL command for the translation out of DevTools:

Which looked something like this:

Realize that it’s not simply returning a consumable URL, such as an MP3 file, for the audio, but the entire page HTML. Additionally, it seems to have generated a SWF for the audio on the server side. Okay, that throws a bone into the mix. I know that means I need to parse out the <embed> URL. I know doing that with Spidermonkey is still going to cause some cross-domain policy issues, and I’d prefer not to burden myself with operating within the cage of a browser extension. Instead, I can just create a Node.js script to do all the heavy lifting. That’s it.

Additionally, I threw in the English condition for the girlfriend, who plays with me sometimes.

In order to run this script, I’m using Node.js v0.10.1 (but you can probably get away with 0.8.19). I also ran these commands in the same folder:

npm install connect

npm install http

npm install url

My directory looks like this:

Now I needed to create the Spidermonkey script. That took a little work, because Memrise loads the lesson via AJAX. So, I was lazy and decided to just capture the click event on the TD elements. Here’s a good spot, right on the ‘Move item’ icon. Additionally, I do it for the first 2 columns, and assume the first column is Japanese, and the second column is English.

Well, that’s it. I have more ideas in my head and I can add more professionalism to these solutions, but I’m not at the point it’s beneficial. Still, I want to hack and pan things out as I go along and get feedback or advice if I can. If you have any questions, feel free to shout out @ericmuyser on Twitter!