Text-button audio not playing in AnkiDroid

AnkiDroid (Android)
1

I found some js script on stackoverflow and twisted a bit to make a text button that clicks to replay the audio.

It works perfectly on Desktop and iPhone/iPad, but does not work on AnkiDroid and AnkiWeb.

//Script for audio buttons
  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.
      }
    }
  }
//End of Scripts

I pair it with the card template

<input type="button" value="BD" class="data-audio tappable" data-audio="audioFile">
<span id="audioFile">{{audioFile}}</span>

and the css

.soundLink, .replaybutton {
  display: none;
 }

I expect the result to be a button with text “BD” that can be clicked to replay the audio in the audioFile field. This is confirmed on Desktop and iPhone/iPad, see below. It displays and plays correctly.

Desktop/iPhone/iPad:
image

On AnkiDroid, it displays the same as Desktop/iPhone/iPad, but pressing the button doesn’t replay the sound. The AnkiDroid is the most recent version from Google play store and the device has Android 13 and 11.

Anyone knows how to fix it?

FYI, it doesn't show correctly on AnkiWeb. Clicking the text button produces nothing, while pressing the play button in control bar plays the audio.

image
image907×65 6.72 KB

Well, I don’t particularly use AnkiWeb, so it doesn’t need to be troubleshooted. I posted it here in the hope that it provides some information for the issue on AnkiDroid.

2