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.
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:
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.
(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.
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:
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.
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.
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.
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.
Related
Question: With Javascript, can you tell the web browser to begin loading a page, but don't begin rendering it yet?
Issue: A client wants his web page to show listings like a book. When you click on the next button, he doesn't want the next page to immediately load. He wants the book to close (a closing animation) and then load the next page.
Current status: All links go to Javascript. I show the closing animation. Then, I replace the window location. The issue is that there is a clear wait for the next page to load. It would be nice if I could load the following page into cache while the closing animation runs. In other words, I want to make that three-second animation useful time by loading all the HTML, CSS, Javascript, and images for the following page and then all that happens when I set the new location is that it renders.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and is used to load the next page. After the animation, I flip which iframs is visible and which isn't. This is good except that the back button doesn't work properly. If you click back, you go to wherever you were before you went to the website. You don't hide the current iframe and show the one you just hid. If you click back twice, flipping iframes doesn't work. I have to keep a log of your history. Further, I have to hack the back button, which I don't like. So, I'd like to use a built-in cache method if I can.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and
is used to load the next page. After the animation, I flip which iframes is visible and which isn't.
Yes, this sounds like a good approach.
This is good except that the back button doesn't work properly. [...]
I have to hack the back button, which I don't like.
Single Page Applications (SPAs) can't use the back button as originally intended because the entire application exists within a single document.
Partly in response to this, we have
history.pushState()
which is a really good extension to the History API, enabling new "artificial" entries (describing new states) to be added to the browser's history, which, in turn, enables the back button to work exactly as the user might expect it to.
Further Reading:
http://html5doctor.com/history-api/
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
I'm looking for the best way to keep a WebRTC video stream + the stream controls (hang up, mute etc.) loaded and active, even if the user navigates to another subpage through the navigation menu.
I thought of the following way, however I don't know if this is the most practical one or if there's a better solution to this nowadays: I'd simply make a wrapper with the navigation menu and put an iFrame where currently the content is. The video stream itself would go in the menu bar itself (it's a sidebar which is wide enough to do something like this), when the user clicks on a menu item, the iFrame src is replaced with the new URL.
Is this the right way to do this? If so however, since I haven't used iFrames that much so far, I have a few more concerns:
Are there any drawbacks as for browser features when using iFrame? For example, I know that Chrome asks you to put several features into the allow attribute of the iFrame, for example when using the camera, microphone or location of the user. Is there anything I absolutely cannot do in iFrames?
Do iFrames share the (PHP) session and cookies with the "main" wrapper, or are those separate sessions?
And probably my biggest concern: How could the JavaScript codes of the wrapper and the iFrames communicate with each other? For example, how could I send a hangup-signal to the video stream in the wrapper from within the iFrame?
Thanks for any hints!
Iframes could work.
Are there any drawbacks as for browser features when using iFrame?
The main issue is that you don't really get control over the presentation of the page while that iframe loads. Users may see a brief moment of solid white, for example, while the previous page is torn down and replaced.
Is there anything I absolutely cannot do in iFrames?
Iframes are pretty flexible. Just keep in mind that they have their own JavaScript context so there is some extra code you need to write to shuffle data back and forth.
Do iFrames share the (PHP) session and cookies with the "main" wrapper
Yes
How could the JavaScript codes of the wrapper and the iFrames communicate with each other?
You can actually access the Document object for the iframe from the outer iframe. (Assuming they're on the same origin, of course.)
const iframe = document.querySlector('iframe');
iframe.contentDocument.querySelector('body').whateveryouwant
Probably the best way though is to use the postMessage API. This allows you send data back and forth as-needed, in a nice isolated way.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/
Most of the WebSocket examples out there are centered around a single web page, where the content updates with chat, financial or some other live metrics - makes sense for a single page.
However, given a news feed scroller, where that feed needs to exist on every page of the site, I would like to open the conversation up to some possibilities for this.
Currently the site is a classic ASP site, but will be eventually migrated to MVC/MVP.
Since we don't want to open/close the web socket every time a link is clicked on (currently loads a new page), I was thinking about an IFrame type of UI, which can be done with updatable DIV's and jQuery.
Given a simple containerized UI template with a header (c1) and footer (c2), content in the center (c3) with left (c4) and right (c5) bars, when clicking on a link on the header, where the main menu would reside, instead of updating the entire page, I could load a page into one of the containers (updatable div), preserving the WebSocket container's connection - avoiding needing to re-establish the connection.
What are some other options to consider to accomplish this?
Thanks.
UPDATE
If you take a look at FB's implementation, their status bar on the right and even chat, stay on the page across link clicks. How is that accomplished?
Using IFrames or otherwise modifying your page state (rather than full page loads) is probably the best direction right now but shared Workers may also do what you want. The idea is to allow multiple pages loaded simultaneously from the same origin to share a web worker. I suspect that the shared worker will persist even for page navigation within the same site. However, I have not actually tried it and the W3C spec is not clear to me on this issue. I would be interested to know if this is in fact true.
Note that Shared Workers are in Chrome, Safari and Opera but IE and Firefox have not committed to supporting shared workers yet:
http://dev.w3.org/html5/workers/#shared-workers-introduction
http://caniuse.com/#feat=sharedworkers
I have a page that has a table whose rows are links to other pages.
When there is a click on a row (link), I set location to that URL like this:
window.location=mytable.rows[temp_no].getElementsByTagName("a")[0];
And in one of those link, a video player starts to play a file in the link and I want it to keep playing when I go back to the previous page so that I can listen to the music when browsing other links.
I go to the previous page with:
window.location.href="..";
This destroys everything i.e. video player naturally. I can't popup a new window or open video player in a new window since this application works on devices which have single browser window.
Any solutions ?
Of course it does. Changing the location causes the full page to be unloaded and the new one to be loaded.
If you do not want this behaviour you'll have to use AJAX to reload only parts of your site.
Opening the video in a popup window would be another solutionbut new windows are usually annoying, so provide the user e.g. with a "open video in new window" link.
Edit: In this case - assuming the TV browsers have sane JavaScript engines - use AJAX.
Another "solution" would be adding an onbeforeunload event to request confirmation from the user before he navigates away from the page.
Without being able to use a new window or AJAX it is impossible unless you use frames and just load another page in a different frame.
Use window.open on your videos in a different window so the parent window can navigate wherever.
Keep in mind that you'll have to disable any pop-up blocker.
** UPDATE **
If you need everything in the same window, consider using some iframe to view other pages. The advantage of iframes is that they have their own CSS styles, Javascript sandbox so any page viewed within an iframe does not (generally) affect it's parent container. Of course, there are ways to communicate between an iframe and it's parent and vice versa. But this is out of the question scope.