playing audio on a web page without interruption by page reload - javascript

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 .

Related

Javascript integrated web browser?

I have two different questions I would like to ask. I am new to javascript and I am trying to create a project ... of some sort.
Firstly, is it possible to have an integrated webbrowser within ... say a PHP page? e.g. using javascript, I have a canvas sized 500 x 700 within my "index.php" page, and can navigate to any website while remaining on my "index.php", but the websites appearing on that canvas?
If this is not possible, then is it possible to navigate to a website, and then interact with the elements thereof? I doubt this because you would no longer be connected to your file if you rediirect to another website, hence the integrated idea.
If neither or those are a possibility, then is it at all possible to interact with an EXTERNAL website's elements? External being not yours in this context.
You can use an iframe tag to load an external page, however
With most modern browsers you're not allowed to interact with the elements for security reasons
Many sites (still for security reasons) don't want to be loaded inside an iframe and they try to either escape the iframe or just render back a blank page instead.
One security problem is that a malicious page could open an iframe with e.g. a buy page of amazon.com and then render over it another opaque element that lets the click go through it.
This way a user may be tricked into click over a "watch the cute kitties" button and instead is clicking on the one-click-buy button of amazon (or liking a facebook page, or starting following a spammer on twitter or ...).

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

How to implement a persistent (non-refreshing) page element?

What would be the best approcah to have a div containg a flash player, that does not refresh when you mavigate to another page on the same site. This would mean the player would not stop. I have 2 examples:
The first is http://www.djtunes.com/ unfortunately this adds a # to the url and all navigation after invoking the player is appended to the the site url with the # in between.
The second example is http://hypem.com/ this constructs the url in a more friendly fashion. I have noticed that clicking the refresh button reloads the entire page but this is to be expected. Any assistance with this problem would be appreciated.
I believe you'll require ajax to load the rest of the pages, with the flash player running. To get the URLs like hypem.com, you can try manipulating the browser history. Read up on this article

Using hidden frame to store or pass data between pages

We need to implement a mechanism to persist information between web pages in the same session. There is a lot of information on the client-side and passing it back and forth to the server across requests is something we want to avoid. HTML5 local storage is one option.
The other option mentioned was "using a hidden frame where the data is kept". I am not sure what this option really means.
Does it mean keeping a hidden frame that holds on to the data across page requests?
How would this be accomplished? Are there any jquery plugins or sample code I can look at?
What are the advantages and disadvantages?
I am not aware of a way where you can keep data in the main page and use a hidden iframe/frame to persist data. This is because once the main page is reloaded (when you go to another page), everything in the iframe is lost.
You would basically use the main page as your data-storage location. On top of the main page, you would superimpose an iframe. The user would interact with your site through the iframe. From the user's perspective, there is no difference. You can persist information by writing to the parent frame (the main page). Since the main page is never getting reloaded, you can persist data inside it.
I am not aware of any Javascript libraries that do this; I will take a look though.
Keep in mind that this might affect SEO and possibly navigation (not back/forward buttons). Another point, as Guffa noted, is that users cannot share links to your page since the URL in the address bar never changes (all interaction is via the iframe). So when your user sends someone a link, they will end up at the very first page.
You can't keep a frame from one page to another, so the only way to use that is to make the frame cover the window and load the actual pages in the frame. That way you can keep the data in the surrounding page that won't be replaced.
This of course means that you actually never leave the page. The URL in the location bar remains the same when the content changes, so you can't bookmark a specific page or share it with others. Search engines will link to the content pages instead of the frame, so anyone finding your page that way will end up on a non-functioning frame page.

making a video play continuously even when changing html page with javascript and without frames

I would like to have a video play continuouly even when html page changes.The new google videos page works this way. My page utilizes javascript.
You can only continue to play video if you are changing portions of the DOM, not if the location of the page changes.
What about reloading parts of the page with AJAX.
Then you avoid a reload which would stop the video playing.
I think you want to check into AJAX (Asynchronous JavaScript and XML). This allows you to manipulate parts of the page (in general, the entire HTML DOM) using callbacks to the server via JavaScript. This is exactly what YouTube/Google Videos use to allow voting/feedback while still watching the video, since any page reload forces the browser to stop playback of the video and restart.
Depending on which web framework you are using, there are various different choices for AJAX libraries out there. Microsoft have create their own [ASP.NET AJAX]](http://www.asp.net/ajax/) for example, which is now very mature.

Categories