Javascript：在多个标签中播放一次音频

Question

In my application I programmed that the system plays an audio to notify the user when he received a notification.

If the user have a lot of browser tabs opened, this audio is played a lot of times (one for tab).

Is there any way to do that the audio only plays once ?

Thank you!

Answer 1

You could set a flag in localStorage :

//create random key variable
var randomKey = Math.random() * 10000;
//set key if it does not exist
if (localStorage.getItem("tabKey") === null) {
    localStorage.setItem("tabKey", randomKey);
}

This way, the item tabKey will be set to the randomKey of the first tab. Now, when you play the audio, you can do:

if (localStorage.getItem("tabKey") === randomKey) {
    playAudio();
}

This will play the audio only in the first tab.

The only problem is, you have to react to the case, that the user is closing the first tab. You can do this by unsetting the tabKey item on tab close and catching this event in other tabs with the storage event:

//when main tab closes, remove item from localStorage
window.addEventListener("unload", function () {
    if (localStorage.getItem("tabKey") === randomKey) {
        localStorage.removeItem("tabKey");
    }
});

//when non-main tabs receive the "close" event,
//the first one will set the `tabKey` to its `randomKey`
window.addEventListener("storage", function(evt) {
    if (evt.key === "tabKey" && evt.newValue === null) {
        if (localStorage.getItem("tabKey") === null) {
            localStorage.setItem("tabKey", randomKey);
        }
    }
});

Answer 2

I modified @basilikum answer to keep the full array of tabs in storage. Allows you to skip one of the listeners.

 class TabManager { constructor() { this.tabKey = Math.random() * 10000; this.setup(); } getAllTabs() { return JSON.parse(localStorage.getItem("tabKeys") || '[]'); } setup() { const t = this; const currentTabs = this.getAllTabs(); currentTabs.push(this.tabKey); localStorage.setItem("tabKeys", JSON.stringify(currentTabs)); window.addEventListener("unload", function () { const currentTabs = t.getAllTabs(); const index = currentTabs.indexOf(t.tabKey) if (index > -1) { currentTabs.splice(index, 1); localStorage.setItem("tabKeys", JSON.stringify(currentTabs)); } }); } isMainTab() { return this.getAllTabs()[0] === this.tabKey; } }

Call this once in your code:

const tabManager = new TabManager();

Call this whenever you want to do something on one tab:

if(tabManager.isMainTab()){
    //play sound...
}