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.
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.
- make a custom button, and just put it behind the audio-player (behind meaning z-index, but both on the same position).
- apply zero oppacity to the html-audio-player, so that it seems invisible.
- 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.
- in order to simulate an interactive behaviour, i wanted the html-player to trigger an animation that affects the custom button.
- 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…
- ONLY IN SAFARI 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.
- 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.