# Clickable text button for replaying audio not working

**URL:** <https://forums.ankiweb.net/t/clickable-text-button-for-replaying-audio-not-working/18749>\
**Category:** Help\
**Created:** [April 1, 2022, 8:03pm UTC](https://forums.ankiweb.net/t/clickable-text-button-for-replaying-audio-not-working/18749 "2022-04-01T20:03:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lilysirius](https://avatars.discourse-cdn.com/v4/letter/l/958977/32.png) [@lilysirius](https://forums.ankiweb.net/u/lilysirius)\
**Post date:** [April 1, 2022, 8:03pm UTC](https://forums.ankiweb.net/t/clickable-text-button-for-replaying-audio-not-working/18749/1 "2022-04-01T20:03:18Z")

</div>

I have multiple audios on notes. They’re from different sources. Since the sources are of varied quality, it’s very helpful to know which source the audio is playing from. Clickable text buttons for replaying audios seems to be a good solution.

After trying for hours, I managed to make it work on my Linux desktop using the code from [reddit](https://www.reddit.com/r/Anki/comments/bzlfmr/how_to_replay_sound_when_click_on_text/er4bnqo/) with some small modification.

**But the button is not clickable on iPhone/iPad. Is there a way to work around?**

html:

```auto
{{#audio_BolorToli}}
    <input type="button" value="BT" class="data-audio" data-audio="audio_BolorToli">
    <span id="audio_BolorToli">
        {{audio_BolorToli}}
    </span>
{{/audio_BolorToli}}

```

js:

```auto
<script>
  var elements = document.querySelectorAll(".data-audio");
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("click", playSound);
  }
  function playSound(evt) {
    var el = evt.target.closest(".data-audio");
    var audio = document.getElementById(el.getAttribute("data-audio"));
    fakeClick(evt, audio.querySelector(".soundLink, .replaybutton"));
  }

  // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
  if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest =
    function(s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
          i,
          el = this;
      do {
        i = matches.length;
        while (--i >= 0 && matches.item(i) !== el) {};
      } while ((i < 0) && (el = el.parentElement));
      return el;
    };
  }
  
  // https://stackoverflow.com/a/1421968
  function fakeClick(event, anchorObj) {
    if (anchorObj.click) {
      anchorObj.click()
    } else if(document.createEvent) {
      if(event.target !== anchorObj) {
        var evt = document.createEvent("MouseEvents"); 
        evt.initMouseEvent("click", true, true, window, 
            0, 0, 0, 0, 0, false, false, false, false, 0, null); 
        var allowDefault = anchorObj.dispatchEvent(evt);
        // you can check allowDefault for false to see if
        // any handler called evt.preventDefault().
        // Firefox will *not* redirect to anchorObj.href
        // for you. However every other browser will.
      }
    }
  }
</script>

```

CSS

```auto
 .soundLink, .replay-button {
  display: none;
 }

```

Preview on PC where click replaying works:  
 ![Screenshot_20220401_160128](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/e/ee0cd699cdd0ff67af59a52310d0c019b71f6dbb.png)

Preview on iPad where click replaying doesn’t work:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/9/915789d21734f7373a3d1156f8496543f42af5b8.jpeg)

Here’s what I tried. I’m thinking if the problem is that click events do not work on touchscreens. So I changed click to touchstart and MouseEvents to TouchEvent. It still doesn’t work.

```auto
<script>
  var elements = document.querySelectorAll(".data-audio");
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("touchstart", playSound);
  }
  function playSound(evt) {
    var el = evt.target.closest(".data-audio");
    var audio = document.getElementById(el.getAttribute("data-audio"));
    fakeClick(evt, audio.querySelector(".soundLink, .replay-button"));
  }

  // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
  if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest =
    function(s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
          i,
          el = this;
      do {
        i = matches.length;
        while (--i >= 0 && matches.item(i) !== el) {};
      } while ((i < 0) && (el = el.parentElement));
      return el;
    };
  }
  
  // https://stackoverflow.com/a/1421968
  function fakeClick(event, anchorObj) {
    if (anchorObj.touchstart) {
      anchorObj.touchstart()
    } else if(document.createEvent) {
      if(event.target !== anchorObj) {
        var evt = document.createEvent('TouchEvent');
        evt.initTouchEvent("touchstart", true, true, window);
        var allowDefault = anchorObj.dispatchEvent(evt);
        // you can check allowDefault for false to see if
        // any handler called evt.preventDefault().
        // Firefox will *not* redirect to anchorObj.href
        // for you. However every other browser will.
      }
    }
  }
</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:** [April 1, 2022, 11:20pm UTC](https://forums.ankiweb.net/t/clickable-text-button-for-replaying-audio-not-working/18749/2 "2022-04-01T23:20:17Z")

</div>

> 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.

From: [More Features - AnkiMobile Manual](https://docs.ankimobile.net/more.html?search=tappable#javascript)

---

<div class="post-metadata">

**Author:** ![lilysirius](https://avatars.discourse-cdn.com/v4/letter/l/958977/32.png) [@lilysirius](https://forums.ankiweb.net/u/lilysirius)\
**Post date:** [April 2, 2022, 1:04am UTC](https://forums.ankiweb.net/t/clickable-text-button-for-replaying-audio-not-working/18749/3 "2022-04-02T01:04:56Z")

</div>

Thanks so much! It works like a charm!

---

<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:49am UTC](https://forums.ankiweb.net/t/clickable-text-button-for-replaying-audio-not-working/18749/4 "2023-05-01T07:49:42Z")

</div>