Как подключить audio visualizer?

241
09 апреля 2017, 03:27

Не понимаю, просто на html странице(ссылка на страницу) всё работает, к сайту же не получается подключить, делаю всё тоже самое. Почему не хочет работать? Используется jPlayer 2.9.2

Настройки плеера

$(function() {
var _randomPlay = false;
var _autoPlayNextPage = true;
var el_jplayer = $('#jspplayer');
var _track_id = 0;
$("[data-player]").live('click', function() {
    $("[data-player]").not(this).removeClass('stop');
    el_jplayer.jPlayer("destroy");
    $('#set_track_title').html('Выберите трек');
    $('.jp-duration, .jp-current-time').html('00:00');
    var el = $(this);
    var el_track = el;
    var _track_title = el.attr('data-title');
    _track_id = el.attr('data-idn');
    document.title = "\u25b6 "+_track_title;
    $("[data-player]").parents('li').removeClass('current');
    el.parents('li').addClass('current');
    if(el.hasClass('stop')) {
        var el = $(this);
        el_jplayer.jPlayer("destroy");
        el.removeClass('stop');
        document.title = _track_title;
        el.parents('li').removeClass('current');
        return false;
    }

    var file_mp3 = el.attr("data-player");
    var _get_volume = $('.jp-volume-bar-value1').attr('data-volume');
    el_jplayer.jPlayer( {
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: file_mp3
            }).jPlayer("play");
        },
        swfPath: "http://dub.center/player",
        supplied: "mp3",
        wmode: "window",
        volume: _get_volume,
                        volumechange: function (event) {
                                        var myVol = event.jPlayer.options.volume,
                                        myMuted = event.jPlayer.options.muted;
                                        $('.jp-volume-bar-value1').attr('data-volume', myVol);
                        }, 
        cssSelectorAncestor: '',
        cssSelector: {
            volumeBar:'.jp-volume-bar1', 
            volumeBarValue:'.jp-volume-bar-value1', 
            seekBar: '.jp-seek-bar1',
            playBar: '.jp-play-bar1',
            play: ".jp-play",
            pause: ".jp-pause",
            stop: ".jp-stop",
            currentTime: ".jp-current-time",
            duration: ".jp-duration",
        }
    });
    el_jplayer.jPlayer("play");
    el.addClass('stop');
el_jplayer.bind($.jPlayer.event.ended + ".repeat", function() {
        el.removeClass('stop');
        el.parents('li').removeClass('current');
        //Next play track
        if(el.attr('data-nextplay') == 'true') {
            var _nextPlayCount = $('[data-player]').size();
            var _nextPlay = el.index('[data-player]') + 1;
            $('[data-player]').eq(_nextPlay).click();
            if(_nextPlayCount == _nextPlay) {
                _autoPlayNextPage = true
                var _nextPage = $('.navipage-next span').next();
                if(_nextPage.size()) {
                _nextPage.click();
                } else {
                $('.navipage-next a').eq(0).click();
                };
            };
        };
        //end play track            
});

    $('#set_track_title').html(_track_title);
    return false;
});

//AutoPlay next page loader
$('body').bind('success.pjax',function() { 
    if(_autoPlayNextPage) {
        _autoPlayNextPage = false;
        if(_randomPlay) $('.wmbox_home').shuffle();
        $('[data-player]').eq(0).click();
    }
});

    $('[data-player]').click(function(){
        $('.jp-image').html('<a rel="ajaxlink" href="/'+$(this).data('url')+'"><img src="'+$(this).data('image')+'" alt="'+$(this).data('title')+'"></a>');
        $('.jp-reads').html('<a target="_blank" href="'+$(this).data('reads')+'"><i class="icon-download"></i></a>');
        $('.jp-wave').html('<img src="'+$(this).data('wave')+'" alt="'+$(this).data('title')+'">');
        $('.jp-qr').html('<img src="'+$(this).data('qr')+'" alt="'+$(this).data('title')+'">');
    }); 
});

Кнопка play

<a href="#" class="play"
               id="Player{news-id}" 
               data-qr="https://chart.googleapis.com/chart?cht=qr&chl=[xfvalue_audio]&chs=100x100&choe=UTF-8&chld=L|0" 
               data-player="[xfvalue_audio]" 
               data-title="{tags} - {title}" 
               data-reads="/download.php?downreads=[xfvalue_audio]&downtitle={tags} - {title}&downimage=[xfvalue_image]&downurl={full-link}&downsize={muz_size}" 
               data-id="{news-id}" 
               data-idn="play{news-id}" 
               data-image="[xfvalue_image]" 
               data-url="?newsid={news-id}" 
               data-nextplay="true" 
               data-wave="[xfvalue_wave]">    
               <meta itemprop="audio" content="[xfvalue_audio]"> 
</a>

Плеер (Там еще много кнопок, не стал их все писать)

<div class="jp-play">play</div>
<div class="jp-pause">pause</div>
<div id="jspplayer"></div>
READ ALSO
Проблема с slick slider и owl carousel

Проблема с slick slider и owl carousel

Проблема заключается в одновременном использовании variableWidth(autoWidth) и centerMode(center)Когда в слайдере мало картинок, ни одна библиотека не справляется...

275
Как сделать ajax запрос в reactjs?

Как сделать ajax запрос в reactjs?

просмотрел кучу статей, как то все очень усложнено

320
Пустой запрос laravel + backbone + json

Пустой запрос laravel + backbone + json

Пишу API к серверуОбращаюсь к этому API с backbone

209
Как правильно подключить виджет через ajax?

Как правильно подключить виджет через ajax?

Добрый день, в процессе разработки столкнулся с одной проблемой

459