I notice they use with href, yet the page doesn't reload. How is it possible to use links that allow you to share a link and have it load just as it was without actually reloading?
My experience with window.history,pushState and popState is that if you try to refresh the page on your new url, it all falls apart. What's going on here? My understanding is that it has something to do with state objects but how do you store the entire state of a page in an object?
It is possible that Soundcloud uses an isomorphic approach. This is a combination between an SPA (single page application) and a traditional server side rendered MPA (multiple page application). The page will initially load as server side rendered and once the page is loaded and you click on a link Javascript will handle the navigation and prevent the default link navigation behaviour. What is happening here is that an XHR request is sent to the server to request for the data pertinent to that link. The server would have some kind of special routing to handle a link requested via XHR request and shortcut to the relevant data requested. The response of that XHR request maybe an HTML excerpt or a JSON object which has the necessary information or content that will then be injected into the document by Javascript without requiring a page reload. JavaScript will also push the state into the URL so that it reflects the appropriate route. In these cases the routing is handled entirely by the server. So if you refresh the page you will get the same content that you are seeing.
This approach takes advantage of the best of both worlds (SPA and MPA). Server side rendered content on initial page load is usually much more accessible in many ways and it will load faster than an SPA. This approach would also allow for progressive enhancement and a clearer separation of concerns between client side and server side.