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

时间:2015-09-07 08:04:11

标签: javascript audio local-storage

在我的应用程序中,我编程了系统播放音频,以便在收到通知时通知用户。

如果用户打开了很多浏览器标签,则会播放此音频很多次(一个用于标签页)。

音频只能播放一次吗?

谢谢!

1 个答案:

答案 0 :(得分:5)

您可以在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);
}

这样,项tabKey将设置为第一个标签的randomKey。现在,当您播放音频时,您可以执行以下操作:

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

这将仅在第一个标签中播放音频。

唯一的问题是,您必须对案例做出反应,即用户正在关闭第一个标签。您可以通过取消设置关闭选项卡上的tabKey项并使用storage事件在其他标签中捕获此事件来执行此操作:

//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);
        }
    }
});