General Question

Vortico's avatar

How does this website continue playing music when the URL is changed?

Asked by Vortico (3113 points ) July 28th, 2011

On Soundowl, if you search for a song and click its play button, a music player will appear on the bottom of the page and begin playing. However, I have noticed that if you click on a link to change the page, the player will remain and the song will continue playing as if it was not reloaded.

This would be understandable if the website was using AJAX to load content from the server, but the actual URL changes—not the part after the hash #.

What is going on here? How can I replicate this on my own?

If this does not work for you on your browser, I’m using Google Chrome for Mac, although I doubt it’s a browser-specific feature.

Observing members: 0 Composing members: 0

5 Answers

abysmalbeauty's avatar

the source code says window.pagetype = “ajaxy”

I don’t know anything about writing script or whatnot but is that the same as what you referenced above making this sort of thing possible?

jrpowell's avatar

There is a jQuery plugin that does this without using a hash. Here is a example.

Vortico's avatar

I found yet another example of this, but I still can’t find how the browser allows the URL in the address bar to change but not the actual address of the page.

funkdaddy's avatar

HTML5 has a history API that’s part of the standard. It looks like the second example is using that…

From the “yet another example”...

if (typeof history.pushState === ‘undefined’) {
state.className = ‘fail’;
} else {
state.className = ‘success’;
state.innerHTML = ‘HTML5 History API available’;
}

and later

history.pushState(data[title], title, event.target.href);

Here’s a walkthrough that’s pretty good.

Manipulating History for Fun & Profit

@johnpowell‘s answer is how soundowl actually does theirs. From what I can tell it uses jQuery to extend the functionality to older browsers that don’t have the latest HTML5 hotness.

Vortico's avatar

Wow! That’s an extremely informative article that seems to answer all my questions. Essentially the part I was missing turned out to be a simple line of code using the new API.

history.pushState(null, null, “u/r/l”);

I also see why the jQuery plugin is used: “If your web application fails in browsers with scripting disabled, Jakob Nielsen’s dog will come to your house and shit on your carpet.”

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther