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

13,861

Solution 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.

Solution 2

Someone seems to have worked out how it's done here.

They were also kind enough to provide an exhaustive review of the method used to accomplish this: http://jonhall.info/how_to/create_a_playlist_for_html5_audio

His approach begins by loading all the tracks into an array:

tracks = [
    {"track":1,"name":"Happy Birthday Variation: In the style of Beethoven","length":"00:55","file":"01_Happy_Birthday_Variation_In_The"},
    {"track":2,"name":"Wedding March Variation 1","length":"00:37","file":"02_Wedding_March_1"},
    {"track":3,"name":"Happy Birthday Variation: In the style of Tango","length":"01:05","file":"03_Happy_Birthday_Variation_In_The"},
    {"track":4,"name":"Wedding March Variation 2","length":"00:40","file":"04_Wedding_March_2"},
    {"track":5,"name":"Random Classical","length":"00:59","file":"05_AFI_com"}
]

The "next" button advances the track using the current track's index in the array for reference:

btnNext = $('#btnNext').click(function() {
    if((index + 1) < trackCount) {
        index++;
        loadTrack(index);
        if(playing) {
            audio.play();
        }
    } else {
        audio.pause();
        index = 0;
        loadTrack(index);
    }
})

A function is used to replace the source attribute of the audio element with the new track:

loadTrack = function(id) {
    $('.plSel').removeClass('plSel');
    $('#plUL li:eq(' + id + ')').addClass('plSel');
    npTitle.text(tracks[id].name);
    index = id;
    audio.src = mediaPath + tracks[id].file + extension;
}
Share:
13,861
Johan
Author by

Johan

Updated on June 04, 2022

Comments

  • Johan
    Johan almost 2 years

    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.