Почему перестал корректно работать плагин аудио после обновления jQuery?

Question

[Agata_Lyod]

Перестал работать плагин аудио (плеер со своими стилями) после перехода на JQuery 3.3.1
Работал до версии 1.5.2 включительно, с 1.6.0 начинаются проблемы. Вижу, что вообще он подгружается и контрольную панель по умолчанию убирает, даже загружает свои стили. Но выполняются уже не все функции, например, не загружается длительность трека (пишет NaN:NaN) после включения аудио текущее время тоже становится NaN:NaN. Не нажимается кнопка паузы. Подозреваю, что не так указана переменная времени, возможно неправильный метод .bind. Может быть, проблемы серьезнее. JQuery Migrate и консоль браузера не выводит никаких ошибок.

Оставаться на древней версии - уже вообще никак, все новые плагины работают на 3.3.1.

(function($) {
    // plugin definition
    $.fn.gAudio = function(options) {       
        // build main options before element iteration      
        var defaults = {
            theme: 'simpledark',
            childtheme: ''
        };
        var options = $.extend(defaults, options);
        // iterate and reformat each matched element
        return this.each(function() {
            var $gAudio = $(this);
            
            //create html structure
            //main wrapper
            var $audio_wrap = $('<div></div>').addClass('i-latter-compositions__audio-player').addClass(options.theme).addClass(options.childtheme);
            //controls wraper
            var $audio_controls = $('<div class="i-latter-compositions__audio-controls"><a class="i-latter-compositions__audio-play" title="Play/Pause"></a><div class="i-latter-compositions__audio-seek"></div><div class="i-latter-compositions__audio-timer">0:00</div><div class="i-latter-compositions__audio-duration"></div></div>');
            $gAudio.wrap($audio_wrap);
            $gAudio.after($audio_controls);
            
            //get new elements
            var $audio_container = $gAudio.parent('.i-latter-compositions__audio-player');
            var $audio_controls = $('.i-latter-compositions__audio-controls', $audio_container);
            var $ghinda_play_btn = $('.i-latter-compositions__audio-play', $audio_container);
            var $ghinda_audio_seek = $('.i-latter-compositions__audio-seek', $audio_container);
            var $ghinda_audio_timer = $('.i-latter-compositions__audio-timer', $audio_container);
            var $ghinda_audio_duration = $('.i-latter-compositions__audio-duration', $audio_container);

            //$audio_controls.hide(); // keep the controls hidden
                        
            var gPlay = function() {
                if($gAudio.attr('paused') == false) {
                    $gAudio[0].pause();
                } else {
                    $gAudio[0].play();
                }
            };
            
            $ghinda_play_btn.click(gPlay);
            $gAudio.click(gPlay);
            
            $gAudio.bind('play', function() {
                $ghinda_play_btn.addClass('i-latter-compositions__paused-button');
            });
            $gAudio.bind('pause', function() {
                $ghinda_play_btn.removeClass('i-latter-compositions__paused-button');
            });
            $gAudio.bind('ended', function() {
                $ghinda_play_btn.removeClass('i-latter-compositions__paused-button');
            });
            
            var seeksliding;
            var createSeek = function() {
                if($gAudio.attr('readyState')) {
                    var audio_duration = $gAudio.attr('duration');
                    $ghinda_audio_seek.slider({
                        value: 0,
                        step: 0.01,
                        orientation: "horizontal",
                        range: "min",
                        max: audio_duration,
                        animate: true,
                        slide: function(){
                            seeksliding = true;
                        },
                        stop:function(e,ui){
                            seeksliding = false;
                            $gAudio.attr("currentTime",ui.value);
                        }
                    });
                    $audio_controls.show();
                } else {
                    setTimeout(createSeek, 150);
                }
            };

            createSeek();
        
            var gTimeFormat=function(seconds){
                var m=Math.floor(seconds/60)<10?""+Math.floor(seconds/60):Math.floor(seconds/60);
                var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
                return m+":"+s;
            };
            
            var seekUpdate = function() {
                var currenttime = $gAudio.attr('currentTime');
                if(!seeksliding) $ghinda_audio_seek.slider('value', currenttime);
                $ghinda_audio_timer.text(gTimeFormat(currenttime));
            };

            var duration = $gAudio.attr('duration');
            $ghinda_audio_duration.text(gTimeFormat(duration));
            
            
            $gAudio.bind('timeupdate', seekUpdate); 
            
            $gAudio.removeAttr('controls');
            
        });
    };
    //
    // plugin defaults
    //
    $.fn.gAudio.defaults = {
    };

})(jQuery);

Скрипты подключаются в HTML перед закрывающим тэгом body в таком порядке
<code lang="html">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="/plugins/OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>
<script type="text/javascript" src="/plugins/jquery-ui-1.8.2.custom.min.js" defer></script>
<script type="text/javascript" src="/dist/script.js" defer></script>
<script>
$(document).ready(function(){
    setTimeout(getPlayer,1000);
    function getPlayer() {
        $('#audio1').gAudio();
        $('#audio2').gAudio();
        $('#audio3').gAudio();
    }
});
</script>
<script>
$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
        center:true,
        loop:true,
        autoplayHoverPause:true,
        items:5
    });
});
</script>
</code>

Answer 1

[Agata_Lyod]

Исчитала всю документацию - на данный момент проблема решилась заменой метода attr на метод prop. Вдруг кому пригодится. Нашла строку с ошибкой, перемещая строку $audio_controls.show(); с самого начала вниз по коду до тех пор, пока панель управления не пропала.

Answer 2

[Айнур Валиев]

проще грузить старую версию рядом с новой с заданием простр. имен.