# Click on texts to play audio

**URL:** <https://forums.ankiweb.net/t/click-on-texts-to-play-audio/13947>\
**Category:** Card Design\
**Created:** [October 6, 2021, 10:58am UTC](https://forums.ankiweb.net/t/click-on-texts-to-play-audio/13947 "2021-10-06T10:58:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![alex11](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/alex11/32/6147_2.png) [@alex11](https://forums.ankiweb.net/u/alex11)\
**Post date:** [October 6, 2021, 10:58am UTC](https://forums.ankiweb.net/t/click-on-texts-to-play-audio/13947/1 "2021-10-06T10:58:51Z")

</div>

I found this script on [reddit](https://www.reddit.com/r/Anki/comments/bzlfmr/comment/er1ou1h/), but I notice in order for the audio to play, I have to edit the card again, and that alone doesn’t guarantee it works, so I am wondering if anyone may know the problem, or has a better solution for playing audio on clicking the text.

---

<div class="post-metadata">

**Author:** ![kelciour](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kelciour/32/14770_2.png) [@kelciour](https://forums.ankiweb.net/u/kelciour)\
**Post date:** [October 6, 2021, 10:13pm UTC](https://forums.ankiweb.net/t/click-on-texts-to-play-audio/13947/2 "2021-10-06T22:13:37Z")

</div>

The script is a bit outdated and as it is might only work on AnkiDroid and won’t work on Anki and AnkiMobile due to this error message in the Chrome DevTools console after reviewing the second card.

> Uncaught SyntaxError: Identifier ‘…’ has already been declared

- [https://addon-docs.ankiweb.net/porting2.0.html#webview-changes](https://addon-docs.ankiweb.net/porting2.0.html#webview-changes)
- [AnkiWebView Inspector](https://ankiweb.net/shared/info/31746032)

You can fix it by converting the code inside the script tag to IIFE to isolate variable declarations or by using `onUpdateHook`.

> - onUpdateHook fires after the new card has been placed in the DOM, but before it is shown.
> - onShownHook fires after the card has faded in.
> 
> [https://addon-docs.ankiweb.net/features-and-debugging.html#card-review-javascript](https://addon-docs.ankiweb.net/features-and-debugging.html#card-review-javascript)

The updated script looks something like this.

```html
<div data-audio="sound">{{Text}}</div>
<div id="sound" hidden>{{Audio}}</div>

<script>
function playAudio(evt) {
    const el = evt.target.closest("[data-audio]");
    const audio = document.getElementById(el.dataset.audio);
    audio.querySelector(".replay-button, .replaybutton").click();
}

onUpdateHook.push(function() {
    const elements = document.querySelectorAll("[data-audio]");
    for (const el of elements) {
        el.addEventListener("click", playAudio);
    }  
});
</script>

```

The `Text` field contains the text and the `Audio` field contains the audio file. They’re linked together using `data-audio="{}"` and `id="{}"` attributes with the same string.

> `.replay-button` - Anki 2.1, AnkiMobile  
> `.replaybutton` - AnkiDroid

This is a sample Anki deck - [Click on Text to play Audio Template.apkg - Google Drive](https://drive.google.com/file/d/1y3wBaRDaN1FIamFneEfj7In2yVTOkp4f/view?usp=sharing)

If you want something different, maybe share a link to an Anki deck that you’d like to modify or explain a bit more what do you want to do.

---

<div class="post-metadata">

**Author:** ![alex11](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/alex11/32/6147_2.png) [@alex11](https://forums.ankiweb.net/u/alex11)\
**Post date:** [October 7, 2021, 7:28am UTC](https://forums.ankiweb.net/t/click-on-texts-to-play-audio/13947/3 "2021-10-07T07:28:14Z")

</div>

I tried it and it worked on anki 2.1, but not on ankimobile, any thoughts?

---

<div class="post-metadata">

**Author:** ![kelciour](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kelciour/32/14770_2.png) [@kelciour](https://forums.ankiweb.net/u/kelciour)\
**Post date:** [October 7, 2021, 8:38am UTC](https://forums.ankiweb.net/t/click-on-texts-to-play-audio/13947/4 "2021-10-07T08:38:53Z")

</div>

It’s probably because of this.

> **Javascript**
> 
> The [warnings](https://docs.ankiweb.net/templates/styling.html#javascript) that apply to the computer version also apply to AnkiMobile.
> 
> In addition to the above, another thing to be aware of in AnkiMobile is that your code also needs to play nicely with AnkiMobile’s tap detection. Taps on A/BUTTON elements, or elements that have an onclick handler should work as you expect.
> 
> If you have other elements that must receive tap events, give them the class ‘tappable’ to tell AnkiMobile 2.0.39 or later that it should pass taps through to the element.
> 
> [https://docs.ankimobile.net/more.html#javascript](https://docs.ankimobile.net/more.html#javascript)

Try these two versions.

- v2.1 (“tappable”)

- v2.2 (“onclick”)

---

<div class="post-metadata">

**Author:** ![hassan19](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/hassan19/32/6968_2.png) [@hassan19](https://forums.ankiweb.net/u/hassan19)\
**Post date:** [January 31, 2023, 3:23pm UTC](https://forums.ankiweb.net/t/click-on-texts-to-play-audio/13947/5 "2023-01-31T15:23:46Z")

</div>

i use this months ago, but after updating Anki 2.1.57. it was **ruined**.  
how i can **rebuild** this great idea ???

---

<div class="post-metadata">

**Author:** ![kelciour](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kelciour/32/14770_2.png) [@kelciour](https://forums.ankiweb.net/u/kelciour)\
**Post date:** [January 31, 2023, 6:13pm UTC](https://forums.ankiweb.net/t/click-on-texts-to-play-audio/13947/6 "2023-01-31T18:13:42Z")

</div>

It seems to work for me. Maybe it’s something else. Try installing [AnkiWebView Inspector](https://ankiweb.net/shared/info/31746032), activating it and looking for any errors in the [Console](https://developer.chrome.com/docs/devtools/console/) tab.

---

<div class="post-metadata">

**Author:** ![akni](https://avatars.discourse-cdn.com/v4/letter/a/e19adc/32.png) [@akni](https://forums.ankiweb.net/u/akni)\
**Post date:** [April 17, 2023, 7:53am UTC](https://forums.ankiweb.net/t/click-on-texts-to-play-audio/13947/7 "2023-04-17T07:53:07Z")

</div>

it’s still works in 2.1.61 Qt6. See my post below:

> [@Solution for click text to play sound](https://forums.ankiweb.net/t/solution-for-click-text-to-play-sound/29436):
>
> Many people may already know but I just realized that if you uncheck the option “Show play buttons on card with audio” (picture 1) or try to hide them by adding CSS code like: .soundLink, .replaybutton { display: none; }" the audio won’t be playable on Windows. I have consulted several topics about this issue but have not found any code that still works until now. Today I realized that the problem is simpler than I thought, here is the code if you are interested. \<div class="wo…

---

<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 17, 2023, 7:53am UTC](https://forums.ankiweb.net/t/click-on-texts-to-play-audio/13947/8 "2023-05-17T07:53:14Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.