# Setting your cards so that the audio plays if you click anywhere

**URL:** <https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577>\
**Category:** Card Design\
**Created:** [June 6, 2022, 4:07am UTC](https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577 "2022-06-06T04:07:26Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ochiba](https://avatars.discourse-cdn.com/v4/letter/o/c4cdca/32.png) [@ochiba](https://forums.ankiweb.net/u/ochiba)\
**Post date:** [June 6, 2022, 4:07am UTC](https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577/1 "2022-06-06T04:07:26Z")

</div>

Hello!

I have a deck of cards consisting entirely of images (it displays one image on the front, and then the back just has another image that is the same size with the answer), and I would like to set it so that it auto-plays an audio file when you show the back, and then if you want to play the audio again, instead of there being a button, you can just click anywhere on the card to replay it.

My HTML/CSS ability is lower intermediate, and I’ve been able to figure out how to style the replay button, but I can’t figure out how to get rid of the button and just make the entire card clickable instead. Is there a way to do this?

---

<div class="post-metadata">

**Author:** ![BlackBeans](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/blackbeans/32/2283_2.png) [@BlackBeans](https://forums.ankiweb.net/u/BlackBeans)\
**Post date:** [June 6, 2022, 4:39am UTC](https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577/2 "2022-06-06T04:39:36Z")

</div>

You can add a `onclick="..."` attribute to the `img` tag, and replace `...` with javascript code that triggers the audio play.

---

<div class="post-metadata">

**Author:** ![ochiba](https://avatars.discourse-cdn.com/v4/letter/o/c4cdca/32.png) [@ochiba](https://forums.ankiweb.net/u/ochiba)\
**Post date:** [June 6, 2022, 4:42am UTC](https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577/3 "2022-06-06T04:42:41Z")

</div>

Thank you! I’ve done very little with javascript, so I don’t know what code to put there.

---

<div class="post-metadata">

**Author:** ![BlackBeans](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/blackbeans/32/2283_2.png) [@BlackBeans](https://forums.ankiweb.net/u/BlackBeans)\
**Post date:** [June 6, 2022, 4:43am UTC](https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577/4 "2022-06-06T04:43:21Z")

</div>

Well, how did you make your previous button work?

---

<div class="post-metadata">

**Author:** ![ochiba](https://avatars.discourse-cdn.com/v4/letter/o/c4cdca/32.png) [@ochiba](https://forums.ankiweb.net/u/ochiba)\
**Post date:** [June 6, 2022, 4:46am UTC](https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577/5 "2022-06-06T04:46:52Z")

</div>

I was able to style the .replay-button in CSS, so I could change the size and colors, even replace it with “🔊”, without using any javascript. But I haven’t been able to figure out how to get rid of the button entirely and still have a way to click and play the audio.

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [June 6, 2022, 10:30pm UTC](https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577/6 "2022-06-06T22:30:54Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/3/3a3e1de574294103e18b5d24e741b7d1c8f87128.png)

As you can see, Anki’s audio buttons call the function `pycmd`, which sends a message to the Python side of things (wouldn’t call it backend, but something in-between).

The message consists of three parts: `play:context:str_index`

- `play`: Tells Anki which arguments to expect and which function to call when it receives the message. You can see here how Anki reacts to the command within `reviewer.py`:

> <https://github.com/ankitects/anki/blob/638286a3fcbcaaa3d95fbcb1bc2dd32c4b97a749/qt/aqt/reviewer.py#L531-L532>

- `context`: either `q` (question) or `a` (answer)
- `str_index`: position of the sound file inside the card

> <https://github.com/ankitects/anki/blob/96bacf792c844f85b3054fe60a64e72cd933a361/qt/aqt/sound.py#L825-L833>

* * *

Long story short, all you need to do is send a `pycmd` to tell Anki which soundfile to play, like this:

```auto
<img onclick="pycmd('play:a:0')">

```

or attach an EventListener to the whole document:

```auto
<script>
  if (!globalThis.soundClickListening) {
    document.addEventListener("click", () => pycmd("play:a:0"));
    globalThis.soundClickListening = true;
  }
</script>

```

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [June 6, 2022, 11:23pm UTC](https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577/7 "2022-06-06T23:23:59Z")

</div>

Here’s a more general script for anyone using more than one sound:

```auto
<script>
  (function cycleSounds() {
    let index = 0;

    const cmds = Array.from(document.querySelectorAll(".soundLink"), (el) =>
      el.getAttribute("onclick").replace(/return.*$/, "")
    );

    if (!globalThis.soundClickListening) {
      document.addEventListener("click", () =>
        eval(cmds[index++ % cmds.length])
      );
      globalThis.soundClickListening = true;
    }
  })();
</script>

```

---

<div class="post-metadata">

**Author:** ![dae](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/dae/32/65_2.png) [@dae](https://forums.ankiweb.net/u/dae)\
**Post date:** [June 7, 2022, 2:02am UTC](https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577/8 "2022-06-07T02:02:38Z")

</div>

Disclaimer: this is desktop-specific code, and may break at any time as it is not a public API.

---

<div class="post-metadata">

**Author:** ![ochiba](https://avatars.discourse-cdn.com/v4/letter/o/c4cdca/32.png) [@ochiba](https://forums.ankiweb.net/u/ochiba)\
**Post date:** [June 7, 2022, 3:59am UTC](https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577/9 "2022-06-07T03:59:24Z")

</div>

Thank you so much! This worked perfectly for me!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 7:35am UTC](https://forums.ankiweb.net/t/setting-your-cards-so-that-the-audio-plays-if-you-click-anywhere/20577/10 "2023-05-01T07:35:14Z")

</div>