Puslapyje yra grotuvas. Reikia padaryti taip, kad paspaudus stop viename skirtuke, grojimas sustotų ir kitame skirtuke. Kaip įgyvendintum tarpusavio komunikaciją tarp skirtukų?

Для организации общения между вкладками в браузере можно использовать несколько подходов:

1. LocalStorage + событие storage

   • При нажатии на кнопку "стоп" в одной вкладке записываем в localStorage специальное значение, например, localStorage.setItem('playerAction', 'stop').
   • В других вкладках слушаем событие window.addEventListener('storage', ...), и при обнаружении изменения ключа playerAction выполняем остановку плеера.

2. Broadcast Channel API

   • Создаем канал: const bc = new BroadcastChannel('player_channel').
   • При нажатии "стоп" отправляем сообщение: bc.postMessage('stop').
   • В других вкладках слушаем bc.onmessage и реагируем на команду.

Broadcast Channel API более современный и удобный способ, но поддерживается не во всех браузерах (хотя в большинстве современных — да).

Пример с LocalStorage:

// В каждой вкладке
window.addEventListener('storage', (event) => {
  if (event.key === 'playerAction' && event.newValue === 'stop') {
    // Остановить плеер
    player.stop();
  }
});

// При нажатии стоп
function onStopClick() {
  player.stop();
  localStorage.setItem('playerAction', 'stop');
}

Таким образом, изменение в localStorage служит сигналом для других вкладок.