AllaTurkaa

HTML

<div id="m9840-p" style="position:relative; width:650px; height:115px; background:#08090b; border:2px solid #1a1c22; border-radius:22px; display:flex; align-items:center; padding:0 25px; color:#fff; font-family:'Poppins', sans-serif; overflow:hidden; box-sizing:border-box;">  <div style="position:relative; min-width:75px; width:75px; height:75px; background:#000; border:1px solid #7c3aed; border-radius:15px; overflow:hidden; z-index:5;">    <img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u7TgZRYSsllqOic-MnA180fOzS3l08jPwhp3RzqLf9nxcz9XTqoE9jrnG8y9UdJi8CTlwlHUGkRaiYrxOsZAHZ-MCrxqYqiffh_uOmUrDrqBYqLv2qtLgwiQ=s0-d" style="width:100%; height:100%; object-fit:cover;">  </div>    <div style="flex:1; margin-left:20px; margin-right:85px; z-index:5;">    <div style="display:flex; align-items:center; gap:8px; margin-bottom:5px;">        <div style="font-size:18px; font-weight:800; font-family:'Orbitron'; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">Dost Yurdu Radyo</div>        <div style="font-size:8px; color:#0ea5e9; font-weight:800; border:1px solid #0ea5e944; padding:1px 6px; border-radius:4px;">LIVE/20</div>    </div>    <div style="position:relative; width:100%; height:4px; background:rgba(255,255,255,0.05); border-radius:10px;">        <input type="range" id="m9840-v" min="0" max="1" step="0.01" value="1" style="position:absolute; top:-8px; left:0; width:100%; height:20px; appearance:none; background:transparent; z-index:10; cursor:pointer;">        <div id="m9840-bar" style="position:absolute; top:0; left:0; height:100%; width:100%; background:linear-gradient(90deg, #7c3aed, #0ea5e9); border-radius:10px;"></div>    </div>  </div>
  <div style="position:absolute; right:25px; top:20px; z-index:10;">    <button id="m9840-btn" style="width:65px; height:65px; background:linear-gradient(135deg, #7c3aed, #0ea5e9) !important; border:none; border-radius:50%; cursor:pointer; font-size:26px; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 25px #7c3aed55; transition:0.3s;">►</button>  </div>
  <div id="visualizer-bg" style="position:absolute; bottom:0; left:0; width:100%; height:35px; display:flex; align-items:flex-end; gap:2px; opacity:0.1; pointer-events:none;">    </div>
  <style>    @keyframes m9840-a { 0%, 100% { height: 10%; } 50% { height: 100%; } }    .m9840-b { flex:1; background:#7c3aed; height:10%; animation: m9840-a 0.5s infinite ease-in-out; animation-play-state: paused; }    .playing .m9840-b { animation-play-state: running !important; }    #m9840-v::-webkit-slider-thumb { appearance:none; width:16px; height:16px; background:linear-gradient(135deg, #7c3aed, #0ea5e9); border:2px solid #fff; border-radius:50%; }  </style></div>
<script>(function(){  var streamUrl = "https://eu1.fastcast4u.com/proxy/qpnslltp?mp=/1";  var aud = new Audio();  aud.crossOrigin = "anonymous";  var btn = document.getElementById('m9840-btn');  var vol = document.getElementById('m9840-v');  var bar = document.getElementById('m9840-bar');  var pnl = document.getElementById('m9840-p');  var viz = document.getElementById('visualizer-bg');
  // Barları oluştur (Görsel için)  for(var i=0; i<50; i++) {    var b = document.createElement('div');    b.className = 'm9840-b';    b.style.animationDuration = (0.3 + Math.random() * 0.5) + 's';    viz.appendChild(b);  }
  // RADYOYU BAŞLATMA FONKSİYONU  function initRadio() {    if (aud.paused) {      aud.src = streamUrl;      aud.volume = vol.value;      aud.play().then(function() {        btn.innerHTML = "❚❚";        pnl.classList.add("playing");        // Bir kez çalıştıktan sonra dinleyicileri kaldır (Performans için)        document.removeEventListener('click', initRadio);        document.removeEventListener('scroll', initRadio);        document.removeEventListener('touchstart', initRadio);      }).catch(function(e) {        console.log("Oynatma denemesi başarısız:", e);      });    }  }
  // TARAYICIYI KANDIRAN TETİKLEYİCİLER  // Kullanıcı sayfada tıkladığında, kaydırdığında veya ekrana dokunduğunda başlatır  document.addEventListener('click', initRadio);  document.addEventListener('scroll', initRadio);  document.addEventListener('touchstart', initRadio);
  // MANUEL BUTON KONTROLÜ  btn.onclick = function(e) {    e.stopPropagation(); // initRadio'nun tekrar tetiklenmesini engeller    if (aud.paused) {      aud.src = streamUrl;      aud.volume = vol.value;      aud.play();      btn.innerHTML = "❚❚";      pnl.classList.add("playing");    } else {      aud.pause();      aud.src = "";      btn.innerHTML = "►";      pnl.classList.remove("playing");    }  };
  vol.oninput = function() {    aud.volume = this.value;    bar.style.width = (this.value * 100) + "%";  };})();</script>