Now Playing Script and Who's Listening

[strawbs]

I'm wondering if anyone can help out
Looking for a now playing script for

https://streaming.live365.com/a50378

Now live365 has an embeddable script but I don't wish to use there's as there logo's on every script they have? I've asked ai but we all know how that gets things wrong

i have this code

// Now Playing (main content) — no last played
async function fetchNowPlayingMain() {
  try {
    const res = await fetch("https://api.live365.com/station/a50378");
    const data = await res.json();
    const np = data.now_playing;

    document.getElementById("np-art").src = np.art || "placeholder.png";
    document.getElementById("np-title").textContent = np.title || "Unknown Title";
    document.getElementById("np-artist").textContent = np.artist || "Unknown Artist";
  } catch (err) {
    console.error("Now Playing fetch error:", err);
    document.getElementById("np-title").textContent = "Error loading track";
    document.getElementById("np-artist").textContent = "";
  }
}
fetchNowPlayingMain();
setInterval(fetchNowPlayingMain, 30000);

now i'm building a project i have Now Playing
but underneath says Error Loading Track See The Html

<!-- Now Playing -->
      <div class="card" id="nowPlaying">
        <h3>Now Playing</h3>
        <div id="now-playing-box">
          <img id="np-art" src="placeholder.png" alt="Album Art">
          <div id="np-text">
            <div id="np-title">Loading...</div>
            <div id="np-artist"></div>
          </div>
        </div>
      </div>

also would anyone know where i can get a Who's Listening Script
That Works With My Above Stream i have This

<!-- Updated Who's Listening -->
  <div class="card sidebar-section">
    <h4>Who's listening</h4>
    <div id="whoListening">
      <div>Total listeners: <span id="listenerTotal">—</span></div>
      <div>Top locations:</div>
      <ul id="listenerLocations" style="color:var(--muted)">
        <li>Loading…</li>
      </ul>
    </div>
  </div>

script

// Who's Listening (auto from CSV)
async function fetchWhoListening() {
  try {
    const res = await fetch("/test1/real_time_sessions.csv");
    const csvText = await res.text();

    const rows = csvText.trim().split("\n").map(r => r.split(","));
    const headers = rows[0];
    const dataRows = rows.slice(1);

    const countryIdx = headers.indexOf("country");
    const cityIdx = headers.indexOf("city");
    const countIdx = headers.indexOf("active_session_count");

    let total = 0;
    const locations = {};

    dataRows.forEach(r => {
      const country = r[countryIdx];
      const city = r[cityIdx];
      const count = parseInt(r[countIdx] || "0", 10);
      total += count;

      const key = `${country} (${city})`;
      locations[key] = (locations[key] || 0) + count;
    });

    document.getElementById("listenerTotal").textContent = total;

    const top = Object.entries(locations)
      .sort((a,b) => b[1] - a[1])
      .slice(0,5);

    const ul = document.getElementById("listenerLocations");
    ul.innerHTML = "";
    top.forEach(([loc, count]) => {
      const li = document.createElement("li");
      li.textContent = `${loc} — ${count}`;
      ul.appendChild(li);
    });

  } catch (err) {
    console.error("Error loading Who's Listening CSV:", err);
  }
}
fetchWhoListening();
setInterval(fetchWhoListening, 60000);

// Accessibility: stop audio when navigating away
window.addEventListener('pagehide', () => {
  audio.pause();
  if (playBtn) playBtn.textContent = 'Play';
});