Help with creating a shuffle button for html5 audio

Hi I am trying to create a shuffle button for the native html5 audio player. I have multiple playlists and would like to create a shuffle for each playlist. I have the been searching for a solution for this everywhere and can't seem to find an answer which I find to be odd seeming as though this is surely something that people would want to know about. So I figured I would try this forum and see if anyone here can help I am great with html and designing webpages but not so great when it comes to web developement and javascript. So if at all possible be as specific as you can be (examples would be nice if at all possible) and that would be much apperciated as I said I am not great with javascript i only know the basics. Here is the code for my audio player and playlists. The playlists will be different but to keep it short the onlick functions are the same below but in the page they will be different and load different songs for each onclick event. I would like a shuffle button for each of the playlists below but can't seem to find anything on how to achieve this.

<audio id="player" controls="controls">
<source src="#" type="audio/ogg">
<source src="#" type="audio/mp3">
</audio>

<ul class="playlist">
<li><button class="music-button" onclick='track1()'>Track1</button></li>
<li><button class="music-button" onclick='track2()'>Track2</button></li>
<li><button class="music-button" onclick='track3()'>Track3</button></li>
</ul>

<ul class="playlist">
<li><button class="music-button" onclick='track1()'>Track1</button></li>
<li><button class="music-button" onclick='track2()'>Track2</button></li>
<li><button class="music-button" onclick='track3()'>Track3</button></li>
</ul>

<script>
function track1(){

var player=document.getElementById('player');
var sourceOgg=document.getElementById('player');
var sourceMp3=document.getElementById('player');

sourceOgg.src='url.ogg
sourceMp3.src='url.mp3';

player.load();
player.play();
}

function track2(){

var player=document.getElementById('player');
var sourceOgg=document.getElementById('player');
var sourceMp3=document.getElementById('player');

sourceOgg.src='url.ogg
sourceMp3.src='url.mp3';

player.load();
player.play();
}

function track3(){

var player=document.getElementById('player');
var sourceOgg=document.getElementById('player');
var sourceMp3=document.getElementById('player');

sourceOgg.src='url.ogg
sourceMp3.src='url.mp3';

player.load();
player.play();
}

</script>