Selective autoplay of audio for certain notes

Anki Card Design
22

Well, since the original audiobuttons are different on the two platforms any static setting (that does not alter appearance of the originals) ought to have differences manifesting themselves on either desktop or android. But if the above works, it can be easily built upon to change the display property based on a platform by using the following CSS instead of the inline styling:

html:not(.android) .replay-button.soundLink.muted span {
    display: inline-flex;
}

I think, it’s probably better to account for platform differences in JS, though. Here is the full code, which inserts the span tag conditionally:

<script>
setTimeout(()=>{
  const isAndroid = document.documentElement.classList.contains("android");
  const pattern = /\x5Bsound-muted:(.*?)\x5D/g;

  function audioHTML(filename) {
    return `<audio id="muted_audio${filename}"><source src="${filename}"></audio>`;
  }
  function buttonHTML(filename) {
    return `<a class="replay-button soundLink muted" href="#" onclick="document.getElementById('muted_audio${filename}').play()">
      ${isAndroid ? '<span>' : ''}
        <svg class="playImage" viewBox="0 0 64 64" version="1.1">
          <circle cx="32" cy="32" r="29"></circle>
          <path d="M56.502,32.301l-37.502,20.101l0.329,-40.804l37.173,20.703Z"></path>
        </svg>
      ${isAndroid ? '</span>' : ''}
    </a>`;
  }

  document.body.innerHTML = document.body.innerHTML.replace(pattern, (match, filename) => {
          return audioHTML(filename) + buttonHTML(filename);
      });
}, 0);
</script>

this ensures that the code for native and inserted audiobuttons is equivalent on either platform, making it immune to potential CSS changes in either of the apps. It also makes the code easily adaptable to HTML changes that apps might introduce in the future.

In terms of script complexity per se, this would only require a single line. The rest is supposed to be done by adding a container element around buttons’ HTML and choosing appropriate styling that would make differences less noticeable.

I wasn’t questioning the auto-closing itself (the reasons for that are apparent enough), I was just wondering how exactly things are organized in this forum. I have a feeling that I might require some help with one of my threads in the future, so thank you, I will keep this in mind!

1 Like