Pause an application when the user opens a new tab (AngularJS)

Question

I have a music application built in AngularJS. I have the application working. The user can play, pause, previous, next on his tab. But I want to make it even better.
When the user already opened a tab and had the music playing. When he opens a new tab and plays another song, I want the song in the first tab to be paused.
How do I do that in Angular ?

I have researched this problem on stackoverflow, but to my knowledge I did not find anything useful so any help is appreciated.

Answer 1

You can use html 5 local storage to keep the value of current song and retrieve this value from different tabs. You need to overwrite current song when a new song start. Then you need to poll this value to pause the song if it is outdated. Check out the following libraries for using local storage in angular easily: https://github.com/grevory/angular-local-storage https://github.com/gsklee/ngStorage

Answer 2

Well cookies to storage current song and tab count should make it work for you. I don't think you should go for localStorage specifically for this need as it can be easily handled via cookie.

In short , a setTimeInterval function to check the value for cookie (which is incremented when application is launched, and decremented when tab is closed... use onload and onUnload events respectively)

If function running at a given interval finds cookie value as 2 pause the music in that tab and decrement the cookie, so that its not stopped in the new tab

Answer 3

You can use this code, hope it's clear:

window.onblur = function() {
  localStorage.setItem('song_123_pause_time', 1234);
  console.log("pause");
};
window.onfocus = function() {
  var seek = localStorage.getItem("song_123_pause_time");
  console.log("play again");
};