How to change Page title & Play Notification Sound when I switch tab?

Question

When the user is changing the tab. I want to play notification sound and change the title of the page to grab attention.

How can I do it with JavaScript.

This is the code I have used and isn't working.

<script>
  var message = "Come Back...";
  var original = document.title;
  
  window.onblur = function () { document.title = message; }
  window.onfocus = function () { document.title = original; }
 </script>

Does this answer your question? [Javascript to detect if user changes tab](https://stackoverflow.com/questions/10338704/javascript-to-detect-if-user-changes-tab) — shreyasm-dev, Oct 09 '20 at 20:34

score 2 · Accepted Answer · answered Dec 03 '20 at 04:18

You can achieve it very easily:

Here is the full example:

<html>
  <head>
    <meta charset="UTF-8" />
    <script src="script.js"></script>
    <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
  </head>
  <body>
    <h1>Focus</h1>
  </body>
  <script>
    setInterval(checkFocus, 100);
    var audio = new Audio(
      "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
    );
    audio.loop = true;
    function checkFocus() {
      if (document.hasFocus()) {
        document.title = "Main Title";
        audio.pause();
      } else {
        document.title = "Title Change";
        audio.play();
      }
    }
  </script>
</html>

Working Demo

Working App Demo Code stackblitz.com

How to change Page title & Play Notification Sound when I switch tab?

1 Answers1