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
Post a Comment