Запрет воспроизведения одного аудио-блока на странице в нескольких вкладках браузера
Доброго времени суток, JavaScript.ru и его посетители.
На одной из страниц моего сайта у меня воспроизводится аудио-файл. Если быть точнее - один из трёх файлов. Сам файл выбирается динамически пхп-кодом (использую шаблонизатор 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){}). Или, как вариант, создать глобальный объект, доступный во всех окнах/вкладках браузера. Например в ВК такая фича реализована. При начале воспроизведения медиа-файла в одной вкладке, в другой вкладке воспроизведение медиа-файла приостанавливается. Я надеюсь на вашу помощь и поддержку. Заранее всем спасибо. С уважением, Юрий. |
Итак. Весь вчерашний день я провёл в гугле и на многих форумах. Читал много и долго. Приходилось даже ковырять английскую документацию, хотя я не знаю английского. Натыкался на различные комментарии пользователей сообществ, доходило до таких идей, как использование HTML5 History API, однако это не то. Это решало проблему с переходом по страницам не прекращая музыку, а не с её управлением из других вкладок. В общем на одном из форумов мне ответил добрый гик. :)
Цитата:
Хранилище localStorage представляет собой ассоциативный массив из пары ключ => значение Сегодня повозился с двумя мануалами на разных сайтах и изменил свой JS-код до такого состояния: { var nowTime = new Date().getTime(); var PageSound = document.getElementById('PageSound'); localStorage['PageSound'] = nowTime; PageSound.play(); } function PageSoundStop() { PageSound.pause(); PageSound.currentTime = 0; } function onStorageEvent(storageEvent){ if(storageEvent.key == 'PageSound') PageSoundStop(); } $(document).ready(function() { if (window.addEventListener) { window.addEventListener("storage", onStorageEvent, false); } else { window.attachEvent("onstorage", onStorageEvent); }; PageSoundPlay(); }); Что я делаю? При открытии страницы я запускаю отслеживание событий хранилища, после этого запускаю воспроизведение музыки. Попутно определяю текущее Unix-время и записываю его в локальное хранилище в виде пары PageSound и nowTime: localStorage['PageSound'] = nowTime; Если я открою новую страницу, то переменная PageSound получит новое значение, так как Unix-время не стоит на месте. :) Старая страница получит сообщение об изменении события, и если ключ изменённого события равен PageSound, то останавливаю воспроизведение PageSound.pause();. Таки образом это не является управление элементами другой вкладки. Просто создавалось такое впечатление, что я могу управлять элементами другой вкладке. На самом-то деле, это просто отслеживание изменения локального хранилища, и если оно где-то меняется, то, так как оно общее, другая страница может получить уведомление об этом, и запустить действия, задуманные кодером для определённых ситуаций. :) Открыв контактовский скрипт common.js с помощью поиска текста нашёл там отлов событий localStorage. Видимо так они и останавливают музыку в других вкладках. Я решил свою проблему, так что вопрос решён. Если мои поиски кому-нибудь пригодятся - я буду рад, что создание этого вопроса было не напрасным. :) Всем спасибо, всем удачи. Если есть какие-то вопросы - пишите сюда, отвечу. :) P.S.: правила не помню, регистрировался давненько, относительно. Память не оч у меня на такое, поэтому не помню, можно ли размещать ссылки на сторонние ресурсы. Искал сейчас правила по сайту - найти не смог. Если нельзя размещать левые ссылки, уж просите, скажите, и ткните носом в правила - ссылочки удалю. А пока выкладываю ссылки на мануалы. Ссылки на мануалы: Локальное хранилище на htmlbook.ru Attaching a Storage Event Listener в теме HTML5 Local Storage |
Часовой пояс GMT +3, время: 07:06. |