I have an audio element on a page which is currently being loaded inside an iframe with zero height and width. I'm using a postMessage from the parent page to tell the child page to play some audio.
This is working great on desktop browsers, however I'm having some trouble on mobile browsers. (I'm testing on Chrome for Android, but I think iOS will have the same problem).
Mobile browsers require that the media play() command is triggered by a user initiated action. In my case, the user is clicking a button on the parent page to initiate the play, but it seems that the when doing the postMessage, the browser looses track of that.
Is there any way for me to get audio to play inside the iframe without making the page inside the iframe visible to the user?