Question

This question is very specific, on how to make a music playing application 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!

Answer 1

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.