Music

For @dnmoore: there are two practical ways to keep music "playing as guests browse" rather than restarting on each page load. One is structural — make the site load content into a central container (SPA/AJAX + pushState) so the audio element lives in a persistent header and never reloads. The other is pragmatic — keep a normal audio player on every page but persist and restore its playback state (position and paused/playing) between pages, as @codejoust suggested. Below is a compact pattern using HTML5 audio + localStorage that resumes where the user left off and records whether they explicitly paused.

const audio = document.getElementById('bg-audio');
const KEY_POS = 'bg-audio-pos', KEY_PAUSED = 'bg-audio-paused';

audio.addEventListener('loadedmetadata', () => {
  const pos = parseFloat(localStorage.getItem(KEY_POS) || 0);
  if (pos > 0 && pos < audio.duration) audio.currentTime = pos;
  if (localStorage.getItem(KEY_PAUSED) !== '1') {
    audio.play().catch(()=>{/* autoplay blocked; wait for user gesture */});
  }
});

let tick = 0;
audio.addEventListener('timeupdate', () => {
  if (++tick % 4 === 0) localStorage.setItem(KEY_POS, audio.currentTime);
});
audio.addEventListener('play', () => localStorage.setItem(KEY_PAUSED, '0'));
audio.addEventListener('pause', () => localStorage.setItem(KEY_PAUSED, '1'));

Important UX and browser notes: modern browsers often block autoplay of audible media unless the user interacts first, so provide a clear play/pause control and remember their preference. Respect @HI2Japan’s point — offer an obvious mute/stop and persist that choice. If continuous, gapless playback is essential, convert the site to an SPA or offer a pop‑out player window (popups can be blocked).

Quick troubleshooting: check the console for play() Promise rejections, ensure loadedmetadata fires before setting currentTime, confirm element IDs match, and prefer localStorage over cookies for simplicity.