IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

HTML, CSS ve JavaScript kullanarak, örnek radyo olarak Radyo Kral Pop radyosunu ekleyip bir radyo player tasarımı yaptım. Radyo yayını arka planda çalarken, şarkı bilgilerini ekranda görüntüleyebiliyorsunuz.
Kod:
<!DOCTYPE html>

<html lang="tr">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>DJ Radyo</title>
 

  <!-- Google Fonts (Türkçe karakterler için Poppins fontu) -->

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
 

  <!-- Font Awesome (ikonlar için) -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
 

  <style>

    body, html {

      margin: 0;

      padding: 0;

      font-family: 'Poppins', sans-serif;  /* Poppins fontunu kullanalım */

      color: white;

    }
 

    /* Arka Plan Video */

    #bgVideo {

      position: fixed;

      top: 0; left: 0;

      width: 100%;

      height: 100%;

      object-fit: cover;

      z-index: -1;

    }
 

    /* Üst Menü */

    header {

      position: fixed;

      top: 0;

      width: 100%;

      background: rgba(0, 0, 0, 0.5);

      padding: 15px 0;

      text-align: center;

      z-index: 10;

    }
 

    header nav a {

      color: white;

      text-decoration: none;

      margin: 0 20px;

      font-weight: bold;

      font-size: 16px;

      transition: color 0.3s;

    }
 

    header nav a:hover {

      color: #ff0055;

    }
 

    /* Radyo Oynatıcı */

    .player {

      text-align: center;

      margin-top: 150px;

      background: rgba(0, 0, 0, 0.6);

      padding: 30px;

      border-radius: 15px;

      width: 300px;

      margin-left: auto;

      margin-right: auto;

      box-shadow: 0 0 15px rgba(255,255,255,0.2);

    }
 

    .player h1 {

      margin-bottom: 20px;

    }
 

    button {

      padding: 10px 20px;

      font-size: 16px;

      background: #ff0055;

      color: white;

      border: none;

      border-radius: 10px;

      cursor: pointer;

      transition: background 0.3s;

    }
 

    button:hover {

      background: #e6004c;

    }
 

    footer {

      position: absolute;

      bottom: 10px;

      width: 100%;

      text-align: center;

      background: rgba(0,0,0,0.4);

      padding: 10px 0;

    }
 

    .social a {

      color: #fff;

      text-decoration: none;

      margin: 0 10px;

    }
 

    .social a:hover {

      text-decoration: underline;

    }
 

    /* Şarkı adı ve sanatçı */

    #songInfo {

      color: #fff;

      font-size: 14px;

      margin-top: 20px;

    }
 

  </style>

</head>

<body>
 

  <!-- Üst Menü -->

  <header>

    <nav>

      <a href="#">Anasayfa</a>

      <a href="#">Hakkimizda</a>

      <a href="#">Iletisim</a>

    </nav>

  </header>
 

  <!-- Arka Plan Videosu -->

  <video autoplay muted loop id="bgVideo">

    <source src="https://
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
type="video/mp4">

    Tarayıcınız video öğesini desteklemiyor.

  </video>
 

  <!-- Radyo Oynatıcı -->

  <div class="player">

    <h1>🎧 Radyo Kral Pop</h1>

    <button onclick="togglePlay()">

      <i id="playIcon" class="fas fa-play"></i> <span id="playText">Oynat</span>

    </button>

    <audio id="radioStream" src="https://streaming.radionomy.com/Radio-Kral-Pop" autoplay></audio>

    <div id="songInfo">

      <span>Su anda calan sarki: <strong>Yok</strong> - <strong>Yok</strong></span>

    </div>

  </div>
 

  <!-- Alt Bilgi -->

  <footer>

    <p>Canli DJ: DJ Max</p>

    <div class="social">

      <a href="#">Instagram</a> |

      <a href="#">Twitter</a>

    </div>

  </footer>
 

  <!-- JavaScript -->

  <script>

    const radio = document.getElementById("radioStream");

    const playIcon = document.getElementById("playIcon");

    const playText = document.getElementById("playText");

    const songInfo = document.getElementById("songInfo");
 

    function togglePlay() {

      if (radio.paused) {

        radio.play();

        playIcon.className = "fas fa-pause";

        playText.innerText = "Duraklat";

      } else {

        radio.pause();

        playIcon.className = "fas fa-play";

        playText.innerText = "Oynat";

      }

    }
 

    // Şu anda çalan şarkı bilgisini almak

    radio.addEventListener('playing', function() {

      songInfo.innerHTML = "Şu anda çalan şarkı: <strong>Şarkı Adı</strong> - <strong>Sanatçı Adı</strong>";

    });

  </script>
 

</body>

</html>
iyi İfler