Playing a sound - Running JS in iFrame prevents it

Got a weird one for you. I am trying to play an alarm when a timer is up.

Playing a sound in JS is relatively easy. Getting around Chrome's restrictions for when you are allowed to is trickier, you must first have some interaction with the page before it will let you. To test this I made a fiddle where you click button that executes a beep() function and from then on you can just run the beep() function whenever.

If you try and execute beep() before you click the button, it fails with this error:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

However, within Retool, if you put the same beep code into a js query and use a button to trigger it, you get the error.

I am guessing it is because JS code is run in a separate iFrame, and that iFrame of course has not had any user interaction, Chrome prevents the sound.

I made a custom component to call the beep query. Failed of course for the same reason. I then added a beep() function within it and that works.

So to get things working I think need to have a button in the custom component to activate sound and I have to figure out how to trigger the beep() function programmatically from outside of the component when my timer trips.

Or is there a way to tell the js iFrame that it has been touched? In my wild flailings and gyrations, randomly trying this, that and the other I got the query beeping! No idea how or why and have been unable to recreate, but it tells me there is a way to do it.

Not sure you managed to get around the issue with user-interaction and audio contexts, but this custom component was as close as I managed to get. Stil need to change the buttons to something more visually appealing :smiley:

1 Like