Member Avatar for AndrewSmith

Hi y'all...
I'm just getting my feet wet with this whole "usability" thing. Now, from what I've gathered, frames are bad and a thing of the past. Okay, now i'm making my websites with Divs and CSS. Here is my question. On one page of my site, I would like to open a media player (to start playing songs). As the user browses the rest of my site, I would like to have the songs continue to play. I cant think of how to do this though, because each time the user clicks to navigate to a new page of my site, the entire page (including the media player)will be reloaded. Any ideas?

Thanks~
Andrew

  • 3 Contributors
  • 2 Replies
  • 109 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Puckdropper

Dani AI

Generated

You can't keep an in-page audio player alive across a normal full-page navigation because the browser tears down the document on each load. To achieve continuous playback you have two practical families of solutions: run the player in a separate browsing context that doesn't reload, or avoid full navigations so the player stays in the DOM. 's AJAX idea points at the second approach; 's suggestion (a detached player window) represents the first.

Recommended (modern): make the site a single‑page experience for the part of the site that needs persistent audio. Keep the audio element at the top-level shell, fetch and swap the content area, and use the History API so URLs, titles and back/forward behave normally. This gives seamless playback but requires handling SEO, metadata and accessibility (use server-side rendering or progressive enhancement if search engines or non-JS clients matter). See the browser APIs for guidance: History.pushState and the HTML audio element.

Simpler alternative: open a small player in its own window/tab. It works reliably on desktop and is quick to implement, but popup blockers, accidental closes and poor mobile behavior are real downsides.

Fallback/resume strategy (if full reloads are unavoidable): save playback position periodically (localStorage or server) and restore it on the next page. It won't be gapless and modern browsers may block autoplay until the user interacts, so be prepared for a required gesture. Example pattern:

setInterval(()=>{ if(!audio.paused) localStorage.setItem('playerTime', audio.currentTime) },1000);

window.addEventListener('load', ()=>{
  const t = parseFloat(localStorage.getItem('playerTime'));
  if(!isNaN(t)){ audio.currentTime = t; audio.play().catch(()=>{/* wait for user gesture */}) }
});

Also test across browsers and mobile, provide clear play/pause/stop controls for accessibility, and account for autoplay rules (see the Autoplay guide).

Recommended Answers

All 2 Replies

Member Avatar for hollystyles

Sigh no matter how we try to abstract it way HTTP is a stateless protocol. Why o why do we humans beat ourselves up trying to replace the desktop with the internet ?

The only way I can think of would be to use AJAX for everysingle hyperlink to request and load the requested page into the main default home page where you're user arrives.

so user clicks a link, javascript creates a HttpRequest object, requests teh URL from the server, and then does something like

var mainDIV = document.getElementById("maindiv");
mainDIV.innerHTML = requestobj.responseText;

Member Avatar for Puckdropper

When you're starting a media player, it's ok to open a new window the size of the media player. It's a good idea to warn your user before hand, in case something happens at the point where they click on it and they don't see it open. (As a general rules, only PDFs and control/player functions should open in new windows.)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.