Audio works on preview but not published version

Custom code
1

Screenshot 2024-06-21 at 6.28.45 pm

I’ve added code, to a digital magazine site I’ve created, that enables me to play audio (via a button widget). While in preview mode, this audio works and the published version works for me locally. However, the audio doesn’t work externally (on mobile).

Essentially, the code appears to work. And because of this, I’m wondering if the issue we’re experiencing is related to browsers blocking the audio from playing.
Has anyone experienced issues with browsers blocking audio?

While I don’t think the code is the issue here, the code I’m using to play the audio is below.
A truncated version of the site I’ve developed is here: Zoo News - Forum enq | Readymag
I’m hoping someone might be able to shed some light on this issue.

<script>
  var audio = new Audio("https://www.dropbox.com/scl/fi/1cqu0upxrq2toode02zc6/Siamang.mp3?rlkey=kaz5102qjge3co581gf7ebugh&st=so1p80pf&dl=1");
function togglePlay() {
   return audio.paused ? audio.play() : audio.pause();
};
  
$('div.common-button[data-id="666a97049bde2a004bad6f63"]').click( togglePlay );
  </script>
2

your code looks fine…
and on dekstop it is working.
This means:

option1: maybe the “click” isnt firing because the mobile needs an “ontouch” or “tab” and is not listening to the “click”.

option2: the elements arent loaded yet and your code is getting executed too early.
Try to wrap your code in a settimeout of around 4 seconds and check if it is working now.
Maybe on mobile it takes longer to load all elements.

<script>
setTimeout(function() {
  var audio = new Audio("https://www.dropbox.com/scl/fi/1cqu0upxrq2toode02zc6/Siamang.mp3?rlkey=kaz5102qjge3co581gf7ebugh&st=so1p80pf&dl=1");
function togglePlay() {
   return audio.paused ? audio.play() : audio.pause();
};
  
$('div.common-button[data-id="666a97049bde2a004bad6f63"]').click( togglePlay );
         }, 4000);  
  </script>
3

Hi there, I’m potentially interested in ongoing help with any coding issues that arise with any of our Readymag editions. Is this something neueMeta could assist us with? If the answer is yes, please send me a line here.