jquery - Jplayer - Click a link and play a song in the playlist -


how can play song in playlist after clicking link? looks jplayer generates list group automatically. in case, link image start mp3 file in playlist.

<a class="track" href="/tsp-01-cro_magnon_man.mp3"><img src=''></a> 

here's script

$(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("<div class='jp-track-name'>" + obj.title + "</div> <div class='jp-artist-name'>" + obj.artist + "</div>");          }       });        /* === 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 > 1) {               $("#jquery_jplayer_1").jplayer("volume", 1);             } else if (volume <= 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 > 100) {           percentage = 100;         }         if (percentage < 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 


Comments

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -