AudioContext not heard although it is running

Question

I am loading some audio file using the Web Audio API. I am making sure that the audio context is unlocked by running resume on user gesture but I have the following issue:

When loading the thing playing the sound immediately in the web page, all sounds work properly but when I am loading it inside an iframe, no sound is heard, unless I refresh (or navigate) to the page that contains the iframe. This means that whenever I navigate using the vue router no sound is heard.

There are no errors or warning in the console. I am already using allow="autoplay" in the iframe.

One thing I noticed is that removing allow="autoplay" makes the sound work for some reason but then I have issues when the sound inside the iframe needs to autostart. It is a bit glitchy and does not start immediately.

I didn't have this issue when using nuxt2 and now with nuxt3 this started happening. I am not sure if it's the way the server is now built or something different. The sound file is an external file so it's not part of the nuxt bundle and the issue is only happening on chrome android. Every other browser/OS combination works properly. Any ideas?

Update 1:

I see that in the case of using the internal route, the audio context is created as running. This is the only real difference I can see. When refreshing in that page it starts suspended and I get the warning about the user gesture being required and then when using the internal route it starts running and I don't get the warning which is kind of normal but still doesn't explain why the sounds can't be heard. I tried suspending the audio context manually on sound creation to mimic the refresh case but it does not help.

Update 2:

I solved the issue with a workaround. I removed the allow="autoplay" attribute from the iframe and added an extra step to start the audio so that there is a user interaction to unlock the audio context. I still do not understand what the problem is. I used the debugger to compare the two applications during sound creation and sound play. They are identical. When using the vue router the audio context in the iframe is in both cases running on creation, the audio is initialized in the exact same way and all properties are identical.

It is very weird because this happens only when using an iframe with allow="autoplay" on chrome android and only with the nuxt3 application. I am leaning towards being something related on the way the nuxt3 app is built but I can't really put my finger in it.

Even though the workaround works perfectly, I would be grateful for any suggestions that could lead to a resolution of the issue because the problem is just hidden under the carpet and not really fixed so it might come up again in the future.