0

I have successful implementation of static players on many of my sites using iframes. This has served my purposes thus far, and has been a little complex to make happen. i often have needed to pass a 'frame' state through a GET variable in php. a client of mine has been having display issues on their part, and it would be nice to see urls showing up in the address bar, which now brings me to rethink my approach.

In looking at Beatport's source for their html5 player, it seems they are using a javascript instantiated player, which looks very dissected and precising. So... are they keeping track of the player state and passing these variables from one page to another? what is their platform? php w/ ajax? node.js? ruby? is this asynchronous i/o at work? or just coolness afforded by html5's audio object? this is something i would like to understand, as i may have to reposition my whole method for future applications.

furthermore, does the soundcloud player api spit out progress locations? any help is greatly appreciated.

rodenbushdesign
  • 81
  • 1
  • 11

1 Answers1

1

As far as I can tell the Beatport website is full ajax, there are no actual page reloads, the main site content is dynamically reloaded when you click on a link. The location changes in the address bar can be accomplished by javascript (http://stackoverflow.com/questions/1457/modify-address-bar-url-in-ajax-app-to-match-current-state)

I would suggest using some kind of framework for this kind of functionality. Im not familiar with the PHP framework landscape but heard on SO about http://agiletoolkit.org/ which seems provide this kind of functionality

The Soundloud player does indeed "spit" updates. It is documented in their API here:

http://developers.soundcloud.com/docs/custom-player#events

onMediaTimeUpdate.scPlayer gets triggered constantly when the player is playing, could be used to display track progress outside of the player node

$(document).bind('onMediaTimeUpdate.scPlayer', function(event){
console.log(event.target, 'the track is at ' + event.position + ' out of ' + event.duration    + ' which is ' + event.relative + ' of the total');
});
Max
  • 1,468
  • 10
  • 16