Flash card with text and play buttons.

Simple add-on that adds play buttons to the cards for audio and video files.

With this it is possible to replay individual files. For example just the pronunciation of a word, or just an example sentences.

The button is created as inline SVG and copies the look of the replay button of newer AnkiDroid versions. The minimum size is set to 12 pixel, otherwise the button is the same size as the text.

The old Anki 2.0 version worked in the card layout editor and the preview as well. The new Anki 2.1 version works only during reviews so far. I think i’ll update the other add-ons before i go back to this. So replay there may take a while.

Styling

Anki review window. Large text “þéttbýll ” with a “play” button of the same size and small text “urban” with a small, red play button.
The replay button can be styled via CSS.

The buttons are created on the fly, and their appearance can be changed via the card templates. It is somewhat tricky to get CSS right. As an example that can be copied and adapted, to turn only one replay button red, wrap the field in a span with a class like red_button in the “Front Template” or “Back Template” of the card

<span class="red_button">{{Audio}}</span>

Then set fill to red for .red_button .replaybutton span svg in “Styling”:

.red_button .replaybutton span svg {
  fill: red;
}

This kind of styling should be done when using the night mode add-on, or you may end up with black replay buttons on a black background.

“urban” and a red play button with a shadow effect

On some platforms, CSS filters may work. For example this:

.red_button .replaybutton span svg {
  fill: red;
  -webkit-filter: drop-shadow( 5px 5px 2px #f88 )
}

might be used to add a shadow effect.

Card browser

The replay button is not shown in the card browser. Instead the sound file names are added to its list section in the way they are entered into the cards, as [sound:NN.mp3] or similar.

At leas that is the idea. I am not sure about this browser hide functionality on Anki 2.1. The same caveat as above applies.