Shuffle a playlist

[SaroGFX]

Dear Daniweb,

I just got the following HTML5 music player, which gets it's music from a list I provide in HTML like this:

<ul>
<li class="xtitle">Follow Me Here B</li>
 <li class="xauthor">Author Name</li>
<li class="xsources_mp3">audio/adg3com_freeform.mp3</li>
<li class="xsources_ogg">audio/adg3com_freeform.ogg</li>
</ul>                   
<ul>
<li class="xtitle">This is Freeform C</li>
<li class="xauthor">Author Name</li>
<li class="xsources_mp3">audio/wm_follow_me.mp3</li>
<li class="xsources_ogg">audio/wm_follow_me.ogg</li>
</ul>

I am looking for a way to get this list shuffled so the playlist doesnt always start with the same song. So far my knowledge (null) of javascript, but my guess is that i have to edit something at this part of the code.

 b.playlist_arr = [];
            c(".xaudioplaylist", d).children().each(function () {
                currentElement = c(this);
                b.total_images++;
                b.playlist_arr[b.total_images - 1] = [];
                b.playlist_arr[b.total_images - 1].title = "";
                b.playlist_arr[b.total_images - 1].author = "";
                b.playlist_arr[b.total_images - 1].thumb = "";
                b.playlist_arr[b.total_images - 1].sources_mp3 = "";
                b.playlist_arr[b.total_images - 1].sources_ogg = "";
                null != currentElement.find(".xtitle").html() && (b.playlist_arr[b.total_images - 1].title = currentElement.find(".xtitle").html());
                null != currentElement.find(".xauthor").html() && (b.playlist_arr[b.total_images - 1].author = currentElement.find(".xauthor").html());
                null != currentElement.find(".xthumb").html() && (b.playlist_arr[b.total_images - 1].thumb = currentElement.find(".xthumb").html());
                null != currentElement.find(".xsources_mp3").html() && (b.playlist_arr[b.total_images - 1].sources_mp3 = currentElement.find(".xsources_mp3").html());
                null != currentElement.find(".xsources_ogg").html() && (b.playlist_arr[b.total_images - 1].sources_ogg = currentElement.find(".xsources_ogg").html());
                thumbsHolder_Thumb = c('<div class="thumbsHolder_ThumbOFF" rel="' + (b.total_images - 1) + '"><div class="padding">' + (a.showPlaylistNumber ? b.total_images + ". " : "") + b.playlist_arr[b.total_images - 1].title + "</div></div>");
                y.append(thumbsHolder_Thumb);
                thumbsHolder_Thumb.css({
                    top: (thumbsHolder_Thumb.height() + 1) * b.total_images + "px",
                    background: a.playlistRecordBgOffColor,
                    "border-bottom-color": a.playlistRecordBottomBorderOffColor,
                    color: a.playlistRecordTextOffColor
                });
                1 === b.total_images && thumbsHolder_Thumb.css({
                    background: a.playlistRecordBgOnColor,
                    "border-bottom-color": a.playlistRecordBottomBorderOnColor,
                    color: a.playlistRecordTextOnColor
                })
            });

I would very much appreciate any help!

Cheers,
Saro