How to keep audio playing while navigating through pages?

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 :)

Answers:

Answer

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.

Answer

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!

Answer

Of course you could also pop up the player in another window/tab. (For now) It won't be possible without frames or javascript.

Answer

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.

Answer

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/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.