DanPen Radio Player<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n \/* \u041f\u044a\u043b\u043d\u043e\u0435\u043a\u0440\u0430\u043d\u0435\u043d \u0444\u043e\u043d \u0441 \u0442\u044a\u043c\u043d\u0430 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u0430 \u0430\u0442\u043c\u043e\u0441\u0444\u0435\u0440\u0430 *\/\n body {\n min-height: 100vh;\n background: radial-gradient(circle at 30% 20%, #0a0c14 0%, #020304 100%);\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Helvetica Neue', sans-serif;\n padding: 1rem;\n }\n\n \/* \u041e\u0441\u043d\u043e\u0432\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 - \u0437\u0430\u0435\u043c\u0430 \u0446\u044f\u043b\u0430\u0442\u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u043d\u043e \u0441 \u0435\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u0438 \u0432\u044a\u0442\u0440\u0435\u0448\u043d\u0438 \u043e\u0442\u0441\u0442\u044a\u043f\u0438 *\/\n .danpen-radio-player {\n width: 100%;\n max-width: 100%;\n background: rgba(8, 10, 16, 0.65);\n backdrop-filter: blur(16px);\n border-radius: 2.5rem;\n border: 1px solid rgba(255, 255, 255, 0.08);\n padding: 2.5rem 1.8rem;\n transition: all 0.2s ease;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\n }\n\n \/* \u041b\u043e\u0433\u043e \u0438 \u0437\u0430\u0433\u043b\u0430\u0432\u0438\u0435 \u2014 \u043f\u043e-\u0433\u043e\u043b\u044f\u043c\u043e \u0438 \u0434\u043e\u0431\u0440\u0435 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0430\u043d\u043e *\/\n .station-brand {\n text-align: center;\n margin-bottom: 2.5rem;\n }\n\n .radio-name {\n font-size: 2.8rem;\n font-weight: 600;\n letter-spacing: -1px;\n background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n margin-bottom: 0.5rem;\n }\n\n .radio-tag {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 3px;\n color: #8e98b9;\n font-weight: 400;\n }\n\n \/* \u0426\u0435\u043d\u0442\u0440\u0438\u0440\u0430\u043d\u0430 \u0441\u0435\u043a\u0446\u0438\u044f \u0437\u0430 \u043f\u043b\u0435\u0439\u044a\u0440 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0442\u0435 \u2014 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438 \u0440\u0430\u0437\u0441\u0442\u043e\u044f\u043d\u0438\u044f *\/\n .player-controls {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2.2rem;\n }\n\n \/* \u041f\u043b\u0435\u0439\/\u041f\u0430\u0443\u0437\u0430 \u0431\u0443\u0442\u043e\u043d \u2014 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d \u0437\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d *\/\n .play-pause-btn {\n background: rgba(30, 34, 48, 0.9);\n width: 130px;\n height: 130px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1.5px solid rgba(255, 255, 255, 0.25);\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);\n }\n\n .play-pause-btn:hover {\n transform: scale(1.02);\n background: rgba(45, 50, 70, 0.95);\n border-color: rgba(255, 255, 255, 0.45);\n }\n\n .play-pause-btn:active {\n transform: scale(0.97);\n }\n\n \/* \u041f\u043e-\u0433\u043e\u043b\u0435\u043c\u0438 \u0438\u043a\u043e\u043d\u0438 \u0432 \u0431\u0443\u0442\u043e\u043d\u0430 *\/\n .play-icon, .pause-icon {\n width: 54px;\n height: 54px;\n fill: none;\n stroke: #ffffff;\n stroke-width: 1.8;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n \/* \u041a\u043e\u043d\u0442\u0440\u043e\u043b \u043d\u0430 \u0437\u0432\u0443\u043a\u0430 \u2014 \u0443\u0433\u043e\u043b\u0435\u043c\u0435\u043d \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u043d\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u0435\u043d *\/\n .volume-control {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 18px;\n background: rgba(0, 0, 0, 0.5);\n padding: 0.7rem 1.8rem;\n border-radius: 60px;\n width: auto;\n min-width: 220px;\n margin: 0 auto;\n backdrop-filter: blur(4px);\n }\n\n .volume-icon {\n width: 24px;\n height: 24px;\n fill: none;\n stroke: #cdd9ff;\n stroke-width: 1.8;\n }\n\n \/* \u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0437\u0430 \u0437\u0432\u0443\u043a \u2014 \u043f\u043e-\u0448\u0438\u0440\u043e\u043a \u0438 \u043b\u0435\u0441\u0435\u043d \u0437\u0430 \u0434\u043e\u043a\u043e\u0441\u0432\u0430\u043d\u0435 *\/\n input[type=\"range\"] {\n width: 180px;\n height: 4px;\n -webkit-appearance: none;\n background: rgba(200, 210, 255, 0.35);\n border-radius: 10px;\n outline: none;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: #e0eaff;\n cursor: pointer;\n border: none;\n box-shadow: 0 0 6px rgba(255,255,200,0.6);\n }\n\n \/* \u0421\u0442\u0430\u0442\u0443\u0441 \u0440\u0435\u0434 \u2014 \u0434\u043e\u043b\u0443, \u043d\u043e \u0435\u043b\u0435\u0433\u0430\u043d\u0442\u0435\u043d *\/\n .stream-status {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n margin-top: 2rem;\n font-size: 0.8rem;\n font-weight: 450;\n color: #8e99c2;\n border-top: 0.5px solid rgba(255,255,255,0.12);\n padding-top: 1.6rem;\n }\n\n .status-led {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #5f6c9e;\n transition: all 0.2s;\n }\n\n .status-led.active {\n background-color: #6affb2;\n box-shadow: 0 0 10px #5effb0;\n }\n\n .status-led.buffering {\n background-color: #ffd966;\n }\n\n \/* \u0421\u043a\u0440\u0438\u0432\u0430\u043d\u0435 \u043d\u0430 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0438 *\/\n .hidden {\n display: none;\n }\n\n \/* \u0421\u043f\u0435\u0446\u0438\u0430\u043b\u043d\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d: \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u043d\u043e \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043d\u0435 \u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0430\u0442\u0430 *\/\n @media (max-width: 600px) {\n body {\n padding: 0.75rem;\n }\n .danpen-radio-player {\n padding: 2rem 1.5rem;\n border-radius: 2rem;\n }\n .radio-name {\n font-size: 2.4rem;\n }\n .play-pause-btn {\n width: 110px;\n height: 110px;\n }\n .play-icon, .pause-icon {\n width: 46px;\n height: 46px;\n }\n .volume-control {\n min-width: 200px;\n padding: 0.6rem 1.5rem;\n }\n input[type=\"range\"] {\n width: 150px;\n }\n }\n\n \/* \u0417\u0430 \u043c\u043d\u043e\u0433\u043e \u043c\u0430\u043b\u043a\u0438 \u0435\u043a\u0440\u0430\u043d\u0438 (iPhone SE \u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u0438) \u0437\u0430\u043f\u0430\u0437\u0432\u0430\u043c\u0435 \u0433\u044a\u0432\u043a\u0430\u0432\u043e\u0441\u0442 *\/\n @media (max-width: 420px) {\n .danpen-radio-player {\n padding: 1.6rem 1.2rem;\n }\n .radio-name {\n font-size: 2rem;\n }\n .play-pause-btn {\n width: 95px;\n height: 95px;\n }\n .play-icon, .pause-icon {\n width: 40px;\n height: 40px;\n }\n .volume-control {\n gap: 12px;\n min-width: 170px;\n }\n input[type=\"range\"] {\n width: 120px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"danpen-radio-player\">\n <div class=\"station-brand\">\n <div class=\"radio-name\">DanPen Radio<\/div>\n <div class=\"radio-tag\">techno \u00b7 house<\/div>\n <\/div>\n\n <div class=\"player-controls\">\n \n <div class=\"play-pause-btn\" id=\"playPauseBtn\">\n <svg class=\"play-icon\" id=\"playIconSvg\" viewBox=\"0 0 24 24\">\n <polygon points=\"5 3 19 12 5 21 5 3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\n <\/svg>\n <svg class=\"pause-icon hidden\" id=\"pauseIconSvg\" viewBox=\"0 0 24 24\">\n <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\n <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\n <\/svg>\n <\/div>\n\n \n <div class=\"volume-control\">\n <svg class=\"volume-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M3 9v6h4l5 4V5L7 9H3z\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\"\/>\n <path d=\"M16.5 8.5A5 5 0 0 1 16.5 15.5\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\n <path d=\"M19.5 5.5a9 9 0 0 1 0 13\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\n <\/svg>\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\n <\/div>\n <\/div>\n\n <div class=\"stream-status\">\n <div class=\"status-led\" id=\"statusLed\"><\/div>\n <span id=\"statusText\">ready<\/span>\n <\/div>\n<\/div>\n\n<script>\n (function() {\n \/\/ DanPen Radio stream URL\n const STREAM_URL = \"https:\/\/server.danpenradio.net\/listen\/danpen_radio\/radio.mp3\";\n \n \/\/ DOM elements\n const playPauseBtn = document.getElementById('playPauseBtn');\n const playIcon = document.getElementById('playIconSvg');\n const pauseIcon = document.getElementById('pauseIconSvg');\n const volumeSlider = document.getElementById('volumeSlider');\n const statusLed = document.getElementById('statusLed');\n const statusText = document.getElementById('statusText');\n \n let audio = new Audio();\n audio.preload = 'auto';\n audio.crossOrigin = 'anonymous';\n audio.src = STREAM_URL;\n \n let isPlaying = false;\n let reconnectAttempts = 0;\n let reconnectTimeout = null;\n \n function setStatus(state, isError = false) {\n if (state === 'playing') {\n statusLed.classList.add('active');\n statusLed.classList.remove('buffering');\n statusText.innerText = 'live';\n } else if (state === 'buffering') {\n statusLed.classList.add('buffering');\n statusLed.classList.remove('active');\n statusText.innerText = 'loading';\n } else if (state === 'error') {\n statusLed.classList.remove('active', 'buffering');\n statusText.innerText = 'error';\n if (isError) {\n statusLed.style.backgroundColor = \"#ff7b72\";\n setTimeout(() => {\n if (!isPlaying) statusLed.style.backgroundColor = \"#5f6c9e\";\n }, 1500);\n }\n } else {\n statusLed.classList.remove('active', 'buffering');\n statusText.innerText = 'paused';\n statusLed.style.backgroundColor = \"#5f6c9e\";\n }\n }\n \n function toggleIcons(playing) {\n if (playing) {\n playIcon.classList.add('hidden');\n pauseIcon.classList.remove('hidden');\n } else {\n playIcon.classList.remove('hidden');\n pauseIcon.classList.add('hidden');\n }\n }\n \n async function playStream() {\n try {\n await audio.play();\n isPlaying = true;\n setStatus('playing');\n toggleIcons(true);\n reconnectAttempts = 0;\n } catch (err) {\n console.error(\"Play error:\", err);\n setStatus('error', true);\n isPlaying = false;\n toggleIcons(false);\n setTimeout(() => {\n if (!isPlaying && audio) audio.load();\n }, 2000);\n }\n }\n \n function pauseStream() {\n audio.pause();\n isPlaying = false;\n setStatus('paused');\n toggleIcons(false);\n }\n \n function togglePlayPause() {\n if (isPlaying) {\n pauseStream();\n } else {\n playStream();\n }\n }\n \n function setVolume(value) {\n audio.volume = Math.min(1, Math.max(0, parseFloat(value)));\n volumeSlider.value = audio.volume;\n }\n \n function bindAudioEvents() {\n audio.addEventListener('playing', () => {\n setStatus('playing');\n isPlaying = true;\n toggleIcons(true);\n });\n \n audio.addEventListener('pause', () => {\n if (!audio.paused) return;\n if (isPlaying) {\n isPlaying = false;\n toggleIcons(false);\n setStatus('paused');\n }\n });\n \n audio.addEventListener('waiting', () => {\n if (isPlaying) setStatus('buffering');\n });\n \n audio.addEventListener('error', (e) => {\n console.warn(\"Stream error\");\n setStatus('error', true);\n if (isPlaying) {\n isPlaying = false;\n toggleIcons(false);\n if (reconnectAttempts < 3) {\n reconnectAttempts++;\n reconnectTimeout = setTimeout(() => {\n if (!isPlaying && audio) {\n audio.load();\n setTimeout(() => playStream(), 500);\n }\n }, 4000);\n }\n }\n });\n }\n \n function init() {\n bindAudioEvents();\n setVolume(0.8);\n toggleIcons(false);\n setStatus('paused');\n audio.load();\n \n volumeSlider.addEventListener('input', (e) => {\n setVolume(e.target.value);\n });\n \n playPauseBtn.addEventListener('click', togglePlayPause);\n }\n \n window.addEventListener('beforeunload', () => {\n if (audio) {\n audio.pause();\n audio.src = '';\n }\n if (reconnectTimeout) clearTimeout(reconnectTimeout);\n });\n \n init();\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>DanPen Radio Player DanPen Radio techno \u00b7 house ready<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"plain-container","ast-site-content-layout":"default","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/danpenradio.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":32,"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":203,"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions\/203"}],"wp:attachment":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

<\/div>\n\n\n\n\n\n\n \n \n DanPen Radio Player<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n \/* \u041f\u044a\u043b\u043d\u043e\u0435\u043a\u0440\u0430\u043d\u0435\u043d \u0444\u043e\u043d \u0441 \u0442\u044a\u043c\u043d\u0430 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u0430 \u0430\u0442\u043c\u043e\u0441\u0444\u0435\u0440\u0430 *\/\n body {\n min-height: 100vh;\n background: radial-gradient(circle at 30% 20%, #0a0c14 0%, #020304 100%);\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Helvetica Neue', sans-serif;\n padding: 1rem;\n }\n\n \/* \u041e\u0441\u043d\u043e\u0432\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 - \u0437\u0430\u0435\u043c\u0430 \u0446\u044f\u043b\u0430\u0442\u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u043d\u043e \u0441 \u0435\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u0438 \u0432\u044a\u0442\u0440\u0435\u0448\u043d\u0438 \u043e\u0442\u0441\u0442\u044a\u043f\u0438 *\/\n .danpen-radio-player {\n width: 100%;\n max-width: 100%;\n background: rgba(8, 10, 16, 0.65);\n backdrop-filter: blur(16px);\n border-radius: 2.5rem;\n border: 1px solid rgba(255, 255, 255, 0.08);\n padding: 2.5rem 1.8rem;\n transition: all 0.2s ease;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\n }\n\n \/* \u041b\u043e\u0433\u043e \u0438 \u0437\u0430\u0433\u043b\u0430\u0432\u0438\u0435 \u2014 \u043f\u043e-\u0433\u043e\u043b\u044f\u043c\u043e \u0438 \u0434\u043e\u0431\u0440\u0435 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0430\u043d\u043e *\/\n .station-brand {\n text-align: center;\n margin-bottom: 2.5rem;\n }\n\n .radio-name {\n font-size: 2.8rem;\n font-weight: 600;\n letter-spacing: -1px;\n background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n margin-bottom: 0.5rem;\n }\n\n .radio-tag {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 3px;\n color: #8e98b9;\n font-weight: 400;\n }\n\n \/* \u0426\u0435\u043d\u0442\u0440\u0438\u0440\u0430\u043d\u0430 \u0441\u0435\u043a\u0446\u0438\u044f \u0437\u0430 \u043f\u043b\u0435\u0439\u044a\u0440 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0442\u0435 \u2014 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438 \u0440\u0430\u0437\u0441\u0442\u043e\u044f\u043d\u0438\u044f *\/\n .player-controls {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2.2rem;\n }\n\n \/* \u041f\u043b\u0435\u0439\/\u041f\u0430\u0443\u0437\u0430 \u0431\u0443\u0442\u043e\u043d \u2014 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d \u0437\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d *\/\n .play-pause-btn {\n background: rgba(30, 34, 48, 0.9);\n width: 130px;\n height: 130px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1.5px solid rgba(255, 255, 255, 0.25);\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);\n }\n\n .play-pause-btn:hover {\n transform: scale(1.02);\n background: rgba(45, 50, 70, 0.95);\n border-color: rgba(255, 255, 255, 0.45);\n }\n\n .play-pause-btn:active {\n transform: scale(0.97);\n }\n\n \/* \u041f\u043e-\u0433\u043e\u043b\u0435\u043c\u0438 \u0438\u043a\u043e\u043d\u0438 \u0432 \u0431\u0443\u0442\u043e\u043d\u0430 *\/\n .play-icon, .pause-icon {\n width: 54px;\n height: 54px;\n fill: none;\n stroke: #ffffff;\n stroke-width: 1.8;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n \/* \u041a\u043e\u043d\u0442\u0440\u043e\u043b \u043d\u0430 \u0437\u0432\u0443\u043a\u0430 \u2014 \u0443\u0433\u043e\u043b\u0435\u043c\u0435\u043d \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u043d\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u0435\u043d *\/\n .volume-control {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 18px;\n background: rgba(0, 0, 0, 0.5);\n padding: 0.7rem 1.8rem;\n border-radius: 60px;\n width: auto;\n min-width: 220px;\n margin: 0 auto;\n backdrop-filter: blur(4px);\n }\n\n .volume-icon {\n width: 24px;\n height: 24px;\n fill: none;\n stroke: #cdd9ff;\n stroke-width: 1.8;\n }\n\n \/* \u0421\u043b\u0430\u0439\u0434\u0435\u0440 \u0437\u0430 \u0437\u0432\u0443\u043a \u2014 \u043f\u043e-\u0448\u0438\u0440\u043e\u043a \u0438 \u043b\u0435\u0441\u0435\u043d \u0437\u0430 \u0434\u043e\u043a\u043e\u0441\u0432\u0430\u043d\u0435 *\/\n input[type=\"range\"] {\n width: 180px;\n height: 4px;\n -webkit-appearance: none;\n background: rgba(200, 210, 255, 0.35);\n border-radius: 10px;\n outline: none;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: #e0eaff;\n cursor: pointer;\n border: none;\n box-shadow: 0 0 6px rgba(255,255,200,0.6);\n }\n\n \/* \u0421\u0442\u0430\u0442\u0443\u0441 \u0440\u0435\u0434 \u2014 \u0434\u043e\u043b\u0443, \u043d\u043e \u0435\u043b\u0435\u0433\u0430\u043d\u0442\u0435\u043d *\/\n .stream-status {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n margin-top: 2rem;\n font-size: 0.8rem;\n font-weight: 450;\n color: #8e99c2;\n border-top: 0.5px solid rgba(255,255,255,0.12);\n padding-top: 1.6rem;\n }\n\n .status-led {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #5f6c9e;\n transition: all 0.2s;\n }\n\n .status-led.active {\n background-color: #6affb2;\n box-shadow: 0 0 10px #5effb0;\n }\n\n .status-led.buffering {\n background-color: #ffd966;\n }\n\n \/* \u0421\u043a\u0440\u0438\u0432\u0430\u043d\u0435 \u043d\u0430 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0438 *\/\n .hidden {\n display: none;\n }\n\n \/* \u0421\u043f\u0435\u0446\u0438\u0430\u043b\u043d\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d: \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u043d\u043e \u0438\u0437\u043f\u043e\u043b\u0437\u0432\u0430\u043d\u0435 \u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0430\u0442\u0430 *\/\n @media (max-width: 600px) {\n body {\n padding: 0.75rem;\n }\n .danpen-radio-player {\n padding: 2rem 1.5rem;\n border-radius: 2rem;\n }\n .radio-name {\n font-size: 2.4rem;\n }\n .play-pause-btn {\n width: 110px;\n height: 110px;\n }\n .play-icon, .pause-icon {\n width: 46px;\n height: 46px;\n }\n .volume-control {\n min-width: 200px;\n padding: 0.6rem 1.5rem;\n }\n input[type=\"range\"] {\n width: 150px;\n }\n }\n\n \/* \u0417\u0430 \u043c\u043d\u043e\u0433\u043e \u043c\u0430\u043b\u043a\u0438 \u0435\u043a\u0440\u0430\u043d\u0438 (iPhone SE \u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u0438) \u0437\u0430\u043f\u0430\u0437\u0432\u0430\u043c\u0435 \u0433\u044a\u0432\u043a\u0430\u0432\u043e\u0441\u0442 *\/\n @media (max-width: 420px) {\n .danpen-radio-player {\n padding: 1.6rem 1.2rem;\n }\n .radio-name {\n font-size: 2rem;\n }\n .play-pause-btn {\n width: 95px;\n height: 95px;\n }\n .play-icon, .pause-icon {\n width: 40px;\n height: 40px;\n }\n .volume-control {\n gap: 12px;\n min-width: 170px;\n }\n input[type=\"range\"] {\n width: 120px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"danpen-radio-player\">\n <div class=\"station-brand\">\n <div class=\"radio-name\">DanPen Radio<\/div>\n <div class=\"radio-tag\">techno \u00b7 house<\/div>\n <\/div>\n\n <div class=\"player-controls\">\n \n <div class=\"play-pause-btn\" id=\"playPauseBtn\">\n <svg class=\"play-icon\" id=\"playIconSvg\" viewBox=\"0 0 24 24\">\n <polygon points=\"5 3 19 12 5 21 5 3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\n <\/svg>\n <svg class=\"pause-icon hidden\" id=\"pauseIconSvg\" viewBox=\"0 0 24 24\">\n <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\n <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"\/>\n <\/svg>\n <\/div>\n\n \n <div class=\"volume-control\">\n <svg class=\"volume-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M3 9v6h4l5 4V5L7 9H3z\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\"\/>\n <path d=\"M16.5 8.5A5 5 0 0 1 16.5 15.5\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\n <path d=\"M19.5 5.5a9 9 0 0 1 0 13\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\n <\/svg>\n <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\">\n <\/div>\n <\/div>\n\n <div class=\"stream-status\">\n <div class=\"status-led\" id=\"statusLed\"><\/div>\n <span id=\"statusText\">ready<\/span>\n <\/div>\n<\/div>\n\n<script>\n (function() {\n \/\/ DanPen Radio stream URL\n const STREAM_URL = \"https:\/\/server.danpenradio.net\/listen\/danpen_radio\/radio.mp3\";\n \n \/\/ DOM elements\n const playPauseBtn = document.getElementById('playPauseBtn');\n const playIcon = document.getElementById('playIconSvg');\n const pauseIcon = document.getElementById('pauseIconSvg');\n const volumeSlider = document.getElementById('volumeSlider');\n const statusLed = document.getElementById('statusLed');\n const statusText = document.getElementById('statusText');\n \n let audio = new Audio();\n audio.preload = 'auto';\n audio.crossOrigin = 'anonymous';\n audio.src = STREAM_URL;\n \n let isPlaying = false;\n let reconnectAttempts = 0;\n let reconnectTimeout = null;\n \n function setStatus(state, isError = false) {\n if (state === 'playing') {\n statusLed.classList.add('active');\n statusLed.classList.remove('buffering');\n statusText.innerText = 'live';\n } else if (state === 'buffering') {\n statusLed.classList.add('buffering');\n statusLed.classList.remove('active');\n statusText.innerText = 'loading';\n } else if (state === 'error') {\n statusLed.classList.remove('active', 'buffering');\n statusText.innerText = 'error';\n if (isError) {\n statusLed.style.backgroundColor = \"#ff7b72\";\n setTimeout(() => {\n if (!isPlaying) statusLed.style.backgroundColor = \"#5f6c9e\";\n }, 1500);\n }\n } else {\n statusLed.classList.remove('active', 'buffering');\n statusText.innerText = 'paused';\n statusLed.style.backgroundColor = \"#5f6c9e\";\n }\n }\n \n function toggleIcons(playing) {\n if (playing) {\n playIcon.classList.add('hidden');\n pauseIcon.classList.remove('hidden');\n } else {\n playIcon.classList.remove('hidden');\n pauseIcon.classList.add('hidden');\n }\n }\n \n async function playStream() {\n try {\n await audio.play();\n isPlaying = true;\n setStatus('playing');\n toggleIcons(true);\n reconnectAttempts = 0;\n } catch (err) {\n console.error(\"Play error:\", err);\n setStatus('error', true);\n isPlaying = false;\n toggleIcons(false);\n setTimeout(() => {\n if (!isPlaying && audio) audio.load();\n }, 2000);\n }\n }\n \n function pauseStream() {\n audio.pause();\n isPlaying = false;\n setStatus('paused');\n toggleIcons(false);\n }\n \n function togglePlayPause() {\n if (isPlaying) {\n pauseStream();\n } else {\n playStream();\n }\n }\n \n function setVolume(value) {\n audio.volume = Math.min(1, Math.max(0, parseFloat(value)));\n volumeSlider.value = audio.volume;\n }\n \n function bindAudioEvents() {\n audio.addEventListener('playing', () => {\n setStatus('playing');\n isPlaying = true;\n toggleIcons(true);\n });\n \n audio.addEventListener('pause', () => {\n if (!audio.paused) return;\n if (isPlaying) {\n isPlaying = false;\n toggleIcons(false);\n setStatus('paused');\n }\n });\n \n audio.addEventListener('waiting', () => {\n if (isPlaying) setStatus('buffering');\n });\n \n audio.addEventListener('error', (e) => {\n console.warn(\"Stream error\");\n setStatus('error', true);\n if (isPlaying) {\n isPlaying = false;\n toggleIcons(false);\n if (reconnectAttempts < 3) {\n reconnectAttempts++;\n reconnectTimeout = setTimeout(() => {\n if (!isPlaying && audio) {\n audio.load();\n setTimeout(() => playStream(), 500);\n }\n }, 4000);\n }\n }\n });\n }\n \n function init() {\n bindAudioEvents();\n setVolume(0.8);\n toggleIcons(false);\n setStatus('paused');\n audio.load();\n \n volumeSlider.addEventListener('input', (e) => {\n setVolume(e.target.value);\n });\n \n playPauseBtn.addEventListener('click', togglePlayPause);\n }\n \n window.addEventListener('beforeunload', () => {\n if (audio) {\n audio.pause();\n audio.src = '';\n }\n if (reconnectTimeout) clearTimeout(reconnectTimeout);\n });\n \n init();\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>DanPen Radio Player DanPen Radio techno \u00b7 house ready<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"plain-container","ast-site-content-layout":"default","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/danpenradio.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":32,"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":203,"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions\/203"}],"wp:attachment":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}