Bug 218078 – Web Audio continues to play when navigating off the web page via an iframe

• Component: Web Audio
• Status: RESOLVED FIXED

Overview:
I have a web page playing Web Audio. This page contains an iframe. The iframe redirects the browser to another url on the same domain when the redirect button in it is clicked. The browser loads the new web page, but web audio continues to play for the previous page.


Steps to Reproduce: 

I have built an example at https://github.com/AdamXA/phaser3-webaudio-bug which requires an npm install and npm start to run the example.

1) View the page, see the canvas being rendered and hear the background music playing via Web Audio.

2) Click the white 'Click here' text in the top left of the canvas to be redirected to another web page.

Actual Results: Web Audio from the original page continues to play even though we are on a new page. If there is web audio on the new page, audio from both of those pages will play web audio simultaneously.

Additional Builds and Platforms: iOS and macOS Safari 14.0 and earlier

Additional Information: For some extra context behind this bug see: https://github.com/photonstorm/phaser/issues/5370

[Chris Dumez]

Here is what I did:
1. Downloaded test project from GitHub
2. Went to the project folder
3. Did `npm install`
4. Did `npm start`

It loaded http://localhost:8080 in Safari and I see the canvas but NO sound. I don't see any errors in the JS console.

[Chris Dumez]

$ npm start

> phaser3-project-template@1.1.0 start /Users/chris/Downloads/phaser3-webaudio-bug-master
> webpack-dev-server --config webpack/base.js --open

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/chris/Downloads/phaser3-webaudio-bug-master
ℹ ｢wdm｣: wait until bundle finished: /
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
ℹ ｢wdm｣: Hash: 4ced28bccb3452da59eb
Version: webpack 4.41.2
Time: 4986ms
Built at: 10/22/2020 8:54:54 AM
                               Asset       Size  Chunks             Chunk Names
c4903988d61e23e74f8dffcb10aca802.mp3    833 KiB          [emitted]  
efbfcf3c2043e8a0694698780cb966f9.png   5.25 KiB          [emitted]  
                          index.html  300 bytes          [emitted]  
                             main.js   17.1 MiB    main  [emitted]  main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/phaser/dist/phaser.js] 5.99 MiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/assets/oedipus_wizball_highscore.mp3] 82 bytes {main} [built]
[./src/assets/wizball.png] 82 bytes {main} [built]
[./src/index.js] 626 bytes {main} [built]
    + 21 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 448 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.

(In reply to Chris Dumez from comment #1)
> Here is what I did:
> 1. Downloaded test project from GitHub
> 2. Went to the project folder
> 3. Did `npm install`
> 4. Did `npm start`
> 
> It loaded http://localhost:8080 in Safari and I see the canvas but NO sound.
> I don't see any errors in the JS console.

I've updated the example now, I had that occur to me in Chrome but not in Safari. Now it should start playing audio after clicking on the image in the canvas. Once audio is playing try clicking the Click here text.

[Chris Dumez]

(In reply to adam552 from comment #3)
> (In reply to Chris Dumez from comment #1)
> > Here is what I did:
> > 1. Downloaded test project from GitHub
> > 2. Went to the project folder
> > 3. Did `npm install`
> > 4. Did `npm start`
> > 
> > It loaded http://localhost:8080 in Safari and I see the canvas but NO sound.
> > I don't see any errors in the JS console.
> 
> I've updated the example now, I had that occur to me in Chrome but not in
> Safari. Now it should start playing audio after clicking on the image in the
> canvas. Once audio is playing try clicking the Click here text.

Ok, I can reproduce now, thanks. Will investigate.

[Chris Dumez]

Created attachment 412117 [details]
Patch

[Radar WebKit Bug Importer]

<rdar://problem/70588177>

[EWS]

Committed r268893: <https://trac.webkit.org/changeset/268893>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 412117 [details].

[Alexey Proskuryakov]

Comment on attachment 412117 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=412117&action=review

> Source/WebCore/Modules/webaudio/AudioContext.cpp:413
> +    m_mediaSession->beginInterruption(PlatformMediaSession::PlaybackSuspended);
> +    document()->updateIsPlayingMedia();

These calls cannot cause JS execution, can they? Concerned about potentially running JS in page cache.

[Chris Dumez]

(In reply to Alexey Proskuryakov from comment #8)
> Comment on attachment 412117 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=412117&action=review
> 
> > Source/WebCore/Modules/webaudio/AudioContext.cpp:413
> > +    m_mediaSession->beginInterruption(PlatformMediaSession::PlaybackSuspended);
> > +    document()->updateIsPlayingMedia();
> 
> These calls cannot cause JS execution, can they? Concerned about potentially
> running JS in page cache.

Via code inspection, this code does not seems to run any script.