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