Add Next and Previous button to HTML5 audio player from JSON using javascript and jquery

I'm building a music player that needs a next and previous button. My playlist is returned from my database as a JSON object. The problem I'm encountering is getting the next and previous buttons to work. I have created a jsFiddle with the code. Does anybody know how to make the next and previous buttons work?

UPDATE:

This question pertains more on how to get the next previous value in the JSON array. I really just need to display the name of the next and previous song in the JSON array.

Markup:

<a id="prev-bt" href="#">
<div class="player-musicnav-rw-column1">
    <ul class="musicnav-rw">
        <li class="rw"></li>
    </ul>
</div></a>

<audio id="audio-player" name="audio-player" src="" ></audio>


<a id="next-bt" href="#">
<div class="player-musicnav-ff-column3">
    <ul class="musicnav-ff">
        <li class="ff">NEXT</li>
    </ul>
</div>
</a>

<a id="prev-bt" href="#">
<div class="player-musicnav-ff-column3">
    <ul class="musicnav-ff">
        <li class="ff">PREV</li>
    </ul>
</div>
</a>

<br/>
<br/>
<div id="player-digital-title">
</div>
<br/>
<br/>
<a href="#" id='player-handwriting-title'></a>​

Code:

var whichsong = 0;
$(document).ready(function() {
    $("#play-bt").click(function() {
        $("#audio-player")[0].play();
    })

    $("#pause-bt").click(function() {
        $("#audio-player")[0].pause();
        $("#message").text("Music paused");
    })

    $("#stop-bt").click(function() {
        $("#audio-player")[0].pause();
        $("#audio-player")[0].currentTime = 0;
    })

    $('#player-handwriting-title').click(function() {
        $('#player-digital-title').html($(this).html());
    });
    $("#next-bt").click(function() {
        $("#audio-player")[0].pause();
        $("#audio-player")[0].src = '';
        whichsong++;
        if (whichsong == treeObj.root.length) {
            whichsong = 0;
        }
        $("#audio-player")[0].src = treeObj.root[whichsong];
        if (playing) {
            $("#audio-player")[0].play();
        }
    })
    $("#prev-bt").click(function() {
        $("#audio-player")[0].pause();
        $("#audio-player")[0].src = '';
        whichsong++;
        if (whichsong == treeObj.root.length) {
            whichsong = 0;
        }
        $("#audio-player")[0].src = treeObj.root[whichsong];
        if (playing) {
            $("#audio-player")[0].play();
        }
    })
});

$(document).ready(function() {

    var treeObj = {
        "root": [{
            "id": "1",
            "trackName": "Whippin Post"},
        {
            "id": "2",
            "trackName": "Sweet Caroline"},
        {
            "id": "3",
            "trackName": "Tears in Heaven"},
        {
            "id": "4",
            "trackName": "Ain't She Sweet"},
        {
            "id": "5",
            "trackName": "Octopus' Garden"},
        {
            "id": "6",
            "trackName": "Teen Spirit"},
        {
            "id": "7",
            "trackName": "Knockin on Heaven's Door"}]
    };

    var $ul = $("<ul></ul > ");
    $.each(treeObj.root, function(i, v) {
        $ul.append(
        $(" < li > < /li>").append($("<a></a > ").attr({
            "
href ": v.id,
            "
data - file ": v.trackFile
        }).html(v.trackName)));
    });
    $("#player - handwriting - title ").empty().append($ul);


    $("#player - handwriting - title a ").click(function() {
        var name = $(this).html(),
            filename = $(this).attr("
data - file ");
        filename2 = "
upload - form / upload / " + filename;
        $('#player-digital-title').html($(this).html());

        document.getElementById('audio-player').src = filename2;
        $("#audio - player ")[0].play();
        return false;
    });
});​

I think I'm very close but I just can't quite seem to get it to work.