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: ".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=".mp3">Song 3</a>
        <a href="#" class="song" name=".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: ".mp3"
        });
        $("#jp_playlist_1 ul").html("
Lismore - MP3
");
        $("#jquery_jplayer_1").jPlayer("play");
        return false;
    });

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/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/audio/mp3/Miaow-07-Bubble.mp3">Song 3</a>
        <a href="#" class="song" name="http://www.jplayer/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/audio/mp3/Miaow-04-Lismore.mp3"
        });
        $("#jp_playlist_1 ul").html("
Lismore - MP3
");
        $("#jquery_jplayer_1").jPlayer("play");
        return false;
    });

• javascript
• jquery
• jplayer

1 Answer 1

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

also a good idea would be:

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

and then

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

});

and of course

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