How to keep audio playing while navigating through pages? - javascript

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/

Related

Loading A Web Page Seamlessly

I have seen some websites that include nice transitions between pages, such as sliding or fading, etc. Most of these I have seen are actually one page that just transitions various sections. Then I came across a website that does it differently.
If you view this site and click the various pages the pages transition smoothly but the URLs are different and it doesn't appear to be one page site with hidden sections.
How is this done? I looked for explanations on how to do this but never found a good answer. Any help in determining how this is done would be great.
Note: I am looking to replicate this feature for websites I build so I am looking for an answer that will explain the idea or process of how this is coded.
The technique you're talking about is using history.pushState() which is quite new feature of html5. More info you can find on MDN - Manipulating the browser history
The trick this page does to move from page A --> page B involves 3 main steps:
Load the whole page B or only the content that is different from
page A (probably using XMLHttpRequest).
Swap in the changed content (e.g. updating the body,..)
Update the browser location bar with the URL of page B without
refreshing the page, using a particular HTML5 history method called
pushState.

Fancybox - implementing backward and forward for iFrames

I'm using Fancybox to display webpages through an iFrame. Those webpages are like a little information network: they're calling each other via links, and the user can circle through them.
I wanted to implement back et forth buttons: I did it by putting those buttons directly inside the displayed page, and working with the history (history.go(-1)) : that works, as long as the browser behaves in the way they do with iFrames.
However, there's a problem: if the user clicks on the back button and is on the first page of his navigation, it will bring him back out of the website itself (as, out of the fancy box, it's a one-page website).
As for security purpose you cannot have access to the history and test it to avoid that, is there a way to find out if the user will get out of the domain if he does a step more? Document.referent doesn't seem to work in the context of Fancybox and iFrames…
Thanks A LOT, I tried many (mainly stupid things), including a javascript session with window.name (see how desperate I am ?) !

Providing a back link inside of a Facebook tab

I'm trying to use history.back() inside of my Facebook app to go up our site hierarchy since the browser back button is obviously useless in this sort of situation. I'm using javascript to avoid having to manage history site on the backend but it's proving to be very buggy. Clicking a link with href="javascript:history.back()"causes the page to scroll around a couple times then actually causes top to go back...
Any help with this subject is greatly appreciated.
So it turns out that history.back() is not possible due to the way Facebook hacks around with the iframes that run apps. I ended up having to implement a pseudo-back link via an implementation in the server-side framework I was using.

Change browser URL and page content without reload and without using fragments

I'm well aware of the technique of using URL fragments to track state on an AJAX powered webpage, but lately I've noticed a lot of sites that are doing something similar but without fragments.
The picture viewer in the latest version of Facebook for example operates this way. The left and right navigation buttons are simple links with no fragments that when clicked change the browsers URL without doing a full page load.
Another example is GitHub's repository browser, each of the files/folders is a simple link that changes the page state and browser URL without reloading or using page fragments.
Can anyone explain, or point me to an explanation of how this works? I've done some searching, but there is so much content on using fragments that I haven't been able to find anything.
I believe this is due to the new History pushState HTML5 feature
They are using new HTML5 History API. I think this is what you want. check the menu items in this page http://tinywall.info/demos/html5-history-api/menu1.php
The tutorial to implement is right here : http://t.co/M4RvnvoQ

playing audio on a web page without interruption by page reload

I want to create a web page that contains an (Flex/Flash) audio player that doesnt get reloaded when the page reloads. Currently, i am popping out the player in a new window. Please check http://www.paadal.com to see it in action.
What i want to achieve is to have the player in the same window, but it shouldnt reload. I am sure many of you will say use AJAX to prevent reloading of page like songza.fm. But the problem is search engines cannot index AJAX applications. This is true for a full fledged Flex app as well.
Is there any way to have the player in the same window? but not reload.
Thanks
Just add Ajax to existing page hierarchy, change each link to ajax call after page load (with javascript) and only reload content of some container. If you do it that way, search engines (and users without JS, with mobile phones for example) can access your page, and users with JS enabled can get bonus as music player
No, you cannot have a single element exempt from a page-reload, not without loading portions of the page via asynchronous calls to the server. When a window refreshes, it flushes the DOM out, including your mp3 player.
saying "searching engines cannot index AJAX apps" is totally dependent on how the application is written, there are plenty of ways to write an application that is still spider-able and plenty of other techniques for indexing (like www.sitemaps.org implimented by most major search vendors)
You can not maintain anything in a browsers memory after leaving the page (which is implied by a page reload)
For your use, it sounds like using old HTML frames/framesets could easily solve your issue, with a hidden frame containing your audio and the rest of your site in the main frame window.
It depends on the design of your website. You can us a standard html background sound, embedded media player or flash player on your main web page. The others pages will have to be used as a single pop up layered into each other. this will cause your music from the main page to play and allow you to navigate throughout your website because you linked the popup pages. To return to the main page use a close window script .

Categories