Ninja Audio Player: Stylizowany Odtwarzacz Audio dla WordPress

Update V. 3.0

Zaktualizowany js. tak by podmiana odtwarzacza zachodziła tylko na elementach na których jeszcze nie była wykonywana, by zlikwidować bug pojawiający się przy parakrotnym wywołaniu funcji podmiany

(function($, window, document, undefined) {
    var czyDotyk = 'ontouchstart' in window,
        zdarzenieStart = czyDotyk ? 'touchstart' : 'mousedown',
        zdarzenieRuch = czyDotyk ? 'touchmove' : 'mousemove',
        zdarzenieKoniec = czyDotyk ? 'touchend' : 'mouseup',
        zdarzenieAnulowanie = czyDotyk ? 'touchcancel' : 'mouseup',
        sekundyNaCzas = function(sekundy) {
            var godziny = Math.floor(sekundy / 3600),
                minuty = Math.floor(sekundy % 3600 / 60),
                sekundy = Math.ceil(sekundy % 3600 % 60);
            return (godziny == 0 ? '' : godziny > 0 && godziny.toString().length < 2 ? '0' + godziny + ':' : godziny + ':') + (minuty.toString().length < 2 ? '0' + minuty : minuty) + ':' + (sekundy.toString().length < 2 ? '0' + sekundy : sekundy);
        },
        czyMoznaOdtworzycTyp = function(plik) {
            var elementAudio = document.createElement('audio');
            return !!(elementAudio.canPlayType && elementAudio.canPlayType('audio/' + plik.split('.').pop().toLowerCase() + ';').replace(/no/, ''));
        };

    jQuery.fn.odtwarzaczAudio = function(parametry) {
        var parametry = jQuery.extend({
                przedrostekKlasy: 'odtwarzaczAudio',
                tekstOdtworz: '',
                tekstPauza: '',
                tekstGlosnosc: ''
            }, parametry),
            klasyCSS = {},
            podklasyCSS = {
                odtworzPauza: 'odtworzpauza',
                odtwarza: 'odtwarza',
                czas: 'czas',
                czasBiezacy: 'czas-biezacy',
                czasCalkowity: 'czas-calkowity',
                pasek: 'pasek',
                pasekZaladowany: 'pasek-zaladowany',
                pasekOdtworzony: 'pasek-odtworzony',
                glosnosc: 'glosnosc',
                przyciskGlosnosci: 'przycisk-glosnosci',
                regulacjaGlosnosci: 'regulacja-glosnosci',
                brakGlosnosci: 'brak-glosnosci',
                wycisz: 'wycisz',
                mini: 'mini'
            };

        for (var nazwaPodklasy in podklasyCSS)
            klasyCSS[nazwaPodklasy] = parametry.przedrostekKlasy + '-' + podklasyCSS[nazwaPodklasy];

        this.each(function() {
            if ($(this).hasClass('wystylizowany')) return; // Sprawdzenie, czy element ma już klasę 'wystylizowany'
            $(this).addClass('wystylizowany'); // Dodanie klasy 'wystylizowany' po przetworzeniu

            if ($(this).prop('tagName').toLowerCase() != 'audio')
                return false;

            var $this = $(this),
                plikAudio = $this.attr('src'),
                czyAutoOdtwarzanie = $this.get(0).getAttribute('autoplay'),
                czyAutoOdtwarzanie = czyAutoOdtwarzanie === '' || czyAutoOdtwarzanie === 'autoplay' ? true : false,
                czyZapetlenie = $this.get(0).getAttribute('loop'),
                czyZapetlenie = czyZapetlenie === '' || czyZapetlenie === 'loop' ? true : false,
                czyWsparcie = false;

            if (typeof plikAudio === 'undefined') {
                $this.find('source').each(function() {
                    plikAudio = $(this).attr('src');
                    if (typeof plikAudio !== 'undefined' && czyMoznaOdtworzycTyp(plikAudio)) {
                        czyWsparcie = true;
                        return false;
                    }
                });
            } else if (czyMoznaOdtworzycTyp(plikAudio)) czyWsparcie = true;

            var odtwarzacz = $('<div class="' + parametry.przedrostekKlasy + '">' + (czyWsparcie ? $('<div>').append($this.eq(0).clone()).html() : '<embed src="' + plikAudio + '" width="0" height="0" volume="100" autostart="' + czyAutoOdtwarzanie.toString() + '" loop="' + czyZapetlenie.toString() + '" />') + '<div class="' + klasyCSS.odtworzPauza + '" title="' + parametry.tekstOdtworz + '"><a href="#">' + parametry.tekstOdtworz + '</a></div></div>'),
                elementAudio = czyWsparcie ? odtwarzacz.find('audio') : odtwarzacz.find('embed'),
                elementAudio = elementAudio.get(0);

            if (czyWsparcie) {
                odtwarzacz.find('audio').css({
                    'width': 0,
                    'height': 0,
                    'visibility': 'hidden'
                });
                odtwarzacz.append('<div class="' + klasyCSS.czas + ' ' + klasyCSS.czasBiezacy + '"></div><div class="' + klasyCSS.pasek + '"><div class="' + klasyCSS.pasekZaladowany + '"></div><div class="' + klasyCSS.pasekOdtworzony + '"></div></div><div class="' + klasyCSS.czas + ' ' + klasyCSS.czasCalkowity + '"></div><div class="' + klasyCSS.glosnosc + '"><div class="' + klasyCSS.przyciskGlosnosci + '" title="' + parametry.tekstGlosnosc + '"><a href="#">' + parametry.tekstGlosnosc + '</a></div><div class="' + klasyCSS.regulacjaGlosnosci + '"><div><div></div></div></div></div>');

                var pasek = odtwarzacz.find('.' + klasyCSS.pasek),
                    pasekOdtworzony = odtwarzacz.find('.' + klasyCSS.pasekOdtworzony),
                    pasekZaladowany = odtwarzacz.find('.' + klasyCSS.pasekZaladowany),
                    czasBiezacy = odtwarzacz.find('.' + klasyCSS.czasBiezacy),
                    czasCalkowity = odtwarzacz.find('.' + klasyCSS.czasCalkowity),
                    przyciskGlosnosci = odtwarzacz.find('.' + klasyCSS.przyciskGlosnosci),
                    regulacjaGlosnosci = odtwarzacz.find('.' + klasyCSS.regulacjaGlosnosci + ' > div'),
                    domyslnaGlosnosc = 0,
                    ustawBiezacyCzas = function(e) {
                        prawdziweZdarzenie = czyDotyk ? e.originalEvent.touches[0] : e;
                        elementAudio.currentTime = Math.round((elementAudio.duration * (prawdziweZdarzenie.pageX - pasek.offset().left)) / pasek.width());
                    },
                    ustawGlosnosc = function(e) {
                        prawdziweZdarzenie = czyDotyk ? e.originalEvent.touches[0] : e;
                        elementAudio.volume = Math.abs((prawdziweZdarzenie.pageX - regulacjaGlosnosci.offset().left) / regulacjaGlosnosci.width());
                    },
                    aktualizujPasekZaladowany = setInterval(function() {
                      if (elementAudio.buffered.length > 0) {
                        pasekZaladowany.width((elementAudio.buffered.end(0) / elementAudio.duration) * 100 + '%');
                        if (elementAudio.buffered.end(0) >= elementAudio.duration)
                            clearInterval(aktualizujPasekZaladowany);
                      }
                    }, 100);

                var testDomyslnejGlosnosci = elementAudio.volume,
                    testowaGlosnosc = elementAudio.volume = 0.111;
                if (Math.round(elementAudio.volume * 1000) / 1000 == testowaGlosnosc) elementAudio.volume = testDomyslnejGlosnosci;
                else odtwarzacz.addClass(klasyCSS.brakGlosnosci);

                czasCalkowity.html('&hellip;');
                czasBiezacy.text(sekundyNaCzas(0));

                elementAudio.addEventListener('loadeddata', function() {
                    czasCalkowity.text(sekundyNaCzas(elementAudio.duration));
                    regulacjaGlosnosci.find('div').width(elementAudio.volume * 100 + '%');
                    domyslnaGlosnosc = elementAudio.volume;
                });

                elementAudio.addEventListener('timeupdate', function() {
                    czasBiezacy.text(sekundyNaCzas(elementAudio.currentTime));
                    pasekOdtworzony.width((elementAudio.currentTime / elementAudio.duration) * 100 + '%');
                });

                elementAudio.addEventListener('volumechange', function() {
                    regulacjaGlosnosci.find('div').width(elementAudio.volume * 100 + '%');
                    if (elementAudio.volume > 0 && odtwarzacz.hasClass(klasyCSS.wycisz)) odtwarzacz.removeClass(klasyCSS.wycisz);
                    if (elementAudio.volume <= 0 && !odtwarzacz.hasClass(klasyCSS.wycisz)) odtwarzacz.addClass(klasyCSS.wycisz);
                });

                elementAudio.addEventListener('ended', function() {
                    odtwarzacz.removeClass(klasyCSS.odtwarza);
                });

                pasek.on(zdarzenieStart, function(e) {
                        ustawBiezacyCzas(e);
                        pasek.on(zdarzenieRuch, function(e) {
                            ustawBiezacyCzas(e);
                        });
                    })
                    .on(zdarzenieAnulowanie, function() {
                        pasek.unbind(zdarzenieRuch);
                    });

                przyciskGlosnosci.on('click', function() {
                    if (odtwarzacz.hasClass(klasyCSS.wycisz)) {
                        odtwarzacz.removeClass(klasyCSS.wycisz);
                        elementAudio.volume = domyslnaGlosnosc;
                    } else {
                        odtwarzacz.addClass(klasyCSS.wycisz);
                        domyslnaGlosnosc = elementAudio.volume;
                        elementAudio.volume = 0;
                    }
                    return false;
                });

                regulacjaGlosnosci.on(zdarzenieStart, function(e) {
                        ustawGlosnosc(e);
                        regulacjaGlosnosci.on(zdarzenieRuch, function(e) {
                            ustawGlosnosc(e);
                        });
                    })
                    .on(zdarzenieAnulowanie, function() {
                        regulacjaGlosnosci.unbind(zdarzenieRuch);
                    });
            } else odtwarzacz.addClass(klasyCSS.mini);

            if (czyAutoOdtwarzanie) odtwarzacz.addClass(klasyCSS.odtwarza);

            odtwarzacz.find('.' + klasyCSS.odtworzPauza).on('click', function() {
                if (odtwarzacz.hasClass(klasyCSS.odtwarza)) {
                    $(this).attr('title', parametry.tekstOdtworz).find('a').html(parametry.tekstOdtworz);
                    odtwarzacz.removeClass(klasyCSS.odtwarza);
                    czyWsparcie ? elementAudio.pause() : elementAudio.Stop();
                } else {
                    $(this).attr('title', parametry.tekstPauza).find('a').html(parametry.tekstPauza);
                    odtwarzacz.addClass(klasyCSS.odtwarza);
                    czyWsparcie ? elementAudio.play() : elementAudio.Play();

                    // Pauzowanie innych elementów audio
                    var wszystkieAudio = $('audio').not(elementAudio);
                    wszystkieAudio.each(function(index, inneAudio) {
                        if (!inneAudio.paused) {
                            inneAudio.pause();
                            $(inneAudio).closest('.' + parametry.przedrostekKlasy).removeClass(klasyCSS.odtwarza);
                        }
                    });
                }
                return false;
            });

            $this.replaceWith(odtwarzacz);
        });
        return this;
    };
})(jQuery, window, document);

jQuery(function() {
    jQuery('audio').odtwarzaczAudio();
});

---

Wtyczka Ninja Audio Player to zaawansowane rozwiązanie dla użytkowników WordPress, umożliwiające stylizowane odtwarzanie plików audio. Dzięki wsparciu dla JavaScript i CSS, oferuje ona szeroki zakres funkcji, takich jak responsywność, łatwość integracji i estetyczne wykończenie. Instalacja jest prosta, wystarczy dodać odpowiednie skrypty i style za pomocą PHP. Odtwarzacz posiada intuicyjny interfejs oraz możliwość kontrolowania głośności i postępu odtwarzania. Sprawdź, jak ta wtyczka może urozmaicić Twoją stronę!

ninja-audio-player.php

<?php
/*
Plugin Name: Ninja Audio Player
Description: Stylizowany oudio player
Version: 2.0
Author: Maciej Sajan
Author URI: https://projektninja.com/
*/




function odpal_skrypty_ninja_audio_player(){

   wp_enqueue_script('ninja_audio_player_js', plugins_url( '/ninja-audio-player.js', __FILE__ ), array('jquery'), null, true);
    
    wp_register_style('ninja_audio_player_style', plugins_url('ninja-audio-player.css',__FILE__ ));

    wp_enqueue_style('ninja_audio_player_style');
    
}
add_action('init', 'odpal_skrypty_ninja_audio_player');

