@niknik_ykt
Не понимаю почему все это работает.

Как сделать, чтобы музыка не сбрасывалась при перезагрузке/переходе страниц?

Нашел отличную штуку - скрипт радио для сайта. Работает как надо, но сбрасывается при переходах по страницам. Как этого избежать? Как сделать так, чтобы радио играло постоянно на фоне, когда юзер перемещается по сайту?
  • Вопрос задан
  • 260 просмотров
Пригласить эксперта
Ответы на вопрос 4
vabka
@vabka
Токсичный шарпист
Сделать сайт как одностраничное приложение.
Чтобы не происходило перезагрузок при переходе между страницами.
Ответ написан
@zkrvndm
Софт для автоматизации
Я бы сам сделал как, просто повесил на все ссылки на сайте обработчики и при клике по ним отменял бы переход и открывал выбранную страницу внутри iframe со 100% шириной и высотой, без видимых границ. Будет некий аналог ajax-загрузки контента. Разумеется, надо учесть, чтобы радио внутри iframe не запускалось и обработчики внутри ifarme тоже не ставились, тогда все будет ок.
Ответ написан
@Eugeny1987
Работаю с HostCMS
переходите по ссылкам на аяксе
Ответ написан
Комментировать
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
<audio id="music-player" src="/storage/files/music-1.mp3" loop></audio>
  <script>
    (function () {
      const player = document.getElementById('music-player');
      if (!player) return;
    
      const toggle = document.getElementById('toggle-music');
      if (screen.width < 1220) return;
      if (!toggle) return;
      let playing = false;
      let firstPlay = true;
      let iPos;

      const KEY_MP_PAUSED = 'music-player-paused';
      const KEY_MP_POSITION = 'music-player-position' + player.src;

      const startPosition = parseFloat(localStorage.getItem(KEY_MP_POSITION));
      const mpPaused = +localStorage.getItem(KEY_MP_PAUSED);

      function enablePlay() {
        if (firstPlay) {
          firstPlay = false;
          if (startPosition) player.currentTime = startPosition;
        }
        player.play();
        toggle.classList.add('music-on');
      }

      function userClick() {
        document.removeEventListener('click', userClick);
        enablePlay();
      }

      if (!mpPaused) document.addEventListener('click', userClick);

      function updateCurrentPosition() {
        localStorage.setItem(KEY_MP_POSITION, player.currentTime.toString());
      }

      player.addEventListener('play', e => {
        playing = true;
        localStorage.setItem(KEY_MP_PAUSED, '0');
        iPos = setInterval(updateCurrentPosition, 1000);
      });

      player.addEventListener('pause', e => {
        playing = false;
        localStorage.setItem(KEY_MP_PAUSED, '1');
        clearInterval(iPos);
      });

      toggle.addEventListener('click', e => {
        e.preventDefault();
        e.stopPropagation();
        document.removeEventListener('click', userClick);
        if (playing) {
          player.pause();
          toggle.classList.remove('music-on');
        } else {
          enablePlay();
        }
      });
    })();
  </script>
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы