简体   繁体   中英

Jplayer - Creating dynamic play list

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; });

    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")
    

    The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

     
    粤ICP备18138465号  © 2020-2024 STACKOOM.COM