Continuing music playback even while changing page

问题:

SoundCloud is an amazing site that makes use of HTML5 and Backbone.js. The only thing is, I can't find what technology they use that allows the music to keep playing even while changing pages.

What technology are they using to get the audio stream playing?

回答1:

The fact is, that you do not load a new page, but the content is loaded via AJAX.

The page then uses the HTML5 History API to add the possibility to Navigate using the browser's backward and forward buttons.

I started into this topic by reading and trying out the following two resources:

http://diveintohtml5.info/history.html
http://html5demos.com/history

---

The most simple way is to load and replace the current content via AJAX and then call

history.pushState(null, null, link.href);

In order to add the history entry of the currently shown page.

If you now press the back button, the browser won't load the previous page, but fire the event popState. This can be used to restore the previous page using AJAX or information stored in your JavaScript variables.

window.addEventListener("popstate", function(e) {
    //loadPreviousPage();
}