index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Audio Playlist</title>
    <style>
        #playlist{
            list-style: none;
        }
        #playlist li a{
            color:black;
            text-decoration: none;
        }
        #playlist .current-song a{
            color:blue;
        }
    </style>
</head>
<body>
    <p>Demo Music From <a href="http://incompetech.com">incompetech.com</a></p>
    <audio src="" controls id="audioPlayer" >
        Sorry, your browser doesn't support html5!
    </audio>
    <ul id="playlist">
        <li><a href="audio/Soaring.mp3#t=378">Soaring</a></li>
        <li><a href="audio/BossaAntigua.mp3">Bossa Antigua</a></li>
        <li><a href="audio/Exit%20the%20Premises.mp3">Exit the Premises</a></li>
        <li><a href="audio/Severe%20Tire%20Damage.mp3">Severe Tire Damage</a></li>
        <li><a href="audio/Broken%20Reality.mp3">Broken Reality</a></li>
        
    </ul>
    <a href="#" onclick="playlist.prevTrack();">Prev Track</a>
    <a href="#" onclick="playlist.nextTrack();">Next Track</a>
    <a href="#" onclick="playlist.toggleShuffle();">Toggle Shuffle</a>
    <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
    <script src="audioPlayer.js"></script>
    <script>
        
        /*
    Default constructor configuration:
        autoplay: false,
        shuffle: false,
        loop: false,
        playerId: "audioPlayer",
        playlistId: "playlist",
        currentClass: "current-song"
        
        
*/
        
        // loads the audio player
        var config = {
          autoplay: true, 
            loop: true,
            shuffle: true
        };
        var playlist = new AudioPlaylist();
        
    </script>
</body>
</html>