Randomly choose track from jquery html5 audio playlist on page refresh - html

Question

I'm building an audio player for a web experience, that has a list of tracks. Here is the code controlling the audio player.
$( document ).ready(function() {
jQuery(function($) {
var supportsAudio = !!document.createElement('audio').canPlayType;
if(supportsAudio) {
var index = 0,
playing = false;
mediaPath = 'audio/',
extension = '',
tracks = [
{"track":1,"name":"track1","length":"00:55","file":"track1"},
{"track":2,"name":"track2","length":"00:55","file":"track2"},
{"track":3,"name":"track3","length":"00:55","file":"track3"},
{"track":4,"name":"track4","length":"00:55","file":"track4"},
{"track":5,"name":"track5","length":"00:55","file":"track5"}
],
trackCount = tracks.length,
npAction = $('#npAction'),
npTitle = $('#npTitle'),
audio = $('#audio1').bind('play', function() {
playing = true;
npAction.text('Now Playing:');
}).bind('pause', function() {
playing = false;
npAction.text('Paused:');
}).bind('ended', function() {
npAction.text('Paused:');
if((index + 1) < trackCount) {
index++;
loadTrack(index);
audio.play();
} else {
audio.pause();
index = 0;
loadTrack(index);
}
}).get(0),
li = $('#plUL li').click(function() {
var id = parseInt($(this).index());
if(id !== index) {
playTrack(id);
}
}),
loadTrack = function(id) {
$('.plSel').removeClass('plSel');
$('#plUL li:eq(' + id + ')').addClass('plSel');
npTitle.text(tracks[id].name);
index = id;
audio.src = mediaPath + tracks[id].file + extension;
},
playTrack = function(id) {
loadTrack(id);
audio.play();
};
extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
loadTrack(index);
}
});
});
Is there a way to reorder the list inside of the variable named tracks? Generating the list of 1 through 5 in a random pull? for example, the items named track2 track3 track4 ect. could potentially be played first? I'm looking for that to be random on a page refresh.
Thanks for the help!

Answer 1

You could add a playOrder field to the tracks variable, and have a function go through each on on load and assign it a random unused playOrder number.