https://radiogrupo.com/wp-content/plugins/lbg-audio8-html5-radio_ads/audio8_html5/js/radio-grupo.js?ver=7.1.2

1var $ = jQuery;
2function createPlayer(jsonMakes) {
3    // ------------------------ variables --------------------------
4    let audio = $("#" + jsonMakes.id);
5    let sound = document.getElementById(jsonMakes.id);
6    let father = audio.parent(".audio_grupo");
7    let playerGrapper = father.find(".FrameBehindPlayerText");
8    let playerButton = playerGrapper.find(".AudioPlay");
9    let radioStation = playerGrapper.find(".radioStation");
10    let slider = playerGrapper.find( ".VolumeSlider" );
11    let mute = playerGrapper.find( ".VolumeButton" );
12    let containerStation = playerGrapper.find('.stationImage');
13    let xgradient = playerGrapper.find( ".xgradient" );
14    let perspectiveDownZero = playerGrapper.find( ".perspectiveDownZero" );
15    let bars = playerGrapper.find( ".bars:eq(1)" );
16    let stations = playerGrapper.find( ".stations" );
17    let moreStations = playerGrapper.find( ".moreStations" );
18    let AudioControls = playerGrapper.find( ".AudioControls" );
19    if (false) {
20        for (let i = 0; i < 92; i++) {
21            perspectiveDownZero.append('<div class="bar sound2" style="background: ' + jsonMakes.barsColor + '; animation-play-state: paused;">');
22            bars.append('<div class="bar sound" style="background: ' + jsonMakes.barsColor + '; animation-play-state: paused;"></div>');
23        }
24    } else {
25        for (let i = 0; i < 50; i++) {
26            containerStation.find('.perspectiveDownZero').append('<div class="bar sound2" style="background: ' + jsonMakes.barsColor + '; animation-play-state: paused;">');
27            containerStation.find( ".bars:eq(1)" ).append('<div class="bar sound" style="background: ' + jsonMakes.barsColor + '; animation-play-state: paused;"></div>');
28        }
29    }
30    let bar = playerGrapper.find( ".bar" );
31    // -------------------- styles -----------------------------------
32    slider.slider({ value: jsonMakes.initialVolume, step: .05, orientation: "horizontal", range: "min", max: 1, animate: !0});
33    slider.css({background: jsonMakes.volumeOffColor});
34    slider.find( ".ui-slider-range" ).css('background',  jsonMakes.volumeOnColor);
35    playerGrapper.css({ background: jsonMakes.playerBackgroundColor, height: jsonMakes.playerHeight });
36    stations.css({ background: jsonMakes.playerBackgroundColor});
37    AudioControls.css({ background: jsonMakes.playerBackgroundColor});
38    radioStation.css({color: jsonMakes.radioStationColor});
39    moreStations.css({background: jsonMakes.volumeOnColor});
40    
41    // --------------------- add playlist ---------------------------------
42    father.find('.stationImage:eq(0)').addClass('selectedImg');
43    radioStation.text(father.find('.stationImage:eq(0)').find('.name').text());
44    audio.attr('src', father.find('.stationImage:eq(0)').find('img').attr('data-sound'));
45    // ------------------- click play ---------------------
46    playerButton.click(function(e) {
47        if (playerButton.hasClass('AudioPause')) {
48            bar.css('animation-play-state', 'paused');
49            audio.attr('src', audio.attr('src') + "?cb=" + new Date().getTime());
50            sound.pause()
51            playerButton.removeClass('AudioPause');
52        } else {
53            bar.css('animation-play-state', 'running');
54            playerButton.addClass('AudioPause');
55            sound.play()
56        }
57    });
58    // -------------------- click slider --------------------
59    slider.slider({
60        change: (event, ui) => { 
61            sound.volume = ui.value;
62        } 
63    });
64    // ---------------------- click mute ---------------------
65    mute.click(function(e) {
66        if (mute.hasClass('VolumeButtonMuted')) {
67            sound.muted = false;
68            mute.removeClass('VolumeButtonMuted');
69        } else {
70            mute.addClass('VolumeButtonMuted');
71            sound.muted = true;
72        }
73
74    });
75    // ------------------------- click station --------------------
76    playerGrapper.find(".stationImage").find('img').click(function() {
77        if (!$(this).parent().hasClass('selectedImg')) {
78            playerGrapper.find(".stationImage").removeClass('selectedImg');
79            $(this).parent().addClass('selectedImg');
80            $('.bar').css('animation-play-state', 'paused');
81            $(this).parent().find('.bar').css('animation-play-state', 'running');
82            playerButton.addClass('AudioPause');
83            audio.attr('src', $(this).attr('data-sound') + "?cb=" + new Date().getTime());
84            radioStation.text($(this).parent().find('.name').text());
85            sound.play()
86        }
87    });
88    // ---------------------- click show stations ------------------
89    moreStations.click(function() {
90        let selected = '';
91        if ( !stations.hasClass('stationsResponsive') ) {
92            stations.scrollLeft(0);
93            for (let i = 0; i < playerGrapper.find('.stationImage').length; i++) {
94                if (playerGrapper.find('.stationImage:eq(' + i +')').hasClass('selectedImg')) {
95                    selected = playerGrapper.find('.stationImage:eq(' + i +')');
96                    break;
97                }
98            }
99            stations.scrollLeft(selected.position().left);
100        }
101        stations.toggleClass('stationsResponsive');
102    });
103}