Y
Y
Yuri Istomin2014-12-15 19:18:11
JavaScript
Yuri Istomin, 2014-12-15 19:18:11

How to control the audio block from another tab or determine the status of this block?

Good day, Toster and its visitors.
On one of the pages of my site, I have an audio file playing. To be more precise - one of the three files. The file itself is selected dynamically by the PHP code (I use the Smarty template engine), depending on some data, when the page is opened. But all three files are written to the audio block with the same ID. Looks like this:

<audio id="PageSound" preload="auto">
    <source src="./sounds/{$sound}.mp3"></source>
    <source src="./sounds/{$sound}.ogg"></source>
</audio>

However, the information on the page may also be different. Depending on the data passed in the GET request. That is, the page address itself can be different. It looks like this:
mysite.ru/Page.php?data="get-data"
Due to the fact that the information can be different, users can open several tabs at once with different GET parameters to compare information on the pages. In this regard, audio is played on all tabs, and as a side effect, sound is overlaid from different tabs. You understand how inconvenient it is. My task is to remove this sound overlay. Nothing better came into my empty head than to be perverted with cookies. So:
function playTimePageSound()
{
    var playTime = new Date().getTime() / 1000;
    playTime += 5;
    setCookie('PageSound', playTime, 1);
    window.setTimeout(playTimePageSound, 4000);
}
jQuery(document).ready(function()
{
    var nowTime = new Date().getTime() / 1000;
    
    PageSoundStatus = getCookie('PageSound');
    if(PageSoundStatus == undefined)
        PageSoundStatus = 0;
    
    if(PageSoundStatus < nowTime)
    {
        var PageSound = document.getElementById('PageSound');
        PageSound.play();
        playTimePageSound();
    }
});

When opening the page, I check the time recorded in the cookie. If it is less than the current time, then I play the sound. As soon as the sound starts playing, then every 4 seconds a time is written to the cookie that is five seconds longer than the current one. That is, if I open a new tab with a page, or update the current one within five seconds, then no sound will be played on the new one. After closing the current page, I will have a freeze for 5 seconds. It solved the problem. When you open multiple tabs, the sound is played only on the first open one. However, a number of problems appear here.
  1. It's too perverse to update the cookie every four seconds.
  2. If the audio file stops, or the user stops it manually, then the cookie update script will continue to exist and work.
  3. After closing the page, wait up to five seconds for the sound to start playing on new opened pages - well, somehow it’s not a fountain.

I had a thought, maybe there is some way to trace the open windows / tabs of the browser with the page mysite.ru/Page.phpand the playback status of the block <audio id="PageSound">? That is, I want to determine if an audio file is played somewhere in some window or tab with such a page, then a new one will not start. If it is not reproduced anywhere, then we start playback. Since playback of a file can be stopped with PageSound.pause();, this must also be taken into account as a block that is not played back (for example if(PageSound.paused){}).
Or, alternatively, create a global object available in all browser windows/tabs. For example, in VK such a feature is implemented. When you start playing a media file in one tab, the playback of the media file in another tab is paused
I look forward to your help and support. Thank you all in advance.
Regards, Yuri.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander Taratin, 2014-12-15
@intro94

Communication between browser tabs can be organized by subscribing to changes in localstorage data and writing the necessary commands to it.

Y
Yuri Istomin, 2015-11-22
@intro94

By the way. Now I noticed that my question was signed up. I decided to leave it here:
ru.stackoverflow.com/questions/383643
I solved this issue the next day, for which I thank comrade Alexander, who pointed me in which direction to dig. Then I dug up all the information, did everything, and posted the solution on another forum, where I also asked this question. In general, if anyone needs - you can read. :)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question