Streaming live at 10am (PST)

Firefox & Chrome Interaction Bug

dear webflow community,
i’ve been dying over this one, please help if you can:

i want to click on an html-audio-player (the default one) and let that click trigger something else on the page. works perfectly in safari. works absolutely not in firefox and chrome. makes me go crazy.

the project:
i want to build a realy simple sound synthesis/mixing module. very easy, just different audio players with sort of ambient sound content, and the possibility to combine those different sounds to make your own soundscape. combinig meaning: just playing them simultaneously.
i found the default html-audio-player just fine for this, since i dont want a whole custom js-look what-so-ever, just one button to play/stop. also the default html-audio-player allows multiple players playing at once, which is exactly what i need! i’ve tried some custom players too, but they always automaticly stop, when another player starts.

my plan:

  1. make a custom button, and just put it behind the audio-player (behind meaning z-index, but both on the same position).
  2. apply zero oppacity to the html-audio-player, so that it seems invisible.
  3. that way, you think your’e hitting the button, but actually you’re clicking the player. and that works just fine! even in all different browsers, although the default html-audio-player looks and behaves a little different in every browser.

my problem:

  1. in order to simulate an interactive behaviour, i wanted the html-player to trigger an animation that affects the custom button.
  2. so you click the invisible player, the button interacts (moves, pops, changes colour, whatever) and the music plays! so the html-player is the trigger, the button is affected. this also works fine, but…
  3. ONLY IN SAFARI :frowning: :disappointed_relieved: with firefox and chrome this doesn’t work at all. i think they’re sort of not allowing any interactions on the player.

i’ve tried all sorts of things: different animations, playing with the z-index, changing the target, or trying to let the html-player trigger an animation on itself, changing the default size of the player… nothing works, it drives me nuts.

read only:
https://preview.webflow.com/preview/radio-da-da?utm_medium=preview_link&utm_source=designer&utm_content=radio-da-da&preview=ba73cc921477b301c7e5990a97e14e76&pageId=600b67f3332f42064fa35a9d&mode=preview

live site:
https://www.radio-dada.de/audio-player-3

notes:

  • only the first eight players have interactions set to them yet. issue is the same on every player.
  • the players are scaled up by a factor of 3.6 using the 2D & 3D transforms. (that way the play-button-area of the html player is bigger, and its harder to miss it…) issue is still the same when not scaled up.
  • don’t get irritated, right now the sound-source is just white noise, the same source in every player.
  • there’s some custom code in the inside head and before body tag, but that is linked to another page of my project. so it shouldn’t affect my issue.

:heart: :heart: :heart: