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