Jplayer - Creating dynamic play list

Question

I am using jPLayer to play mp3's for a project. They mp3's will be loaded dynamically from a database. I am trying to create the links that will load the selected mp3 into the player. Currently I have which does does not work. I believe I am doing something incorrectly with the click event telling what mp3 to play. If I hardcode the path it works fine but I do not want to set it up that way because there could be hundreds of media files.

$(document).ready(function(){

    $("#jquery_jplayer_1").jPlayer({
         ready: function () {
            $(this).jPlayer("setMedia", {
            mp3: "http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
        }).jPlayer("play");
         },
         ended: function (event) {
        $(this).jPlayer("play");
         },
         swfPath: "js",
         supplied: "mp3"
    });

       $(".song").click(function() {
       $("#jquery_jplayer_1").jPlayer("setMedia", {
        mp3: $(this).attr("name").val();
       });
        $("#jquery_jplayer_1").jPlayer("play");
    return false;
    });

});

        <a href="#" class="song" name="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3">Song 3</a>
        <a href="#" class="song" name="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3">Song 4</a>

This code does work but I would like to get the info from the href

$(".song").click(function() {
        $("#jquery_jplayer_1").jPlayer("setMedia", {
            mp3: "http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3"
        });
        $("#jp_playlist_1 ul").html("

Lismore - MP3

"); $("#jquery_jplayer_1").jPlayer("play"); return false; });

MJC · Accepted Answer · 2011-04-12T20:03:47.533

6

Try changing this $(this).attr("name").val(); with $(this).attr("name");

also a good idea would be:

<a  class="song" href="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3">Song 3</a>

and then

$('.song').click(function(eve){
eve.preventDefault();
...
...
...

});

and of course

mp3: $(this).attr("href")

edited Apr 12 '11 at 20:03

answered Apr 12 '11 at 19:23

MJC

3,871
4
23
34

hmm tried making those changes and setting it to the href and adding the preventDefault but it is still opening the link normally. edit- Actually the preventDefault(); is working it's just that the javascript in general isn't working when I have that code inserted for the mp3 – Cvongrim Apr 12 '11 at 19:34
1

loose the ; in the end of the $(this).attr('href') – MJC Apr 12 '11 at 20:03
That was it. Thank's a ton. I really appreciate it. I had a feeling I was doing something small – Cvongrim Apr 12 '11 at 20:15

Jplayer - Creating dynamic play list

1 Answers1