Mute tab audio on tab unfocus in javascript/html

Question

Basically what the title says, I want the tab or video to be muted when it becomes unfocused.

I'm not sure how I would achieve this as I'm a beginner.

The source of the audio is currently a webm in a <video> tag.

You can use [Page_Visibility_API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) to detect if a tab has focus or not and then you can *mute* your audio by setting attribute `muted` to true. See **[This](http://stackoverflow.com/questions/6376450/how-to-mute-an-html5-video-player)** — abhishekkannojia, Dec 29 '15 at 07:23

score 4 · Accepted Answer · edited May 23 '17 at 12:31

using this answer, I would listen for the tab getting out of focus, so something like this:

function addOnBlurListener(onBlurCallback, onFocusCallback) {
  var hidden, visibilityState, visibilityChange; // check the visiblility of the page

  if (typeof document.hidden !== "undefined") {
    hidden = "hidden"; visibilityChange = "visibilitychange"; visibilityState = "visibilityState";
  } else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; visibilityState = "mozVisibilityState";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden"; visibilityChange = "msvisibilitychange"; visibilityState = "msVisibilityState";
  } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; visibilityState = "webkitVisibilityState";
  }


  if (typeof document.addEventListener === "undefined" || typeof hidden === "undefined") {
    // not supported
  } else {
    document.addEventListener(visibilityChange, function() {
      switch (document[visibilityState]) {
        case "visible":
          if (onFocusCallback) onFocusCallback();
          break;
        case "hidden":
          if (onBlurCallback) onBlurCallback();
          break;
      }
    }, false);
  }
}

function muteAudio() {
  console.log('mute all audios...');
  var audios = document.getElementsByTagName('audio'),
    i, len = audios.length;
  for (i = 0; i < len; i++) {
    console.log(audios[i]);
    audios[i].muted = true;
  }

}

function unMuteAudio() {
  console.log('unmute all audios...');
  var audios = document.getElementsByTagName('audio'),
    i, len = audios.length;
  for (i = 0; i < len; i++) {
    console.log(audios[i]);
    audios[i].muted = false;
  }

}

addOnBlurListener(muteAudio, unMuteAudio);

Fiddle Demo

I might be doing something wrong, but I cant seem to get this to work and i'm getting an Unexpected identifier on this line var audios = document.getElementsByTagName('video'), i len = audios.length; — Zeludon, Dec 29 '15 at 09:50
I figured it out but I was wondering how I would be able to use this in reverse and have it unmute on refocus. — Zeludon, Dec 29 '15 at 09:53
I don't really like the unMuteAudio function, this will also unmute the audios client would have muted himself. I think a better approach would be to on blur, store the ones that are playing into an array, pause them, then start them again on focus. — Kaiido, Dec 29 '15 at 13:08

Mute tab audio on tab unfocus in javascript/html

1 Answers1

Fiddle Demo