title: Jplayer - Click a link and play a song in the playlist
body: <p>How can I play a song in the playlist after clicking a link? It looks like Jplayer generates a list group automatically. In this case, I would like to link an image to start an mp3 file in the playlist.</p>
  
  <pre><code>&lt;a class="track" href="/TSP-01-Cro_magnon_man.mp3"&gt;&lt;img src=''&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Here's the script</p>
  
  <pre><code>$(document).ready(function() {
  
    var myPlaylist = new jPlayerPlaylist({
      jPlayer: "#jquery_jplayer_1",
      cssSelectorAncestor: "#jp_container_1"
    }, [{
      title: "Cro Magnon Man",
      artist: "Mushroom Records",
      mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
      oga: "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
    }, {
      title: "Your Face",
      artist: "Ministry",
      mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
      oga: "http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
    }, {
      title: "Thin Ice",
      artist: "Screaming Trees",
      mp3: "http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3",
      oga: "http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg"
    }], {
      swfPath: "../../dist/jplayer",
      supplied: "oga, mp3",
      wmode: "window",
      useStateClassSkin: true,
      autoBlur: false,
      smoothPlayBar: true,
      keyEnabled: true
    }); // end jplayer initiate
  
    /* ======== Other Audio Player Functions ======== */
  
    $("#jquery_jplayer_1").on(
      $.jPlayer.event.ready + ' ' + $.jPlayer.event.play,
      function(event) {
  
        /* === ENABLE PLAYLIST ==== */
  
        var current = myPlaylist.current;
        var playlist = myPlaylist.playlist;
        $.each(playlist, function(index, obj) {
          if (index == current) {
            $(".jp-now-playing").html("&lt;div class='jp-track-name'&gt;" + obj.title + "&lt;/div&gt; &lt;div class='jp-artist-name'&gt;" + obj.artist + "&lt;/div&gt;");
  
          }
        });
  
        /* === VOLUME DRAGGING ==== */
  
        $('.jp-volume-bar').mousedown(function() {
            var parentOffset = $(this).offset(),
              width = $(this).width();
            $(window).mousemove(function(e) {
              var x = e.pageX - parentOffset.left,
                volume = x / width
              if (volume &gt; 1) {
                $("#jquery_jplayer_1").jPlayer("volume", 1);
              } else if (volume &lt;= 0) {
                $("#jquery_jplayer_1").jPlayer("mute");
              } else {
                $("#jquery_jplayer_1").jPlayer("volume", volume);
                $("#jquery_jplayer_1").jPlayer("unmute");
              }
            });
            return false;
          })
          .mouseup(function() {
            $(window).unbind("mousemove");
          });
  
        /* === ENABLE DRAGGING ==== */
  
        var timeDrag = false; /* Drag status */
        $('.jp-play-bar').mousedown(function(e) {
          timeDrag = true;
          updatebar(e.pageX);
        });
        $(document).mouseup(function(e) {
          if (timeDrag) {
            timeDrag = false;
            updatebar(e.pageX);
          }
        });
        $(document).mousemove(function(e) {
          if (timeDrag) {
            updatebar(e.pageX);
          }
        });
  
        //update Progress Bar control
        var updatebar = function(x) {
  
          var progress = $('.jp-progress');
          //var maxduration = myPlaylist.duration; //audio duration
  
          var position = x - progress.offset().left; //Click pos
          var percentage = 100 * position / progress.width();
  
          //Check within range
          if (percentage &gt; 100) {
            percentage = 100;
          }
          if (percentage &lt; 0) {
            percentage = 0;
          }
  
          $("#jquery_jplayer_1").jPlayer("playHead", percentage);
  
          //Update progress bar
          $('.jp-play-bar').css('width', percentage + '%');
        };
  
        /* === Playlist Functions ==== */
  
        $('#playlist-toggle').on('click', function() {
          $('#playlist-wrap').stop().fadeToggle();
          $(this).toggleClass('playlist-is-visible');
        });
  
      }); // end jplayer event ready
  
  }); // end document ready
  </code></pre>