Question

On my page I load some tracks in a music player ( http://dev.upcoming-djs.com ) on page load.

Which is working fine.

However when people go to the following URL: http://dev.upcoming-djs.com/track/1/artist/title I would like to load another track in the player on page load.

Currently the JS code for the player is:

var tracks = [];
tracks.push({'url':trackurl, 'title':trackurl});

$('.upcoming-player-container').theplayer({
  links: tracks // contains an array with url's
});

Which is static.

What would be the best way (not meant to be subjective, just don’t know how to rephrase it) of making it dynamic.

I was thinking of adding some hyperlinks in a (hidden) container on the page which I retrieve with JS.

Is this a good way to do it? (Since I think Google might add the text to the search results).

Or perhaps there is a better way of doing it?

Answer 1

Assuming that the player will play the tracks in order, here’s some code that will shift the track specified by the URL /track/##/artist/title to the front of the playlist, presumably playing it first on page load:

var tracks = [],
    trackMatch
    trackPlay;

tracks.push({'url': trackurl,'title': trackurl});
// tracks.push etc...

// find the track number
trackMatch = window.location.href.match(/track\/(\d+)/i);

// if found store as integer
if (trackMatch) {
    trackPlay = parseInt(trackMatch[1], 10);
}

// if found move selected track to front of tracks array
if (trackPlay) {
    tracks = [tracks[trackPlay - 1]]
             .concat(tracks.slice(0, trackPlay - 1))
             .concat(tracks.slice(trackPlay));
}

$('.upcoming-player-container').theplayer({
    links: tracks // contains an array with url's
});