javascript - Audio continuously playing across all pages? - Stack Overflow

admin管理员组

文章数量:1415644

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.

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.

• javascript
• css
• html

Share Improve this question Follow asked Jun 19, 2017 at 11:43 user7755885user7755885 4

• 1 Angular so it is a single page app, and yeah it's possible, but you need to work a little :D – Dinca Adrian Commented Jun 19, 2017 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 Commented Jun 19, 2017 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 Commented Jun 19, 2017 at 11:48
• Possible duplicate of How do I make an <audio> file play continuously on all pages? – Ghasem Commented Apr 6, 2018 at 6:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 remend the first approach, but either would work.

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 remend 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 remend against this one as well.

tl;dr

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

本文标签： javascriptAudio continuously playing across all pagesStack Overflow