# Selective autoplay of audio for certain notes

**URL:** <https://forums.ankiweb.net/t/selective-autoplay-of-audio-for-certain-notes/47544>\
**Category:** Card Design\
**Created:** [July 27, 2024, 9:28pm UTC](https://forums.ankiweb.net/t/selective-autoplay-of-audio-for-certain-notes/47544 "2024-07-27T21:28:16Z")\
**Posts on this page:** 1\
**Showing post:** 22

<div class="post-metadata">

**Author:** ![Eltaurus](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/eltaurus/32/10287_2.png) [@Eltaurus](https://forums.ankiweb.net/u/Eltaurus)\
**Post date:** [January 12, 2025, 7:56pm UTC](https://forums.ankiweb.net/t/selective-autoplay-of-audio-for-certain-notes/47544/22 "2025-01-12T19:56:56Z")

</div>

> [@Danika\_Dakika](#):
>
> I figured out that adding a certain display property fixed it on desktop.
> 
> ```auto
> <span style="display:inline-flex;">
> 
> ```
> 
> Unfortunately, that makes it sit a little _lower_ on the line on Android. I tried every value for display and couldn’t find one that worked for both.

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:

```css
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:

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

* * *

> [@Danika\_Dakika](#):
>
> rather than introduce more script complexity

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.

* * *

> [@Danika\_Dakika](#):
>
> But if you ever have a good reason to re-open a thread – just let me know! The reasons most of the threads here auto-close are spam, zombies, hijacking, and out of respect for OP. But keeping things organized and tidy benefits everyone!

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!

---

_[View the full topic](https://forums.ankiweb.net/t/selective-autoplay-of-audio-for-certain-notes/47544)._