Note: I’m very much a novice and I’m struggling to figure out what’s the right direction to be researching a possible solution to the following issue:
I’m using an Iframe to run some HMTL5 audio playback. When the user clicks a button, an audio file is played. However, the user’s previous interactions with the page will change which particular audio file gets played. This currently works by querying a database of audio source URL’s. Finding the right one, sending it to the iFrame with postMessage, and then having the iFrame’s code play that audio file using an onMessage event. All of this works beautifully except on iOS. On iOS, audio is only allowed to play when the element playing the audio is the same element that the user just interacted with. So I’m trying to find the right way to set up the code on the iFrame so that as a result of the user clicking on it, it sends a postMessage to the page, the page runs the database query, returns the appropriate URL, sends the URL in a postMessage back to the iFrame, then the iFrame script assigns that URL as the audio source and plays the file. But all of this needs to happen within the iFrame script’s “onClick” function. I’m struggling to find a way to have the onClick function, send a postMessage to the page, then, still as part of the same onClick event, wait for an onMessage event from the page, and after that arrives, finally play that audio file.
I’ve looked into Promises / async functions, but it doesn’t seem like they would apply to waiting for an onMessage event from an outside source.
Is there a way to make this happen!? If not, is there a completely different way I should be going about this?!
Any guidance would be amazing. Thanks!