Solution for click text to play sound

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="word_front" data-audio="sound-word">{{Word}}</div>
<span id="sound-word">{{Sound_Word}}</span>

<script>
  (() => {
    const elements = document.querySelectorAll("[data-audio]");
    for (const el of elements) {
      el.addEventListener("click", playSound);
    }
    function playSound(evt) {
      const el = evt.target.closest("[data-audio]");
      const audio = document.querySelector('#' + el.dataset.audio);
      audio.querySelector(".soundLink, .replaybutton").click();
    }
  })();
</script>

css

#sound-word {
	display: none;
}

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