{{site_title_here}}

Flash Cards with Anki

Written by

jonathanb

in

Pat from the Keegan’s Learners’ Session periodically sends out practice tips, and this week’s encouragement referenced Tom Lockney’s slides from a presentation at the O’Flaherty Irish Music Retreat in Midlothian, Texas. The slides promote active, directed practice and cite Josh Turknett’s Brainjo practice tips.

Much of the material was review/encouragement of techniques I try/have tried before, but something new to me was the label “spaced repetition,” basically using flash cards to recall or reinforce an idea before you forget it. I’ve tried an failed to keep flash cards for language and musical practice — I whine about keeping physical artifacts, or just maintenance of the cards. Tom’s slides suggest using Anki, an open-source desktop flash-card management program with free Android and paid iOS clients. The Anki apps are supported by a free service to store and sync your card decks.

Searching around the web for how incorporate Anki into my practice routine, I found

Anki Card Hacks

I didn’t find much documentation on how to embed audio or music notation into an Anki deck, though Ankiweb has an example Practique deck with both audio and notation. Furthermore there are lots of r/Anki posts directing users to embed Latex and Lilypond into cards. So what follow are some hacks I tripped over.

Embed Audio Content

The flash cards are just HTML documents, and Anki allows you to edit the HTML directly. Furthermore, the DOM engine is pretty liberal in giving the author permission to fiddle. Here’s a simple trick to add an audio player. Open the HTML editor for either side of the card and enter.

<audio controls="controls" preload="none" style="width: 100%;">
  <source src="https://www.natunelist.net/wp-content/uploads/2014/06/Midnight-on-the-water.mp3?_=1" type="audio/mpeg">
  <a href="https://www.natunelist.net/wp-content/uploads/2014/06/Midnight-on-the-water.mp3">
    https://www.natunelist.net/wp-content/uploads/2014/06/Midnight-on-the-water.mp3
  </a>
</audio>

You’ll get the following widget.

Javascript!

The Anki DOM renderer is general-purpose. You can, gulp, even enter Javascript code into a card via the HTML editor, between the <script> tags just like you would expect.

Referencing an external library is a little more complicated. Libraries read with <script src=”…” type=”text/javascript”> tags are read only when the card is being edited. As far as I can tell, your page can only edit those libraries when you edit, which seems only useful for rendering static content… like musical notation.

You can reference remote javascript, or download a library and save it prefixed with an underscore to the collection.media directory for reference. The directory is a little tricky to find, but CheCheDaWaff posted a trick on Reddit to locate it.

Abcjs

So, the reason why you might want to use Javascript to render static content might be to render SVG musical notation using abcjs. The trick here is to edit your flash card twice — once to render the notation and encode the SVG into the HTML document, and a second time with the render() command commented out before you save it. Alternatively, you can wrap the render() command in a try/catch block.

The whole point is to avoid a null-reference error from preventing Anki from rendering the the card. While the Anki DOM is pretty liberal in letting you muck around, it’s not as forgiving as most browsers in handling Javascript errors.

So here’s the example:

<script src="_abcjs_midi_5.8.0-min.js" type="text/javascript"></script>
<div id="my-tune"></div>
<script>
  var myTune = `T:My Tune
M:2/4
L:1/8
K:D
|: DE FG | AB cd :|`;
  try { ABCJS.renderAbc('my-tune', myTune); } catch (_) {}
</script>

More posts