Radio player with now playing

Joined
Jun 14, 2018
Messages
114
Reaction score
1
hi there i'm looking for a player that has now playing the current track
now i have this code


Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Wildstyle Radio Widget</title>
  <style>
    body {
      margin: 0;
      background: #000;
      font-family: 'Arial', sans-serif;
      color: #fff;
    }

    .widget-container {
      background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
      border: 2px solid #ff0055;
      border-radius: 12px;
      padding: 15px;
      text-align: center;
      box-shadow: 0 0 12px #ff0055;
    }

    h3 {
      margin: 0;
      font-size: 18px;
      color: #ffcc00;
    }

    audio {
      width: 100%;
      margin-top: 10px;
    }

    .now-playing {
      margin-top: 10px;
      font-size: 14px;
      color: #00ffcc;
    }

    .now-playing span {
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="widget-container">
    <h3>🎧 Wildstyle Radio</h3>
    <audio id="audioPlayer" controls>
      <source src="https://streaming.live365.com/a50378" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

    <div class="now-playing" id="nowPlaying">
      Loading track...
    </div>
  </div>

  <script>
    async function fetchNowPlaying() {
      try {
        const proxyUrl = 'https://api.allorigins.win/get?url=' + encodeURIComponent('https://public.api.live365.com/station/a50378');
        const response = await fetch(proxyUrl);
        const result = await response.json();
        const data = JSON.parse(result.contents);

        const artist = data?.now_playing?.artist || "Unknown Artist";
        const title = data?.now_playing?.title || "Unknown Track";

        document.getElementById('nowPlaying').innerHTML = `🎵 <span>${title}</span> by <span>${artist}</span>`;
      } catch (error) {
        document.getElementById('nowPlaying').textContent = "Track info unavailable.";
        console.error("Error fetching track:", error);
      }
    }

    fetchNowPlaying();
    setInterval(fetchNowPlaying, 15000); // update every 15 sec
  </script>

</body>
</html>

so i've saved this as wildstyle-radio-widget.html on my server
with a iframe embedded code?
Code:
<iframe src="https://wildstyle.vip/widgets/wildstyle-radio-widget.html"
        width="100%"
        height="200"
        style="border:none;overflow:hidden;"
        scrolling="no"
        allow="autoplay"
        title="Wildstyle Radio Widget"></iframe>

but unfortunately the current track says track unavalible?
wonder if anyone could help
 
Joined
Jul 4, 2023
Messages
607
Reaction score
81
This part of the code
JavaScript:
const proxyUrl = 'https://api.allorigins.win/get?url=' + encodeURIComponent('https://public.api.live365.com/station/a50378');

generates the following link:
https://api.allorigins.win/get?url=https://public.api.live365.com/station/a50378

when you use this link, you get:
1752605507128.png


So, IMO, this might be the root of your problem.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,341
Messages
2,571,401
Members
48,793
Latest member
evajons

Latest Threads

Top