?>

ninja-audio-player.js

/*
    AUTHOR: Osvaldas Valutis, www.osvaldas.info
*/
(function($, window, document, undefined) {
    var czyDotyk = 'ontouchstart' in window,
        zdarzenieStart = czyDotyk ? 'touchstart' : 'mousedown',
        zdarzenieRuch = czyDotyk ? 'touchmove' : 'mousemove',
        zdarzenieKoniec = czyDotyk ? 'touchend' : 'mouseup',
        zdarzenieAnulowanie = czyDotyk ? 'touchcancel' : 'mouseup',
        sekundyNaCzas = function(sekundy) {
            var godziny = Math.floor(sekundy / 3600),
                minuty = Math.floor(sekundy % 3600 / 60),
                sekundy = Math.ceil(sekundy % 3600 % 60);
            return (godziny == 0 ? '' : godziny > 0 && godziny.toString().length < 2 ? '0' + godziny + ':' : godziny + ':') + (minuty.toString().length < 2 ? '0' + minuty : minuty) + ':' + (sekundy.toString().length < 2 ? '0' + sekundy : sekundy);
        },
        czyMoznaOdtworzycTyp = function(plik) {
            var elementAudio = document.createElement('audio');
            return !!(elementAudio.canPlayType && elementAudio.canPlayType('audio/' + plik.split('.').pop().toLowerCase() + ';').replace(/no/, ''));
        };

    jQuery.fn.odtwarzaczAudio = function(parametry) {
        var parametry = jQuery.extend({
                przedrostekKlasy: 'odtwarzaczAudio',
                tekstOdtworz: '',
                tekstPauza: '',
                tekstGlosnosc: ''
            }, parametry),
            klasyCSS = {},
            podklasyCSS = {
                odtworzPauza: 'odtworzpauza',
                odtwarza: 'odtwarza',
                czas: 'czas',
                czasBiezacy: 'czas-biezacy',
                czasCalkowity: 'czas-calkowity',
                pasek: 'pasek',
                pasekZaladowany: 'pasek-zaladowany',
                pasekOdtworzony: 'pasek-odtworzony',
                glosnosc: 'glosnosc',
                przyciskGlosnosci: 'przycisk-glosnosci',
                regulacjaGlosnosci: 'regulacja-glosnosci',
                brakGlosnosci: 'brak-glosnosci',
                wycisz: 'wycisz',
                mini: 'mini'
            };

        for (var nazwaPodklasy in podklasyCSS)
            klasyCSS[nazwaPodklasy] = parametry.przedrostekKlasy + '-' + podklasyCSS[nazwaPodklasy];

        this.each(function() {
            if ($(this).prop('tagName').toLowerCase() != 'audio')
                return false;

            var $this = $(this),
                plikAudio = $this.attr('src'),
                czyAutoOdtwarzanie = $this.get(0).getAttribute('autoplay'),
                czyAutoOdtwarzanie = czyAutoOdtwarzanie === '' || czyAutoOdtwarzanie === 'autoplay' ? true : false,
                czyZapetlenie = $this.get(0).getAttribute('loop'),
                czyZapetlenie = czyZapetlenie === '' || czyZapetlenie === 'loop' ? true : false,
                czyWsparcie = false;

            if (typeof plikAudio === 'undefined') {
                $this.find('source').each(function() {
                    plikAudio = $(this).attr('src');
                    if (typeof plikAudio !== 'undefined' && czyMoznaOdtworzycTyp(plikAudio)) {
                        czyWsparcie = true;
                        return false;
                    }
                });
            } else if (czyMoznaOdtworzycTyp(plikAudio)) czyWsparcie = true;

            var odtwarzacz = $('<div class="' + parametry.przedrostekKlasy + '">' + (czyWsparcie ? $('<div>').append($this.eq(0).clone()).html() : '<embed src="' + plikAudio + '" width="0" height="0" volume="100" autostart="' + czyAutoOdtwarzanie.toString() + '" loop="' + czyZapetlenie.toString() + '" />') + '<div class="' + klasyCSS.odtworzPauza + '" title="' + parametry.tekstOdtworz + '"><a href="#">' + parametry.tekstOdtworz + '</a></div></div>'),
                elementAudio = czyWsparcie ? odtwarzacz.find('audio') : odtwarzacz.find('embed'),
                elementAudio = elementAudio.get(0);

            if (czyWsparcie) {
                odtwarzacz.find('audio').css({
                    'width': 0,
                    'height': 0,
                    'visibility': 'hidden'
                });
                odtwarzacz.append('<div class="' + klasyCSS.czas + ' ' + klasyCSS.czasBiezacy + '"></div><div class="' + klasyCSS.pasek + '"><div class="' + klasyCSS.pasekZaladowany + '"></div><div class="' + klasyCSS.pasekOdtworzony + '"></div></div><div class="' + klasyCSS.czas + ' ' + klasyCSS.czasCalkowity + '"></div><div class="' + klasyCSS.glosnosc + '"><div class="' + klasyCSS.przyciskGlosnosci + '" title="' + parametry.tekstGlosnosc + '"><a href="#">' + parametry.tekstGlosnosc + '</a></div><div class="' + klasyCSS.regulacjaGlosnosci + '"><div><div></div></div></div></div>');

                var pasek = odtwarzacz.find('.' + klasyCSS.pasek),
                    pasekOdtworzony = odtwarzacz.find('.' + klasyCSS.pasekOdtworzony),
                    pasekZaladowany = odtwarzacz.find('.' + klasyCSS.pasekZaladowany),
                    czasBiezacy = odtwarzacz.find('.' + klasyCSS.czasBiezacy),
                    czasCalkowity = odtwarzacz.find('.' + klasyCSS.czasCalkowity),
                    przyciskGlosnosci = odtwarzacz.find('.' + klasyCSS.przyciskGlosnosci),
                    regulacjaGlosnosci = odtwarzacz.find('.' + klasyCSS.regulacjaGlosnosci + ' > div'),
                    domyslnaGlosnosc = 0,
                    ustawBiezacyCzas = function(e) {
                        prawdziweZdarzenie = czyDotyk ? e.originalEvent.touches[0] : e;
                        elementAudio.currentTime = Math.round((elementAudio.duration * (prawdziweZdarzenie.pageX - pasek.offset().left)) / pasek.width());
                    },
                    ustawGlosnosc = function(e) {
                        prawdziweZdarzenie = czyDotyk ? e.originalEvent.touches[0] : e;
                        elementAudio.volume = Math.abs((prawdziweZdarzenie.pageX - regulacjaGlosnosci.offset().left) / regulacjaGlosnosci.width());
                    },
                    aktualizujPasekZaladowany = setInterval(function() {
                      if (elementAudio.buffered.length > 0) {
                        pasekZaladowany.width((elementAudio.buffered.end(0) / elementAudio.duration) * 100 + '%');
                        if (elementAudio.buffered.end(0) >= elementAudio.duration)
                            clearInterval(aktualizujPasekZaladowany);
                      }
                    }, 100);

                var testDomyslnejGlosnosci = elementAudio.volume,
                    testowaGlosnosc = elementAudio.volume = 0.111;
                if (Math.round(elementAudio.volume * 1000) / 1000 == testowaGlosnosc) elementAudio.volume = testDomyslnejGlosnosci;
                else odtwarzacz.addClass(klasyCSS.brakGlosnosci);

                czasCalkowity.html('&hellip;');
                czasBiezacy.text(sekundyNaCzas(0));

                elementAudio.addEventListener('loadeddata', function() {
                    czasCalkowity.text(sekundyNaCzas(elementAudio.duration));
                    regulacjaGlosnosci.find('div').width(elementAudio.volume * 100 + '%');
                    domyslnaGlosnosc = elementAudio.volume;
                });

                elementAudio.addEventListener('timeupdate', function() {
                    czasBiezacy.text(sekundyNaCzas(elementAudio.currentTime));
                    pasekOdtworzony.width((elementAudio.currentTime / elementAudio.duration) * 100 + '%');
                });

                elementAudio.addEventListener('volumechange', function() {
                    regulacjaGlosnosci.find('div').width(elementAudio.volume * 100 + '%');
                    if (elementAudio.volume > 0 && odtwarzacz.hasClass(klasyCSS.wycisz)) odtwarzacz.removeClass(klasyCSS.wycisz);
                    if (elementAudio.volume <= 0 && !odtwarzacz.hasClass(klasyCSS.wycisz)) odtwarzacz.addClass(klasyCSS.wycisz);
                });

                elementAudio.addEventListener('ended', function() {
                    odtwarzacz.removeClass(klasyCSS.odtwarza);
                });

                pasek.on(zdarzenieStart, function(e) {
                        ustawBiezacyCzas(e);
                        pasek.on(zdarzenieRuch, function(e) {
                            ustawBiezacyCzas(e);
                        });
                    })
                    .on(zdarzenieAnulowanie, function() {
                        pasek.unbind(zdarzenieRuch);
                    });

                przyciskGlosnosci.on('click', function() {
                    if (odtwarzacz.hasClass(klasyCSS.wycisz)) {
                        odtwarzacz.removeClass(klasyCSS.wycisz);
                        elementAudio.volume = domyslnaGlosnosc;
                    } else {
                        odtwarzacz.addClass(klasyCSS.wycisz);
                        domyslnaGlosnosc = elementAudio.volume;
                        elementAudio.volume = 0;
                    }
                    return false;
                });

                regulacjaGlosnosci.on(zdarzenieStart, function(e) {
                        ustawGlosnosc(e);
                        regulacjaGlosnosci.on(zdarzenieRuch, function(e) {
                            ustawGlosnosc(e);
                        });
                    })
                    .on(zdarzenieAnulowanie, function() {
                        regulacjaGlosnosci.unbind(zdarzenieRuch);
                    });
            } else odtwarzacz.addClass(klasyCSS.mini);

            if (czyAutoOdtwarzanie) odtwarzacz.addClass(klasyCSS.odtwarza);

            odtwarzacz.find('.' + klasyCSS.odtworzPauza).on('click', function() {
                if (odtwarzacz.hasClass(klasyCSS.odtwarza)) {
                    $(this).attr('title', parametry.tekstOdtworz).find('a').html(parametry.tekstOdtworz);
                    odtwarzacz.removeClass(klasyCSS.odtwarza);
                    czyWsparcie ? elementAudio.pause() : elementAudio.Stop();
                } else {
                    $(this).attr('title', parametry.tekstPauza).find('a').html(parametry.tekstPauza);
                    odtwarzacz.addClass(klasyCSS.odtwarza);
                    czyWsparcie ? elementAudio.play() : elementAudio.Play();

                    // Pauzowanie innych elementów audio
                    var wszystkieAudio = $('audio').not(elementAudio);
                    wszystkieAudio.each(function(index, inneAudio) {
                        if (!inneAudio.paused) {
                            inneAudio.pause();
                            $(inneAudio).closest('.' + parametry.przedrostekKlasy).removeClass(klasyCSS.odtwarza);
                        }
                    });
                }
                return false;
            });

            $this.replaceWith(odtwarzacz);
        });
        return this;
    };
})(jQuery, window, document);

