Controlling display and function of audio buttons

Anki Card Design
1

You can overcome Anki’s innate play audio function with a script (multiple sound files will not play in sequence). However, the first sound file will still play automatically and display a play button. To get around this I used a silent sound file (2 sec), and hid its button with CSS.

This script will stop multiple audio files on a card from playing - insert it at the top of the card template you want to control.

<script>
  var elem = document.querySelector(".soundLink, .replaybutton"); // AnkiMobile & AnkiDroid / AnkiDesktop
  if (elem) { elem.click(); }
</script>

This is really just to stop multiple files from playing but keep in mind that with Anki, there is no way to stop the first file from playing, so we will use this to to allow a silent file to play first, and then subsequent audio files will not play. It’s just a trick to give the experience of no audio playing.

The first step is to create the silent file: open your audio editing program, create a file, record for two seconds, highlight the full track, find the ‘insert silence’ feature and use it to replace the recording with silence, save the file as silence.mp3. Then import the file to a field called silent aud in your note using the image button.

In your template, call the silent aud field, but make sure it is the first audio file in the template.

{{silent aud}}

Now we need to hide this silent file’s play button - so the user will not see anything when the silent file plays, no button, no sound. We will use the style .class/ display property to hide the button.

First create a style class in your styling template for the card you are working on.

.noreplaybutton {
display: none;
}

Then go back to your template call {{silent aud}} and surround it with a div of class noreplybutton:

<div class="noreplaybutton";> {{silent aud}} </div>

This set up will cause Anki’s autoplay function to play a silent file, without displaying a button.

Next you can add audio to your template that will not play until its button is clicked.

5 Likes