Question

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.

Answer 1

You need to do a .load() on the audio element after swapping the src and before doing .play(). But besides that, the code seems to be broken (you dont need script tags on the javascript field on jsfiddle, and when removing them, everything breaks) 🙁

Perhaps you can try using jPlayer to do the job: http://jplayer.org/

Also, take a look here: http://www.longtailvideo.com/html5/loading/
View source and take a look at the setSrc function.