Open pws2016 opened 5 years ago
hello, I want to set default play list via ajax, how i can do this?
my actual code is:
$(function() { "use strict"; if ($('.audio-player').length) { var myPlayListOtion = '
var myPlaylist = new jPlayerPlaylist({ jPlayer: "#jquery_jplayer_1", cssSelectorAncestor: "#jp_container_1" }, [{ title: "Al-Fatihah", artist: "Abdelbari Al-Toubayti", mp3: "https://server8.mp3quran.net/ahmad_huth/001.mp3", option : myPlayListOtion }], { swfPath: "js/plugins", supplied: "oga, mp3", wmode: "window", useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, playlistOptions: { autoPlay: false } }); $("#jquery_jplayer_1").on($.jPlayer.event.ready + ' ' + $.jPlayer.event.play, function(event) { 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'><span class='que_img'><img src='"+obj.image+"'></span><div class='que_data'> <span class='jp-surah-name'>" + obj.title + "</span> <div class='jp-artist-name'>" + obj.artist + "</div></div></div>"); } }); $('.knob-wrapper').mousedown(function() { $(window).mousemove(function(e) { var angle1 = getRotationDegrees($('.knob')), volume = angle1 / 270 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"); }); function getRotationDegrees(obj) { var matrix = obj.css("-webkit-transform") || obj.css("-moz-transform") || obj.css("-ms-transform") || obj.css("-o-transform") || obj.css("transform"); if(matrix !== 'none') { var values = matrix.split('(')[1].split(')')[0].split(','); var a = values[0]; var b = values[1]; var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); } else { var angle = 0; } return (angle < 0) ? angle + 360 : angle; } var timeDrag = false; $('.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); } }); var updatebar = function(x) { var progress = $('.jp-progress'); var position = x - progress.offset().left; var percentage = 100 * position / progress.width(); if (percentage > 100) { percentage = 100; } if (percentage < 0) { percentage = 0; } $("#jquery_jplayer_1").jPlayer("playHead", percentage); $('.jp-play-bar').css('width', percentage + '%'); }; $('#playlist-toggle, #playlist-text, #playlist-wrap li a').unbind().on('click', function() { $('#playlist-wrap').fadeToggle(); $('#playlist-toggle, #playlist-text').toggleClass('playlist-is-visible'); }); $('.hide_player').unbind().on('click', function() { $('.audio-player').toggleClass('is_hidden'); $(this).html($(this).html() == '<i class="fa fa-angle-down"></i> HIDE' ? '<i class="fa fa-angle-up"></i> SHOW PLAYER' : '<i class="fa fa-angle-down"></i> HIDE'); }); $('body').unbind().on('click', '.audio-play-btn', function() { $('.audio-play-btn').removeClass('is_playing'); $(this).addClass('is_playing'); var playlistId = $(this).data('playlist-id'); myPlaylist.play(playlistId); }); }); }
hello, I want to set default play list via ajax, how i can do this?
my actual code is:
$(function() { "use strict"; if ($('.audio-player').length) { var myPlayListOtion = '
';