CODEWITHSUNDEEP
javascriptcsshtml
user7755885
user7755885

Reputation:

Audio continuously playing across all pages?

Is this even possible? To have an mp3 play where it left off when you navigate to a different page on the same website? I seriously don't even know where to begin. Kind of new to HTML, CSS, etc. Any Ideas? Thanks.

Upvotes: 2

Views: 5547

Answers (2)

domsson
domsson

Reputation: 4691

If you reload the entire page (and therefore the audio source), there is no way to provide a seamless playback. There will always be a very noticeable gap due to page load times, even if you try to keep track of the position within the audio track. Slow internet connections will make it worse.

Instead, you can embrace one of those four options:

  1. Single Page App:
    As also pointed out by David, my suggestion would be to create a single page application, i.e. a page that loads once, then loads/replaces all additional content dynamically. One the user clicks a navigation link, instead of loading a new page (or reloading the current page), you just replace the main content, using AJAX. The part that provides the audio stays in place.

  2. Additional tab/popup/window
    You could create an additional tab, popup window or window just for the sake of playing the audio. One example of this is the German radio station "radioeins". At the time of writing, their website provides an orange button in the top right that will open a popup window for their live stream, allowing the user to continue browsing their website with the music continuing to play uninterruptedly from the popup. I would only go down this route if the single page app is not an option, as popups or additional tabs are bad UX and popups might be blocked by browsers.

  3. iframe
    You could provide the main content of your page within an iframe, or the other way round, provide the audio from within an iframe. I would recommend against this, as there are several disadvantages to this approach.

  4. Frames
    Frames would provide a similar approach to iframes, but they are deprecated, so I strongly recommend against this one as well.

tl;dr

Make it a single page application if you can, otherwise resort to a popup-solution.

Upvotes: 2

David
David

Reputation: 218828

Not across multiple page loads. But you can have a single page which plays audio and provides navigation therein for the user. A couple overarching structural options would include:

  1. Create a Single Page Application (SPA). Here your one "page" would play the audio, and the site navigation would happen within this single page instance with JavaScript/AJAX. The browser would only ever load one "page", but the overall application would dynamically load/unload as elements of that page as you see fit.
  2. (A very old method, but still works) Create a parent page with frames for navigation. The parent (frame) page would contain the audio, and the rest of the navigation through the application would be done in frames within that page.

I'd recommend the first approach, but either would work.

Upvotes: 3

Related Questions