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.

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.

Browserhide

Part of the Anki review window.
Text: みんなの日本語: にんぎょう.  Below part of the Anki card
browser. One line highlighted. Text: 人形; Japanisch-De...; にんぎょう
The text みんなの日本語: is shown on the card, but not in the browser.

The mechanism that is used to hide the play button can also be used to hide other text repeated on every card. Put parts of your card template that should not appear in the card browser into spans with the class browserhide.

The effect of the browserhide class is similar to using the Browser Appearance feature hidden in the More button of the template editor.

There is another add-on that implements only this hiding of text in the text browser, called Lean browser qa.

PNG image version

An older version of this add-on that used an image file is still available at github.