Page Visibility API page plays audio when switching tabs without having pressed play

[zcorpan]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

Open the page, switch to another tab and switch back. It starts playing audio, which is unexpected.

What did you expect to see?

No audio unless I've pressed 'play' first.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

Use the play event to start listening to page visibility changes:

const audio = document.querySelector("audio");
// When the audio starts playing...
audio.addEventListener("play", () => {
  // Handle page visibility change:
  // - If the page is hidden, pause the video
  // - If the page is shown, play the video
  document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
      audio.pause();
    } else {
      audio.play();
    }
  });
}, {once: true});

MDN metadata

Page report details

• Folder: en-us/web/api/page_visibility_api
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/page_visibility_api/index.md
• Last commit: 95dff5e
• Document last modified: 2023-02-19T10:18:31.000Z