Zaktualizowany js. tak by podmiana odtwarzacza zachodzi\u0142a tylko na elementach na kt\u00f3rych jeszcze nie by\u0142a wykonywana, by zlikwidowa\u0107 bug pojawiaj\u0105cy si\u0119 przy parakrotnym wywo\u0142aniu funcji podmiany<\/p>\n\n\n\n
\n(function($, window, document, undefined) {\n var czyDotyk = 'ontouchstart' in window,\n zdarzenieStart = czyDotyk ? 'touchstart' : 'mousedown',\n zdarzenieRuch = czyDotyk ? 'touchmove' : 'mousemove',\n zdarzenieKoniec = czyDotyk ? 'touchend' : 'mouseup',\n zdarzenieAnulowanie = czyDotyk ? 'touchcancel' : 'mouseup',\n sekundyNaCzas = function(sekundy) {\n var godziny = Math.floor(sekundy \/ 3600),\n minuty = Math.floor(sekundy % 3600 \/ 60),\n sekundy = Math.ceil(sekundy % 3600 % 60);\n 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);\n },\n czyMoznaOdtworzycTyp = function(plik) {\n var elementAudio = document.createElement('audio');\n return !!(elementAudio.canPlayType && elementAudio.canPlayType('audio\/' + plik.split('.').pop().toLowerCase() + ';').replace(\/no\/, ''));\n };\n\n jQuery.fn.odtwarzaczAudio = function(parametry) {\n var parametry = jQuery.extend({\n przedrostekKlasy: 'odtwarzaczAudio',\n tekstOdtworz: '',\n tekstPauza: '',\n tekstGlosnosc: ''\n }, parametry),\n klasyCSS = {},\n podklasyCSS = {\n odtworzPauza: 'odtworzpauza',\n odtwarza: 'odtwarza',\n czas: 'czas',\n czasBiezacy: 'czas-biezacy',\n czasCalkowity: 'czas-calkowity',\n pasek: 'pasek',\n pasekZaladowany: 'pasek-zaladowany',\n pasekOdtworzony: 'pasek-odtworzony',\n glosnosc: 'glosnosc',\n przyciskGlosnosci: 'przycisk-glosnosci',\n regulacjaGlosnosci: 'regulacja-glosnosci',\n brakGlosnosci: 'brak-glosnosci',\n wycisz: 'wycisz',\n mini: 'mini'\n };\n\n for (var nazwaPodklasy in podklasyCSS)\n klasyCSS[nazwaPodklasy] = parametry.przedrostekKlasy + '-' + podklasyCSS[nazwaPodklasy];\n\n this.each(function() {\n if ($(this).hasClass('wystylizowany')) return; \/\/ Sprawdzenie, czy element ma ju\u017c klas\u0119 'wystylizowany'\n $(this).addClass('wystylizowany'); \/\/ Dodanie klasy 'wystylizowany' po przetworzeniu\n\n if ($(this).prop('tagName').toLowerCase() != 'audio')\n return false;\n\n var $this = $(this),\n plikAudio = $this.attr('src'),\n czyAutoOdtwarzanie = $this.get(0).getAttribute('autoplay'),\n czyAutoOdtwarzanie = czyAutoOdtwarzanie === '' || czyAutoOdtwarzanie === 'autoplay' ? true : false,\n czyZapetlenie = $this.get(0).getAttribute('loop'),\n czyZapetlenie = czyZapetlenie === '' || czyZapetlenie === 'loop' ? true : false,\n czyWsparcie = false;\n\n if (typeof plikAudio === 'undefined') {\n $this.find('source').each(function() {\n plikAudio = $(this).attr('src');\n if (typeof plikAudio !== 'undefined' && czyMoznaOdtworzycTyp(plikAudio)) {\n czyWsparcie = true;\n return false;\n }\n });\n } else if (czyMoznaOdtworzycTyp(plikAudio)) czyWsparcie = true;\n\n 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>'),\n elementAudio = czyWsparcie ? odtwarzacz.find('audio') : odtwarzacz.find('embed'),\n elementAudio = elementAudio.get(0);\n\n if (czyWsparcie) {\n odtwarzacz.find('audio').css({\n 'width': 0,\n 'height': 0,\n 'visibility': 'hidden'\n });\n 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>');\n\n var pasek = odtwarzacz.find('.' + klasyCSS.pasek),\n pasekOdtworzony = odtwarzacz.find('.' + klasyCSS.pasekOdtworzony),\n pasekZaladowany = odtwarzacz.find('.' + klasyCSS.pasekZaladowany),\n czasBiezacy = odtwarzacz.find('.' + klasyCSS.czasBiezacy),\n czasCalkowity = odtwarzacz.find('.' + klasyCSS.czasCalkowity),\n przyciskGlosnosci = odtwarzacz.find('.' + klasyCSS.przyciskGlosnosci),\n regulacjaGlosnosci = odtwarzacz.find('.' + klasyCSS.regulacjaGlosnosci + ' > div'),\n domyslnaGlosnosc = 0,\n ustawBiezacyCzas = function(e) {\n prawdziweZdarzenie = czyDotyk ? e.originalEvent.touches[0] : e;\n elementAudio.currentTime = Math.round((elementAudio.duration * (prawdziweZdarzenie.pageX - pasek.offset().left)) \/ pasek.width());\n },\n ustawGlosnosc = function(e) {\n prawdziweZdarzenie = czyDotyk ? e.originalEvent.touches[0] : e;\n elementAudio.volume = Math.abs((prawdziweZdarzenie.pageX - regulacjaGlosnosci.offset().left) \/ regulacjaGlosnosci.width());\n },\n aktualizujPasekZaladowany = setInterval(function() {\n if (elementAudio.buffered.length > 0) {\n pasekZaladowany.width((elementAudio.buffered.end(0) \/ elementAudio.duration) * 100 + '%');\n if (elementAudio.buffered.end(0) >= elementAudio.duration)\n clearInterval(aktualizujPasekZaladowany);\n }\n }, 100);\n\n var testDomyslnejGlosnosci = elementAudio.volume,\n testowaGlosnosc = elementAudio.volume = 0.111;\n if (Math.round(elementAudio.volume * 1000) \/ 1000 == testowaGlosnosc) elementAudio.volume = testDomyslnejGlosnosci;\n else odtwarzacz.addClass(klasyCSS.brakGlosnosci);\n\n czasCalkowity.html('…');\n czasBiezacy.text(sekundyNaCzas(0));\n\n elementAudio.addEventListener('loadeddata', function() {\n czasCalkowity.text(sekundyNaCzas(elementAudio.duration));\n regulacjaGlosnosci.find('div').width(elementAudio.volume * 100 + '%');\n domyslnaGlosnosc = elementAudio.volume;\n });\n\n elementAudio.addEventListener('timeupdate', function() {\n czasBiezacy.text(sekundyNaCzas(elementAudio.currentTime));\n pasekOdtworzony.width((elementAudio.currentTime \/ elementAudio.duration) * 100 + '%');\n });\n\n elementAudio.addEventListener('volumechange', function() {\n regulacjaGlosnosci.find('div').width(elementAudio.volume * 100 + '%');\n if (elementAudio.volume > 0 && odtwarzacz.hasClass(klasyCSS.wycisz)) odtwarzacz.removeClass(klasyCSS.wycisz);\n if (elementAudio.volume <= 0 && !odtwarzacz.hasClass(klasyCSS.wycisz)) odtwarzacz.addClass(klasyCSS.wycisz);\n });\n\n elementAudio.addEventListener('ended', function() {\n odtwarzacz.removeClass(klasyCSS.odtwarza);\n });\n\n pasek.on(zdarzenieStart, function(e) {\n ustawBiezacyCzas(e);\n pasek.on(zdarzenieRuch, function(e) {\n ustawBiezacyCzas(e);\n });\n })\n .on(zdarzenieAnulowanie, function() {\n pasek.unbind(zdarzenieRuch);\n });\n\n przyciskGlosnosci.on('click', function() {\n if (odtwarzacz.hasClass(klasyCSS.wycisz)) {\n odtwarzacz.removeClass(klasyCSS.wycisz);\n elementAudio.volume = domyslnaGlosnosc;\n } else {\n odtwarzacz.addClass(klasyCSS.wycisz);\n domyslnaGlosnosc = elementAudio.volume;\n elementAudio.volume = 0;\n }\n return false;\n });\n\n regulacjaGlosnosci.on(zdarzenieStart, function(e) {\n ustawGlosnosc(e);\n regulacjaGlosnosci.on(zdarzenieRuch, function(e) {\n ustawGlosnosc(e);\n });\n })\n .on(zdarzenieAnulowanie, function() {\n regulacjaGlosnosci.unbind(zdarzenieRuch);\n });\n } else odtwarzacz.addClass(klasyCSS.mini);\n\n if (czyAutoOdtwarzanie) odtwarzacz.addClass(klasyCSS.odtwarza);\n\n odtwarzacz.find('.' + klasyCSS.odtworzPauza).on('click', function() {\n if (odtwarzacz.hasClass(klasyCSS.odtwarza)) {\n $(this).attr('title', parametry.tekstOdtworz).find('a').html(parametry.tekstOdtworz);\n odtwarzacz.removeClass(klasyCSS.odtwarza);\n czyWsparcie ? elementAudio.pause() : elementAudio.Stop();\n } else {\n $(this).attr('title', parametry.tekstPauza).find('a').html(parametry.tekstPauza);\n odtwarzacz.addClass(klasyCSS.odtwarza);\n czyWsparcie ? elementAudio.play() : elementAudio.Play();\n\n \/\/ Pauzowanie innych element\u00f3w audio\n var wszystkieAudio = $('audio').not(elementAudio);\n wszystkieAudio.each(function(index, inneAudio) {\n if (!inneAudio.paused) {\n inneAudio.pause();\n $(inneAudio).closest('.' + parametry.przedrostekKlasy).removeClass(klasyCSS.odtwarza);\n }\n });\n }\n return false;\n });\n\n $this.replaceWith(odtwarzacz);\n });\n return this;\n };\n})(jQuery, window, document);\n\njQuery(function() {\n jQuery('audio').odtwarzaczAudio();\n});\n\n<\/code><\/pre>\n\n\n\n
\n\n\n\nWtyczka Ninja Audio Player<\/strong> to zaawansowane rozwi\u0105zanie dla u\u017cytkownik\u00f3w WordPress<\/strong>, umo\u017cliwiaj\u0105ce stylizowane odtwarzanie plik\u00f3w audio. Dzi\u0119ki wsparciu dla JavaScript<\/strong> i CSS<\/strong>, oferuje ona szeroki zakres funkcji, takich jak responsywno\u015b\u0107, \u0142atwo\u015b\u0107 integracji i estetyczne wyko\u0144czenie. Instalacja jest prosta, wystarczy doda\u0107 odpowiednie skrypty i style za pomoc\u0105 PHP<\/strong>. Odtwarzacz posiada intuicyjny interfejs oraz mo\u017cliwo\u015b\u0107 kontrolowania g\u0142o\u015bno\u015bci i post\u0119pu odtwarzania. Sprawd\u017a, jak ta wtyczka mo\u017ce urozmaici\u0107 Twoj\u0105 stron\u0119!<\/p>\n\n\n\nninja-audio-player v3.0<\/a>Pobierz<\/a><\/div>\n\n\n\nninja-audio-player.php<\/h2>\n\n\n\n<?php\n\/*\nPlugin Name: Ninja Audio Player\nDescription: Stylizowany oudio player\nVersion: 2.0\nAuthor: Maciej Sajan\nAuthor URI: https:\/\/projektninja.com\/\n*\/\n\n\n\n\nfunction odpal_skrypty_ninja_audio_player(){\n\n wp_enqueue_script('ninja_audio_player_js', plugins_url( '\/ninja-audio-player.js', __FILE__ ), array('jquery'), null, true);\n \n wp_register_style('ninja_audio_player_style', plugins_url('ninja-audio-player.css',__FILE__ ));\n\n wp_enqueue_style('ninja_audio_player_style');\n \n}\nadd_action('init', 'odpal_skrypty_ninja_audio_player');\n\n?><\/code><\/pre>\n\n\n\nninja-audio-player.js<\/h2>\n\n\n\n\/*\n AUTHOR: Osvaldas Valutis, www.osvaldas.info\n*\/\n(function($, window, document, undefined) {\n var czyDotyk = 'ontouchstart' in window,\n zdarzenieStart = czyDotyk ? 'touchstart' : 'mousedown',\n zdarzenieRuch = czyDotyk ? 'touchmove' : 'mousemove',\n zdarzenieKoniec = czyDotyk ? 'touchend' : 'mouseup',\n zdarzenieAnulowanie = czyDotyk ? 'touchcancel' : 'mouseup',\n sekundyNaCzas = function(sekundy) {\n var godziny = Math.floor(sekundy \/ 3600),\n minuty = Math.floor(sekundy % 3600 \/ 60),\n sekundy = Math.ceil(sekundy % 3600 % 60);\n 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);\n },\n czyMoznaOdtworzycTyp = function(plik) {\n var elementAudio = document.createElement('audio');\n return !!(elementAudio.canPlayType && elementAudio.canPlayType('audio\/' + plik.split('.').pop().toLowerCase() + ';').replace(\/no\/, ''));\n };\n\n jQuery.fn.odtwarzaczAudio = function(parametry) {\n var parametry = jQuery.extend({\n przedrostekKlasy: 'odtwarzaczAudio',\n tekstOdtworz: '',\n tekstPauza: '',\n tekstGlosnosc: ''\n }, parametry),\n klasyCSS = {},\n podklasyCSS = {\n odtworzPauza: 'odtworzpauza',\n odtwarza: 'odtwarza',\n czas: 'czas',\n czasBiezacy: 'czas-biezacy',\n czasCalkowity: 'czas-calkowity',\n pasek: 'pasek',\n pasekZaladowany: 'pasek-zaladowany',\n pasekOdtworzony: 'pasek-odtworzony',\n glosnosc: 'glosnosc',\n przyciskGlosnosci: 'przycisk-glosnosci',\n regulacjaGlosnosci: 'regulacja-glosnosci',\n brakGlosnosci: 'brak-glosnosci',\n wycisz: 'wycisz',\n mini: 'mini'\n };\n\n for (var nazwaPodklasy in podklasyCSS)\n klasyCSS[nazwaPodklasy] = parametry.przedrostekKlasy + '-' + podklasyCSS[nazwaPodklasy];\n\n this.each(function() {\n if ($(this).prop('tagName').toLowerCase() != 'audio')\n return false;\n\n var $this = $(this),\n plikAudio = $this.attr('src'),\n czyAutoOdtwarzanie = $this.get(0).getAttribute('autoplay'),\n czyAutoOdtwarzanie = czyAutoOdtwarzanie === '' || czyAutoOdtwarzanie === 'autoplay' ? true : false,\n czyZapetlenie = $this.get(0).getAttribute('loop'),\n czyZapetlenie = czyZapetlenie === '' || czyZapetlenie === 'loop' ? true : false,\n czyWsparcie = false;\n\n if (typeof plikAudio === 'undefined') {\n $this.find('source').each(function() {\n plikAudio = $(this).attr('src');\n if (typeof plikAudio !== 'undefined' && czyMoznaOdtworzycTyp(plikAudio)) {\n czyWsparcie = true;\n return false;\n }\n });\n } else if (czyMoznaOdtworzycTyp(plikAudio)) czyWsparcie = true;\n\n 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>'),\n elementAudio = czyWsparcie ? odtwarzacz.find('audio') : odtwarzacz.find('embed'),\n elementAudio = elementAudio.get(0);\n\n if (czyWsparcie) {\n odtwarzacz.find('audio').css({\n 'width': 0,\n 'height': 0,\n 'visibility': 'hidden'\n });\n 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>');\n\n var pasek = odtwarzacz.find('.' + klasyCSS.pasek),\n pasekOdtworzony = odtwarzacz.find('.' + klasyCSS.pasekOdtworzony),\n pasekZaladowany = odtwarzacz.find('.' + klasyCSS.pasekZaladowany),\n czasBiezacy = odtwarzacz.find('.' + klasyCSS.czasBiezacy),\n czasCalkowity = odtwarzacz.find('.' + klasyCSS.czasCalkowity),\n przyciskGlosnosci = odtwarzacz.find('.' + klasyCSS.przyciskGlosnosci),\n regulacjaGlosnosci = odtwarzacz.find('.' + klasyCSS.regulacjaGlosnosci + ' > div'),\n domyslnaGlosnosc = 0,\n ustawBiezacyCzas = function(e) {\n prawdziweZdarzenie = czyDotyk ? e.originalEvent.touches[0] : e;\n elementAudio.currentTime = Math.round((elementAudio.duration * (prawdziweZdarzenie.pageX - pasek.offset().left)) \/ pasek.width());\n },\n ustawGlosnosc = function(e) {\n prawdziweZdarzenie = czyDotyk ? e.originalEvent.touches[0] : e;\n elementAudio.volume = Math.abs((prawdziweZdarzenie.pageX - regulacjaGlosnosci.offset().left) \/ regulacjaGlosnosci.width());\n },\n aktualizujPasekZaladowany = setInterval(function() {\n if (elementAudio.buffered.length > 0) {\n pasekZaladowany.width((elementAudio.buffered.end(0) \/ elementAudio.duration) * 100 + '%');\n if (elementAudio.buffered.end(0) >= elementAudio.duration)\n clearInterval(aktualizujPasekZaladowany);\n }\n }, 100);\n\n var testDomyslnejGlosnosci = elementAudio.volume,\n testowaGlosnosc = elementAudio.volume = 0.111;\n if (Math.round(elementAudio.volume * 1000) \/ 1000 == testowaGlosnosc) elementAudio.volume = testDomyslnejGlosnosci;\n else odtwarzacz.addClass(klasyCSS.brakGlosnosci);\n\n czasCalkowity.html('…');\n czasBiezacy.text(sekundyNaCzas(0));\n\n elementAudio.addEventListener('loadeddata', function() {\n czasCalkowity.text(sekundyNaCzas(elementAudio.duration));\n regulacjaGlosnosci.find('div').width(elementAudio.volume * 100 + '%');\n domyslnaGlosnosc = elementAudio.volume;\n });\n\n elementAudio.addEventListener('timeupdate', function() {\n czasBiezacy.text(sekundyNaCzas(elementAudio.currentTime));\n pasekOdtworzony.width((elementAudio.currentTime \/ elementAudio.duration) * 100 + '%');\n });\n\n elementAudio.addEventListener('volumechange', function() {\n regulacjaGlosnosci.find('div').width(elementAudio.volume * 100 + '%');\n if (elementAudio.volume > 0 && odtwarzacz.hasClass(klasyCSS.wycisz)) odtwarzacz.removeClass(klasyCSS.wycisz);\n if (elementAudio.volume <= 0 && !odtwarzacz.hasClass(klasyCSS.wycisz)) odtwarzacz.addClass(klasyCSS.wycisz);\n });\n\n elementAudio.addEventListener('ended', function() {\n odtwarzacz.removeClass(klasyCSS.odtwarza);\n });\n\n pasek.on(zdarzenieStart, function(e) {\n ustawBiezacyCzas(e);\n pasek.on(zdarzenieRuch, function(e) {\n ustawBiezacyCzas(e);\n });\n })\n .on(zdarzenieAnulowanie, function() {\n pasek.unbind(zdarzenieRuch);\n });\n\n przyciskGlosnosci.on('click', function() {\n if (odtwarzacz.hasClass(klasyCSS.wycisz)) {\n odtwarzacz.removeClass(klasyCSS.wycisz);\n elementAudio.volume = domyslnaGlosnosc;\n } else {\n odtwarzacz.addClass(klasyCSS.wycisz);\n domyslnaGlosnosc = elementAudio.volume;\n elementAudio.volume = 0;\n }\n return false;\n });\n\n regulacjaGlosnosci.on(zdarzenieStart, function(e) {\n ustawGlosnosc(e);\n regulacjaGlosnosci.on(zdarzenieRuch, function(e) {\n ustawGlosnosc(e);\n });\n })\n .on(zdarzenieAnulowanie, function() {\n regulacjaGlosnosci.unbind(zdarzenieRuch);\n });\n } else odtwarzacz.addClass(klasyCSS.mini);\n\n if (czyAutoOdtwarzanie) odtwarzacz.addClass(klasyCSS.odtwarza);\n\n odtwarzacz.find('.' + klasyCSS.odtworzPauza).on('click', function() {\n if (odtwarzacz.hasClass(klasyCSS.odtwarza)) {\n $(this).attr('title', parametry.tekstOdtworz).find('a').html(parametry.tekstOdtworz);\n odtwarzacz.removeClass(klasyCSS.odtwarza);\n czyWsparcie ? elementAudio.pause() : elementAudio.Stop();\n } else {\n $(this).attr('title', parametry.tekstPauza).find('a').html(parametry.tekstPauza);\n odtwarzacz.addClass(klasyCSS.odtwarza);\n czyWsparcie ? elementAudio.play() : elementAudio.Play();\n\n \/\/ Pauzowanie innych element\u00f3w audio\n var wszystkieAudio = $('audio').not(elementAudio);\n wszystkieAudio.each(function(index, inneAudio) {\n if (!inneAudio.paused) {\n inneAudio.pause();\n $(inneAudio).closest('.' + parametry.przedrostekKlasy).removeClass(klasyCSS.odtwarza);\n }\n });\n }\n return false;\n });\n\n $this.replaceWith(odtwarzacz);\n });\n return this;\n };\n})(jQuery, window, document);\n\njQuery(function() {\n jQuery('audio').odtwarzaczAudio();\n});\n\nconsole.log(\"jestem tutaj\");\n<\/code><\/pre>\n\n\n\nninja-audio-player.css<\/h2>\n\n\n\n\n.odtwarzaczAudio {\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n margin: 0;\n width: 100%;\n padding: 7px 10px;\n align-items: center;\n border: none;\n border-radius: 16px;\n background: #000;\n box-shadow: rgb(255 255 255 \/ 18%) 0px 1px 4px;\n}\n\n.odtwarzaczAudio a:hover, .odtwarzaczAudio a {\n text-decoration: none;\n box-shadow: none!important;\n -webkit-box-shadow:none!important;\n}\n\n.odtwarzaczAudio-odtworzpauza {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n cursor: pointer;\n transition: all .2s ease-in-out;\n}\n\n.odtwarzaczAudio:not(.odtwarzaczAudio-odtwarza) .odtwarzaczAudio-odtworzpauza {\n background: rgba(91, 130, 255, 0);\n border: 1px solid #d6382e;\n}\n\n.odtwarzaczAudio:not(.odtwarzaczAudio-odtwarza) .odtwarzaczAudio-odtworzpauza:hover {\n background: rgba(91, 130, 255, 0.1);\n}\n\n.odtwarzaczAudio-odtwarza .odtwarzaczAudio-odtworzpauza {\n background: rgba(253, 79, 26, 0);\n border: 1px solid #d6382e;\n}\n\n.odtwarzaczAudio-odtwarza .odtwarzaczAudio-odtworzpauza:hover {\n background: rgba(235, 79, 26, 0.1);\n}\n\n.odtwarzaczAudio:not(.odtwarzaczAudio-odtwarza) .odtwarzaczAudio-odtworzpauza a {\n content: '';\n justify-content: center;\n width: 0;\n height: 0;\n margin-left: 2px;\n border-top: 5px solid transparent;\n border-right: none;\n border-bottom: 5px solid transparent;\n border-left: 10px solid #d6382e;\n}\n\n.odtwarzaczAudio-odtwarza .odtwarzaczAudio-odtworzpauza a {\n content: '';\n display: flex;\n justify-content: space-between;\n width: 12px;\n height: 14px;\n}\n\n.odtwarzaczAudio-odtwarza .odtwarzaczAudio-odtworzpauza a::before, .odtwarzaczAudio-odtwarza .odtwarzaczAudio-odtworzpauza a::after {\n content: '';\n width: 4px;\n height: 14px;\n background-color: #d6382e;\n}\n\n.odtwarzaczAudio-czas {\n display: flex;\n width: 40px;\n justify-content:center;\n font-size: 12px;\n color: rgba(51, 51 ,51, .6)\n}\n\n.odtwarzaczAudio-czas-biezacy {\n margin-left: 24px;\n}\n\n.odtwarzaczAudio-czas-calkowity {\n margin-right: 24px;\n}\n\n.odtwarzaczAudio-pasek {\n position: relative;\n display: flex;\n margin: 0 12px;\n height: 12px;\n flex-basis: 0;\n flex-grow: 1;\n cursor: pointer;\n}\n\n.odtwarzaczAudio-pasek::before {\n content: '';\n position: absolute;\n top: 5px;\n width: 100%;\n height: 2px;\n background-color: #DDE2E6;\n}\n\n.odtwarzaczAudio-pasek > div {\n position: absolute;\n left: 0;\n top: 5px;\n}\n\n.odtwarzaczAudio-pasek-zaladowany {\n z-index: 1;\n height: 2px;\n background: #BEC8D2;\n}\n\n.odtwarzaczAudio-pasek-odtworzony {\n flex-direction: row-reverse;\n z-index: 2;\n height: 2px;\n background: #d6382e;\n}\n\n.odtwarzaczAudio-pasek-odtworzony::after {\n display: flex;\n position: absolute;\n content: '';\n box-sizing: border-box;\n top: -5px;\n right: -1px;\n margin-right: -5px;\n width: 12px;\n height: 12px;\n background-color: #fff;\n border-radius: 6px;\n}\n\n.odtwarzaczAudio:not(.odtwarzaczAudio-odtwarza) .odtwarzaczAudio-pasek-odtworzony::after {\n border: 2px solid #BEC8D2;\n}\n\n.odtwarzaczAudio-odtwarza .odtwarzaczAudio-pasek-odtworzony::after {\n border: 2px solid #d6382e;\n}\n\n.odtwarzaczAudio-glosnosc {\n display: flex;\n align-items: center;\n}\n\n.odtwarzaczAudio-przycisk-glosnosci {\n display: flex;\n align-items: center;\n width: 24px;\n height: 24px;\n cursor: pointer;\n}\n\n.odtwarzaczAudio-przycisk-glosnosci a {\n display: flex;\n width: 6px;\n height: 8px;\n background-color: #9A9FB0;\n position: relative;\n}\n\n.odtwarzaczAudio-przycisk-glosnosci a:before, .odtwarzaczAudio-przycisk-glosnosci a:after {\n content: '';\n position: absolute;\n}\n\n.odtwarzaczAudio-przycisk-glosnosci a:before {\n width: 0;\n height: 0;\n border-top: 8px solid transparent;\n border-right: 9px solid #9A9FB0;\n border-bottom: 8px solid transparent;\n border-left: none;\n top: -4px;\n}\n\n.odtwarzaczAudio:not(.odtwarzaczAudio-wycisz) .odtwarzaczAudio-przycisk-glosnosci a:after {\n left: 10px;\n top: 0px;\n width: 6px;\n height: 6px;\n border: 6px double #9A9FB0;\n border-width: 6px 6px 0 0;\n border-radius: 0 12px 0 0;\n transform: rotate(45deg);\n}\n\n.odtwarzaczAudio-wycisz .odtwarzaczAudio-przycisk-glosnosci a {\n background-color: #d6382e;\n}\n\n.odtwarzaczAudio-wycisz .odtwarzaczAudio-przycisk-glosnosci a:before {\n border-right: 9px solid #d6382e;\n}\n\n.odtwarzaczAudio-regulacja-glosnosci {\n display: flex;\n align-items: center;\n margin-left: 8px;\n}\n\n.odtwarzaczAudio-regulacja-glosnosci > div {\n position: relative;\n display: flex;\n width: 60px;\n height: 2px;\n cursor: pointer;\n background-color: #BEC8D2;\n}\n\n.odtwarzaczAudio-regulacja-glosnosci div div {\n position: absolute;\n top: 0;\n left: 0;\n height: 2px;\n background-color: #d6382e;\n}\n\n\/* responsive | you can change the max-width value to match your theme *\/\n\n@media screen and (max-width: 679px) {\n .odtwarzaczAudio-regulacja-glosnosci {\n display: none;\n }\n}\n\n.wp-block-audio audio {\n width: unset!important;\n min-width: unset!important;\n}\n\n.odtwarzaczAudio-czas-biezacy, .odtwarzaczAudio-czas-calkowity {\n display: none;\n}\n<\/code><\/pre>\n\n\n\nninja-audio-player<\/a>Pobierz<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"Poznaj wtyczk\u0119 Ninja Audio Player \u2013 idealne rozwi\u0105zanie dla ka\u017cdego u\u017cytkownika WordPress, kt\u00f3ry chce doda\u0107 stylizowany odtwarzacz audio do swojej strony. Przeczytaj wi\u0119cej, aby dowiedzie\u0107 si\u0119, jak zainstalowa\u0107 i korzysta\u0107 z tej wtyczki!<\/p>\n","protected":false},"author":1,"featured_media":731,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[259],"tags":[287,25,30,286,32,60,289,288,13,61],"class_list":["post-710","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wtyczki-ninja","tag-audio-player","tag-css","tag-javascript","tag-ninja-audio-player","tag-php","tag-plugin","tag-responsywny-odtwarzacz","tag-stylizowany-odtwarzacz","tag-wordpress","tag-wtyczka"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/comments?post=710"}],"version-history":[{"count":3,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/710\/revisions"}],"predecessor-version":[{"id":768,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/710\/revisions\/768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/731"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}