CODEWITHSUNDEEP
javascriptjquery
Otvazhnii
Otvazhnii

Reputation: 663

Play sound only in one window of which is active (within one website) using javascript (possibly jquery)

Alright, I've found a bunch of answers concerning native functions like window.onblur and window.onfocus... But they won't help so I'd like to be more specific

  1. Say you open several tabs of one website
  2. Say you receive a message and there's a sound to announce the message
  3. As you have several tabs opened, you will hear the sound the number of opened tabs. Which makes a how'd'u'callit symphony

Best solutions I've found so far, but which don't work 1. window.onfocus and window.onblur 2. Play sound if var infocus evaluates to true, don't play if not 3. It is crossbrowser 4. It is simple 5. It does not work

Why the best solution won't work? Say you switch focus to another tab of a different website, your website loses focus so you won't hear the sound. Even worse, say you switch to another program, then the browser itsel loses focus and you won't hear the sound

So what shall I do?

Upvotes: 4

Views: 2562

Answers (3)

Otvazhnii
Otvazhnii

Reputation: 663

Alright, two weeks after it seems like I've found the real solution. Which actually proves that if you want to do something, don't ask for help, just do it

This is what I did:

  1. Create a cookie with a randon id and the current time (winid + t1). The cookie is created by each opened tab on loading. document.cookie = 'winid='+winid+t1;

  2. Create a function which will update the current time in the set cookie, say, every 3 seconds (I kindda don't like to overflow clients, so it's 3 secs not 1). If the function finds out that the winid in the cookie and the winid of the current tab don't match and 3 secs have elapsed, then the tab was closed, redefine the primary tab inside the same function. window.setInterval(setwinid,3000);

  3. This is it, every time you need to, say, play a sound, you should check first, whether it is the tab which is to play it

The trick is that each tab has its own winid. But only one winid is stored in cookie, is updated and thus allows the one tab to perform actions. Pretty simple. I actually started using this method for updating messages in the box across all tabs not only for playing music

Upvotes: 1

chucktator
chucktator

Reputation: 1856

You could save the timestamp of the last onFocus() event in a JavaScript variable and in a cookie (access set to your website root). Then when you want to play the alert sound, you compare the current values of the variable and the cookie and only play the sound if those two match.

Upvotes: 1

JJJ
JJJ

Reputation: 33163

One solution would be to have a server-side solution that would play the notification only once. You don't specify how the site receives the messages, but I assume it's some form of AJAX call that gets the message from the server and the messages are saved in a database.

Add a flag to the database that signifies that the message has been sent. Set the flag the first time the user's browser queries for new messages. On the page itself play the sound only if the flag has not been set, otherwise don't play the sound. Now only the first page that fetches the message will play the sound.

Upvotes: 0

Related Questions