intro94
@intro94
PHP Backend Developer

Как управлять блоком audio из другой вкладки или определить статус этого блока?

Доброго времени суток, Toster и его посетители.
На одной из страниц моего сайта у меня воспроизводится аудио-файл. Если быть точнее - один из трёх файлов. Сам файл выбирается динамически пхп-кодом (использую шаблонизатор Smarty), в зависимости от некоторых данных, при открытии страницы. Но все три файла записываются в аудио-блок с одним ID. Вынлядит это так:

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


Однако информация на странице тоже разная может быть. В зависимости от переданных данных в GET-запросе. То есть сам адрес страницы может быть разным. Выглядит это так:
mysite.ru/Page.php?data="get-data"
Из-за того, что информация может быть разная, пользователи могут открывать сразу несколько вкладок с различными GET-параметрами, для сравнения информации на страницах. В связи с этим, происходит воспроизведение аудио на всех вкладках, и как побочный эффект - наложение звука из разных вкладок. Вы сами понимаете, насколько это неудобно. Моя задача - убрать это наложение звука. В мою пустую голову не пришло ничего лучше, чем по-извращаться с куками. Итак:

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


При открытии страницы я проверяю время, записанное в куке. Если оно меньше текущего времени, то воспроизвожу звук. Как только начинает воспроизводиться звук, то каждые 4 секунды в куку записывается время, больше текущего на пять секунд. То есть, если я открою новую вкладку со страницей, или обновлю текущую в течении пяти секунд, то на новой звук воспроизводится не будет. После закрытия текущей страницы у меня будет фриз 5 секунд. Проблему это решило. При открытии нескольких вкладок звук воспроизводится только на первой открытой. Однако тут появляется ряд проблем.

  1. Это чересчур извращённо - каждые четыре секунды обновлять куку.
  2. Если аудио-файл остановится, или пользователь его остановит вручную, то скрипт на обновление куки продолжит своё существование и работу.
  3. После закрытия страницы ждать до пяти секунд, чтоб звук начал воспроизводится на новых открываемых страницах - ну как-то не фонтан.


У меня появилась мысля, может есть какая-то возможность проследить открытые окна/вкладки браузера со страницей mysite.ru/Page.php и статусом воспроизведения блока <audio id="PageSound">? То есть я хочу определить, если где-то в каком-то окне или вкладке с такой страницей, воспроизводится аудио-файл, то новый не будет запускаться. Если нигде не воспроизводится, то начинаем воспроизведение. Так как воспроизведение файла может быть остановлено с помощью PageSound.pause();, то это надо также учитывать, как блок, который не воспроизводится (например if(PageSound.paused){}).
Или, как вариант, создать глобальный объект, доступный во всех окнах/вкладках браузера. Например в ВК такая фича реализована. При начале воспроизведения медиа-файла в одной вкладке, в другой вкладке воспроизведение медиа-файла приостанавливается

Я надеюсь на вашу помощь и поддержку. Заранее всем спасибо.
С уважением, Юрий.
  • Вопрос задан
  • 2893 просмотра
Решения вопроса 1
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Коммуникацию между вкладками браузера можно организовать подписавшись на изменение данных localstorage и записывая нужные команды в него.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
intro94
@intro94 Автор вопроса
PHP Backend Developer
Кстати. Сейчас заметил что на мой вопрос подписались. Решил оставить это здесь:
ru.stackoverflow.com/questions/383643

Я этот вопрос решил на следующий день, за что спасибо товарищу Александру, который указал в какую сторону мне копать. Дальше я нарыл всю инфу, всё сделал, и выложил решение на другом форуме, на котором тоже задавал этот вопрос. В общем, если кому нужно - можете прочитать. :)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы