Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.01.2021, 19:28
Аспирант
Отправить личное сообщение для Игорь №111111111111111111 Посмотреть профиль Найти все сообщения от Игорь №111111111111111111
 
Регистрация: 19.01.2020
Сообщений: 34

Добавление объекта
Как мне в <span> добавить options.playlist[i].cover ?
'<span>'
+ options.playlist[i].author
+ ' - '
+ options.playlist[i].title
+ '<time>'
+ trackDuration
+ '</time>'
+ '</span>'

Если сделать +options.playlist[i].cover он мне выводит текст, но не изображение...
"use strict";
// (function ($) {
    jQuery.fn.fm_radio = function (options) {
        options = $.extend({
            volume: 50,
            playlist: [],
            autostart: false,
        }, options);
 
        var make = function () {
            var $this = $(this);
            var cpl = 0;
            var $audio = new Audio();
 
            var $longSlider = $this.find('.fm_radio__long-slider');
            var $allTime = $this.find('.fm_radio__all-time');
            // setTimeout addEventListener('ended'
            //mnpl.js:99 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.init_track @ mnpl.js:99(anonymous function) @ mnpl.js:72
            var endedRun = false;
            $this.find('.fm_radio__volume-slider').slider({
                animate: true,
                range: 'min',
                value: options.volume,
                min: 0,
                max: 1,
                step: 0.01,
                slide: function (event, ui) {
                    $audio.volume = ui.value;
                }
            });
 
            $longSlider.slider({
                animate: true,
                range: 'min',
                value: 0,
                min: 0,
                max: 60,
                step: 1,
                slide: function (event, ui) {
                    if (ui.value < Math.floor($audio.duration)) {
                        $audio.currentTime = ui.value;
                    } else {
                        $audio.currentTime = ui.value - 1;
                    }
                    $this.find('.fm_radio__playlist-body span').eq(cpl).addClass('fm_radio__playlist-current');
                },
            });
 
            $audio.addEventListener('canplay', function (_event) {
                if ($audio.duration) {
                   $allTime.html(toMinit($audio.duration));
                    $longSlider.slider({'max': $audio.duration});
                } else {
                   $allTime.html(toMinit(options.playlist[cpl].duration));
                    $longSlider.slider({'max': options.playlist[cpl].duration});
                }
                if (options.autostart) {
                    $audio.play();
                    $this.find('.fm_radio__pause').addClass('isplay');
                } else {
                    options.autostart = true;
                }
            });
 
            $audio.addEventListener('ended', function () {
                if (!endedRun) {
                    endedRun = true;
                    setTimeout(function () {
                        if ($this.find('.fm_radio__repeat-on')[0]) {
                            init_track(cpl);
                        } else {
                            if ($this.find('.fm_radio__random-on')[0]) {
                                $this.find('.fm_radio__playlist-body span').eq(cpl).removeClass('fm_radio__playlist-current');
                                for (var prevTrack = cpl; ( prevTrack === cpl ) && ( options.playlist.length > 1 ); cpl = Math.floor(Math.random() * options.playlist.length));
                                init_track(cpl);
                            } else {
                                if (cpl == options.playlist.length - 1) {
                                    cpl = -1;
                                }
                                init_track(cpl + 1);
                            }
                        }
                    }, 500);
                    endedRun = false;
                }
            });
 
            $audio.addEventListener('timeupdate', function () {
                $longSlider.slider({'value': $audio.currentTime});
                $this.find('.fm_radio__current-time').html(toMinit($audio.currentTime));
            });
 
            function toMinit(val) {
                val = Number(val);
                var ost = Math.floor(val % 60);
                if (ost < 10) {
                    ost = '0' + ost;
                }
                return Math.floor(val / 60) + ':' + ost;
            }
 
            function init_track(i) {
                $this.find('.fm_radio__playlist-body span').eq(cpl).removeClass('fm_radio__playlist-current');
                cpl = i;
                $this.find('.fm_radio__playlist-body span').eq(i).addClass('fm_radio__playlist-current');
 
                // load audio track
                $audio.src = options.playlist[i].pfile;
 
                // front track name
                $this.find('.fm_radio__front-title-track').html(options.playlist[i].title);
                $this.find('.fm_radio__front-title-author').html(options.playlist[i].author);
 
                // front bg
                $this.find('.fm_radio__front-header-next-bg').css('background-image', 'url("' + options.playlist[i].background + '")');
                $this.find('.fm_radio__front-header-current-bg').stop().animate({'opacity': 0}, 500, function () {
                    $(this).css('backgroundImage', 'url(' + options.playlist[i].background + ')');
                    $(this).css('opacity', '1');
                });
 
                //playlist bg
                $this.find('.fm_radio__playlist-body-next-bg').css('background-image', 'url("' + options.playlist[i].background + '")');
                $this.find('.fm_radio__playlist-body-current-bg').stop().animate({'opacity': 0}, 500, function () {
                    $(this).css('backgroundImage', 'url(' + options.playlist[i].background + ')');
                    $(this).css('opacity', '1');
                });
 
                // front cover
                $this.find('.fm_radio__cover-art-next').attr('src', options.playlist[i].cover);
                $this.find('.fm_radio__cover-art-current').stop().animate({'opacity': 0}, 500, function () {
                    $(this).attr('src', options.playlist[i].cover);
                    $(this).css('opacity', '1');
                });
            }
 
            init_track(cpl);
            for (var i = 0; i < options.playlist.length; i++) {
                var trackDuration = Math.floor(options.playlist[i].duration / 60) + ':';
                if (Math.floor(options.playlist[i].duration % 60) < 10) {
                    trackDuration += '0' + options.playlist[i].duration % 60;
                } else {
                    trackDuration += options.playlist[i].duration % 60;
                }
                $this.find('.fm_radio__playlist-body-inner').append(
                    '<span>'
                    
                    + options.playlist[i].author
                    + ' - '
                    + options.playlist[i].title
                    + '<time>'
                    + trackDuration
                    + '</time>'
                    + '</span>'
                );
            }
Ответить с цитированием
  #2 (permalink)  
Старый 21.01.2021, 19:28
Аспирант
Отправить личное сообщение для Игорь №111111111111111111 Посмотреть профиль Найти все сообщения от Игорь №111111111111111111
 
Регистрация: 19.01.2020
Сообщений: 34

$this.find('.fm_radio__playlist-body span').on('click',function () {
 
                init_track($(this).index('.fm_radio__playlist-body span'));
            });
 
            $this.find('.fm_radio__prev').on('click',function () {
                $this.find('.fm_radio__playlist-body span').eq(cpl).removeClass('fm_radio__playlist-current');
                if ($this.find('.fm_radio__random-on')[0]) {
                    for (var prevTrack = cpl; ( prevTrack === cpl ) && ( options.playlist.length > 1 ); cpl = Math.floor(Math.random() * options.playlist.length));
                    init_track(cpl);
                } else {
                    if (cpl == 0) {
                        cpl = options.playlist.length;
                    }
                    init_track(cpl - 1);
                }
                return false;
            });
 
            $this.find('.fm_radio__pause').on('click',function () {
                if ($audio.paused) {
                    $audio.play();
                    $(this).addClass('isplay');
                    $this.find('.fm_radio__playlist-body span').eq(cpl).addClass('fm_radio__playlist-current');
                } else {
                    $audio.pause();
                    $(this).removeClass('isplay');
                    $this.find('.fm_radio__playlist-body span').eq(cpl).removeClass('fm_radio__playlist-current');
                }
                return false;
            });
 
            $this.find('.fm_radio__next').on('click',function () {
                $this.find('.fm_radio__playlist-body span').eq(cpl).removeClass('fm_radio__playlist-current');
                if ($this.find('.fm_radio__random-on')[0]) {
                    for (var prevTrack = cpl; ( prevTrack === cpl ) && ( options.playlist.length > 1 ); cpl = Math.floor(Math.random() * options.playlist.length));
                    init_track(cpl);
                } else {
                    if (cpl == options.playlist.length - 1) {
                        cpl = -1;
                    }
                    init_track(cpl + 1);
                }
                return false;
            });
        };
        return this.each(make);
    };
 
    $(document).ready(function () {
        var $playlist = $('.fm_radio__playlist');
        var $random = $('.fm_radio__random');
        var $repeat = $('.fm_radio__repeat');
        $playlist.css('display', 'none');
        $('.fm_radio__playlist-btn-front').on('click',function () {
            $playlist.fadeToggle();
        });
        $('.fm_radio__front-btn-playlist').on('click',function () {
            $playlist.fadeToggle();
            changeSize(); //perfectScrollbar
        });
        $random.on('click',function () {
            $random.toggleClass("fm_radio__random-on");
        });
        $repeat.on('click',function () {
            $repeat.toggleClass("fm_radio__repeat-on");
        });
 
        // perfectScrollbar
        var $perfectScrollbar = $(".js-perfect-scrollbar");
 
        function changeSize() {
            var width = parseInt($perfectScrollbar.val(),10);
            var height = parseInt($perfectScrollbar.val(),10);
 
            $perfectScrollbar.width(width).height(height);
 
            // update scrollbars
            $perfectScrollbar.perfectScrollbar('update');
 
 
        }
        $perfectScrollbar.perfectScrollbar();
 
        // END perfectScrollbar
    });
// })(jQuery);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление объекта с методами к конструктору R2R Общие вопросы Javascript 12 24.08.2018 19:52
Добавление объекта, при создании, в массив Egor_735_jr Общие вопросы Javascript 5 15.08.2018 13:08
Добавление объекта в массив в цикле Dark19 Элементы интерфейса 3 11.12.2016 23:11
Динамическое добавление объекта во время анимации three.js Ni55aN Общие вопросы Javascript 0 11.11.2014 22:24
Добавление объекта в объект Sweet Общие вопросы Javascript 4 07.07.2010 17:51