0

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.

  • 1
    Angular so it is a single page app, and yeah it's possible, but you need to work a little :D – Dinca Adrian Jun 19 '17 at 11:46
  • Not really possible I dont think with a normal structure. Perhaps load the page content in via ajax, therefore the page isn't changing and you can keep the audio instance continuing without interruption. Otherwise, you could save the audio playback point to a sessions on leave then when the next page loads it continues off from that point, however the audio will obviously be stopped during the load. – Jam3sn Jun 19 '17 at 11:48
  • 1
    You could use frames (don't, they are deprecated), you could use a separate tab/popup/window (don't, popups might be blocked, additional tabs/windows is bad UX), or you could create a page where the contents are loaded dynamically, i.e. once the page is loaded, the music never has to be re-loaded after the user navigates; rather the desired contents are brought in via AJAX or iframe or some-such. – domsson Jun 19 '17 at 11:48
  • Possible duplicate of [How do I make an – Ghasem Apr 06 '18 at 06:31

2 Answers2

1

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.

David
  • 208,112
  • 36
  • 198
  • 279
  • 1
    Note, however, that [frames are deprecated](https://stackoverflow.com/questions/4263509/why-are-frames-deprecated-in-html). In other words, don't go for option 2 unless you have absolutely no other choice. – domsson Jun 19 '17 at 11:51
1

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.

domsson
  • 4,553
  • 2
  • 22
  • 40