How to turn off sound if audio is playing in another tab or window

Question

I am fully aware that playing background music in a website is a horrible idea. However, my client insists on it. We've had all sorts of trouble with it. First, we had to find a script to have the song "follow" the browser (it's called "HTML5 background audio player" for those looking for such a thing), remembering where the song was cut off between page loads.

However, we now have a new problem. If the site is open in more than one tab or window at a time, the music plays over itself.

I am also fully aware that the simple solution is to just manually mute the sound if you decide to open up another page in the site in a new tab or window. I discussed this. However, my client is a very "particular" man and insists that the computer "should know when I open a new page."

My question is: does such a thing exist? I have no idea how this would be accomplished in JavaScript.

Answer 1

If you are talking about dynamically opening a new tab, by clicking on a link and having that click call window.open();, then .open() returns a reference to the child window, which you can then communicate with in the parent script: var childWindow = window.open(url);

Otherwise, cookies?
A session-parameter in the query string, which you could change if a new tab was opened.

Another suggestion, if you're using html5-audio exclusively, would be something like using localStorage.
Most browsers supporting HTML5 window.Audio; also support window.localStorage;.
You'd have to expressly check to see that localStorage is indeed supported and enabled, but that's just good citizenship.

Then you should be able to set a randomized ID for the tab, save that ID in session-storage, set an "is_playing" or whatever field in localStorage to the ID you gave the tab in sessionStorage...

...and then on each new tab, check to see if "is_playing" is empty in localStorage, OR if the ID is equal to the one set in sessionStorage.

The difference between localStorage and sessionStorage is that sessionStorage is emptied after you close the browser, and it also should not be shareable between tabs.

Answer 2

You should use cookie or/and HTML5 session storage to record that your playing has started. Then if it has, you don't start it on subsequent page loads.