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
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.
$ 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.
(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.
Created attachment 412117 [details] Patch
<rdar://problem/70588177>
Committed r268893: <https://trac.webkit.org/changeset/268893> All reviewed patches have been landed. Closing bug and clearing flags on attachment 412117 [details].
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.
(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.