





<section id="radio">
  <div class="section-headers" style="background-image: url(/2026/images/radio.webp);">
    <h2>RadioStation</h2>
    <h4>𝕭𝖆𝖘𝖘𝖕𝖎𝖘𝖙𝖔𝖑 𝕽𝖆𝖉𝖎𝖔 𝕾𝖙𝖆𝖙𝖎𝖔𝖓</h4>
    <p>777% music, without commercials! RobotDJ-sets and live interventions! This is the sound of freedom.</p>

  </div>
  <div class="border radioplayer">

    <div class="legend-container">
      <div class="legend">
        <button id="myBtn">▶️</button>
        <div>
          <h4 id="npTitle"></h4>
          <p id="npArtist"></p>
          <audio preload="none" id="radioAudio">
          <source src="https://radio.basspistol.com/listen/basspistol/radio.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
          </audio>
        </div>
      </div>
      <div>
        <br />
        <a target="_blank" href="" id="supportButtonDelux" class="button player">🫰 Support this Artist</a>
        <br />
        <a class="button" target="_blank" href="https://radio.basspistol.com/public/basspistol">📻 Request song</a>
        <br />
        <a class="button" target="_blank" href="https://radio.basspistol.com/public/basspistol/schedule">🗓️ Schedule</a>
      </div>
    </div>
    <div id="recordPlayer">
      <img src="" id="coverArt" />
    </div>
  </div>
  <div class="section-footers"></div>

</section>
<script>

  console.log("Loading Basspistol Radio! Enjoy!");

  // Logic to fetch URL of currently playing artist

  const list = document.createDocumentFragment();
  const supportUrl = 'https://radio.basspistol.com/api/nowplaying';

  // Catch elements that need influece
  // support button
  let supportButtonDelux = document.getElementById('supportButtonDelux');

  // record player
  let coverArt = document.getElementById('coverArt');
  coverArt.classList.add("btn");

  // Title and Artist
  let npArtist = document.getElementById('npArtist');
  let npTitle = document.getElementById('npTitle');

  function timeleyManner(){
    fetch(supportUrl)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        let supportClicker = data;


        supportClicker.map(function(support) {

          // set background image in record player
          coverArt.src = `${support.now_playing.song.art}`;

          // print text

          npTitle.innerHTML = `${support.now_playing.song.title}`;

          npArtist.innerHTML = `by ${support.now_playing.song.artist}`;

          if(`${support.now_playing.song.custom_fields.support_url}` != "null") {
            supportButtonDelux.href = `${support.now_playing.song.custom_fields.support_url}` + "?ref=radio.basspistol.com" + "&title=" + `${support.now_playing.song.text}`;

          }
          else {
            supportButtonDelux.href = "https://www.urbandictionary.com/define.php?term=Anon";

          }

        });

      })
      .catch(function(error) {
        console.log(error);
      });
  }

  timeleyManner();

  setInterval(function(){
      timeleyManner();
  }, 10000)

  // player logic
  var audio = document.getElementById("radioAudio");
  var btn = document.getElementById("myBtn");

    btn.onclick = function() {
      if (audio.paused) {
        audio.play();
        btn.innerHTML = "⏸️";
        coverArt.classList.add("spinner");
        coverArt.classList.remove("stop");
      } else {
        audio.pause();
        btn.innerHTML = "▶️";
        coverArt.classList.add("stop");
      }
    };

</script>
