Question

I know you can either open a separate window, use Flash or frames (yuk) to display an mp3 player that continually plays audio regardless of which page you’re on. But I’ve just seen this site here that appears to do it without frames, Flash or a separate window and was wondering how they do it?

http://www.killertracks.com/#/browse.aspx

Looks like they’re using JavaScript to load the songs, but evern when I got to a different URL in the site, the music keeps playing. Any ideas how I could do that? Got a site I’m building at the moment that needs this featured.

Thanks,

Osu

Answer 1

Actually the audio is being played in a Flash player 🙂

However, while the audio is playing all pages are loaded via AJAX and made navigable via the Fragment Identifier.

You can see this in Chrome, for example, by pressing F12, selecting the Network tab, then clicking on a link. If there is a themed-playlists.aspx listed, click on it and in the Request Headers section you will see X-Requested-With:XMLHttpRequest which is the API that JavaScript is using to load the new page dynamically without navigating away from the current page. The new page is then used to update the content on the current page to make it look like the new page. Many websites use this mechanism to dynamically update a page without a full page load.

For example, as I am typing this answer, JavaScript is periodically sending my answer to the stackoverflow server and saving it as a draft. This is completely transparent to my interaction with the main page.

Another great site that uses this method is the BBC Music Showcase, however it dynamically plays both audio and video whilst allowing you to navigate the site!