jQuery(function() {
    jQuery('audio').odtwarzaczAudio();
});

console.log("jestem tutaj");

ninja-audio-player.css

.odtwarzaczAudio {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    padding: 7px 10px;
    align-items: center;
    border: none;
    border-radius: 16px;
    background: #000;
    box-shadow: rgb(255 255 255 / 18%) 0px 1px 4px;
}

.odtwarzaczAudio a:hover, .odtwarzaczAudio a {
    text-decoration: none;
    box-shadow: none!important;
    -webkit-box-shadow:none!important;
}

.odtwarzaczAudio-odtworzpauza {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.odtwarzaczAudio:not(.odtwarzaczAudio-odtwarza) .odtwarzaczAudio-odtworzpauza {
    background: rgba(91, 130, 255, 0);
    border: 1px solid #d6382e;
}

.odtwarzaczAudio:not(.odtwarzaczAudio-odtwarza) .odtwarzaczAudio-odtworzpauza:hover {
    background: rgba(91, 130, 255, 0.1);
}

.odtwarzaczAudio-odtwarza .odtwarzaczAudio-odtworzpauza {
    background: rgba(253, 79, 26, 0);
    border: 1px solid #d6382e;
}

.odtwarzaczAudio-odtwarza .odtwarzaczAudio-odtworzpauza:hover {
    background: rgba(235, 79, 26, 0.1);
}

.odtwarzaczAudio:not(.odtwarzaczAudio-odtwarza) .odtwarzaczAudio-odtworzpauza a {
    content: '';
    justify-content: center;
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 5px solid transparent;
    border-right: none;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #d6382e;
}

.odtwarzaczAudio-odtwarza .odtwarzaczAudio-odtworzpauza a {
    content: '';
    display: flex;
    justify-content: space-between;
    width: 12px;
    height: 14px;
}

.odtwarzaczAudio-odtwarza .odtwarzaczAudio-odtworzpauza a::before, .odtwarzaczAudio-odtwarza .odtwarzaczAudio-odtworzpauza a::after {
    content: '';
    width: 4px;
    height: 14px;
    background-color: #d6382e;
}

.odtwarzaczAudio-czas {
    display: flex;
    width: 40px;
    justify-content:center;
    font-size: 12px;
    color: rgba(51, 51 ,51, .6)
}

.odtwarzaczAudio-czas-biezacy {
    margin-left: 24px;
}

.odtwarzaczAudio-czas-calkowity {
    margin-right: 24px;
}

.odtwarzaczAudio-pasek {
    position: relative;
    display: flex;
    margin: 0 12px;
    height: 12px;
    flex-basis: 0;
    flex-grow: 1;
    cursor: pointer;
}

.odtwarzaczAudio-pasek::before {
    content: '';
    position: absolute;
    top: 5px;
    width: 100%;
    height: 2px;
    background-color: #DDE2E6;
}

.odtwarzaczAudio-pasek > div {
    position: absolute;
    left: 0;
    top: 5px;
}

.odtwarzaczAudio-pasek-zaladowany {
    z-index: 1;
    height: 2px;
    background: #BEC8D2;
}

.odtwarzaczAudio-pasek-odtworzony {
    flex-direction: row-reverse;
    z-index: 2;
    height: 2px;
    background: #d6382e;
}

.odtwarzaczAudio-pasek-odtworzony::after {
    display: flex;
    position: absolute;
    content: '';
    box-sizing: border-box;
    top: -5px;
    right: -1px;
    margin-right: -5px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 6px;
}

.odtwarzaczAudio:not(.odtwarzaczAudio-odtwarza) .odtwarzaczAudio-pasek-odtworzony::after {
    border: 2px solid #BEC8D2;
}

.odtwarzaczAudio-odtwarza .odtwarzaczAudio-pasek-odtworzony::after {
    border: 2px solid #d6382e;
}

.odtwarzaczAudio-glosnosc {
    display: flex;
    align-items: center;
}

.odtwarzaczAudio-przycisk-glosnosci {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.odtwarzaczAudio-przycisk-glosnosci a {
    display: flex;
    width: 6px;
    height: 8px;
    background-color: #9A9FB0;
    position: relative;
}

.odtwarzaczAudio-przycisk-glosnosci a:before, .odtwarzaczAudio-przycisk-glosnosci a:after {
    content: '';
    position: absolute;
}

.odtwarzaczAudio-przycisk-glosnosci a:before {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 9px solid #9A9FB0;
    border-bottom: 8px solid transparent;
    border-left: none;
    top: -4px;
}

.odtwarzaczAudio:not(.odtwarzaczAudio-wycisz) .odtwarzaczAudio-przycisk-glosnosci a:after {
    left: 10px;
    top: 0px;
    width: 6px;
    height: 6px;
    border: 6px double #9A9FB0;
    border-width: 6px 6px 0 0;
    border-radius: 0 12px 0 0;
    transform: rotate(45deg);
}

.odtwarzaczAudio-wycisz .odtwarzaczAudio-przycisk-glosnosci a {
    background-color: #d6382e;
}

.odtwarzaczAudio-wycisz .odtwarzaczAudio-przycisk-glosnosci a:before {
    border-right: 9px solid #d6382e;
}

.odtwarzaczAudio-regulacja-glosnosci {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.odtwarzaczAudio-regulacja-glosnosci > div {
    position: relative;
    display: flex;
    width: 60px;
    height: 2px;
    cursor: pointer;
    background-color: #BEC8D2;
}

.odtwarzaczAudio-regulacja-glosnosci div div {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background-color: #d6382e;
}

/* responsive | you can change the max-width value to match your theme */

@media screen and (max-width: 679px) {
    .odtwarzaczAudio-regulacja-glosnosci {
        display: none;
    }
}

.wp-block-audio audio {
    width: unset!important;
    min-width: unset!important;
}

.odtwarzaczAudio-czas-biezacy, .odtwarzaczAudio-czas-calkowity {
    display: none;
}