Music playing website applications

This question is very specific, on how to make a music playing applicat开发者_如何学JAVAion like the one on http://www.beatport.com - the effects:

1. the player drops down when music link is clicked
2. the player doesn't reload on page change.

i can't believe that they are using an iframe ?? since everyone seems to think that is bad practice.

and its def. not flash

what do you thinks they're using here??

any idea on how to make something like this?

thanks!

For the music player, they're using HTML5 audio (with an option to switch to Flash). It's contained in a position: fixed; div that lets them keep it on the page when you scroll. The div that the player is in is almost certainly loaded with AJAX when you click play, and then displayed when it loads, explaining the dropping down when the music link is clicked.

The main page is likely loaded with some more AJAX, there's a <div id="page-wrap"> that is likely being reloaded upon links being clicked. jQuery Mobile does this to make multipage apps work in a single page, so it's not unheard of.

Oddly enough, there is an iframe on the page that appears to be reporting user metrics.

In addition to what @thedaian said. They are using HTML5 to play the audio. The page is ajaxed, but the url and history is manipulated using history.pushState which is a new feature of HTML5. This allows you to update the URL without doing a new request. More about it here. This of course isn't supported in all browsers, and they check for this support at the of the page.

The audio of course can be Flash, HTML5 or anything that allows the music controller.

The animation looks to be simple jquery slide effects.