jplayer / jPlayer

jPlayer : HTML5 Audio & Video for jQuery
http://jplayer.org/
Other
4.6k stars 1.47k forks source link

default play list loaded by ajax #417

Open pws2016 opened 5 years ago

pws2016 commented 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);
        });

    });
}