livetest - AlifAlif FM

				
					/**
 * Alif Alif FM – Dual Stream Side-by-Side Monitor (Standalone)
 * Node.js 18+
 */

const express = require("express");
const app = express();
const PORT = 3001;

// ===============================
// روابط
// ===============================
const STREAM_1 = "http://alifalif.ddns.net:8010/AlifRadio.mp3";
const STREAM_2 = "https://alifalifjobs.com/radio/8000/AlifAlifLive.mp3";

const ALIF_LOGO =
  "https://alifaliffm.com/wp-content/uploads/2020/03/cropped-alifalif-logo.png";
const CC_LOGO =
  "https://creative-codes.sa/wp-content/uploads/2025/10/new-logo-creative-codes-24.png";

// ===============================
app.get("/", (req, res) => {
  res.send(`
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alif Alif FM – Dual Monitor</title>

<style>
body{
  margin:0;
  background:radial-gradient(circle at top,#1a233a,#0b0f19);
  font-family:Segoe UI, Tahoma, Arial;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.app{
  width:100%;
  max-width:900px;
  padding:30px 20px;
  text-align:center;
}

.logo img{
  max-width:220px;
  margin-bottom:30px;
}

/* Layout */
.streams{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}

/* Card */
.stream{
  background:rgba(0,0,0,.25);
  border-radius:18px;
  padding:18px 16px 22px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.stream h3{
  margin:0 0 12px;
  font-size:15px;
  font-weight:500;
  opacity:.85;
}

canvas{
  width:100%;
  height:180px;
  background:#000;
  border-radius:14px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.9);
}

/* Controls */
.controls{
  margin-top:15px;
}

.play-btn{
  width:64px;
  height:64px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:linear-gradient(145deg,#f5d18d,#cfa45d);
  box-shadow:0 10px 22px rgba(240,195,122,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}

.play-btn svg{
  width:26px;
  height:26px;
  fill:#111;
}

/* Footer */
footer{
  margin-top:35px;
  opacity:.85;
}
footer img{
  max-width:150px;
}
footer a{
  font-size:12px;
  color:#ccc;
  text-decoration:none;
}
footer a:hover{
  color:#f0c37a;
}

/* Responsive */
@media (max-width:720px){
  .streams{
    grid-template-columns:1fr;
  }
}
</style>
</head>

<body>

<div class="app">

  <!-- Logo -->
  <div class="logo">
    <img decoding="async" src="${ALIF_LOGO}" alt="Alif Alif FM">
  </div>

  <!-- Streams -->
  <div class="streams">

    <!-- Stream 1 -->
    <div class="stream">
      <h3>البث الرئيسي</h3>
      <canvas id="wave1"></canvas>
      <div class="controls">
        <button class="play-btn" id="btn1">
          <svg id="icon1Play" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
          <svg id="icon1Pause" viewBox="0 0 24 24" style="display:none">
            <path d="M6 5h4v14H6zm8 0h4v14h-4z"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Stream 2 -->
    <div class="stream">
      <h3>البث البديل</h3>
      <canvas id="wave2"></canvas>
      <div class="controls">
        <button class="play-btn" id="btn2">
          <svg id="icon2Play" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
          <svg id="icon2Pause" viewBox="0 0 24 24" style="display:none">
            <path d="M6 5h4v14H6zm8 0h4v14h-4z"/>
          </svg>
        </button>
      </div>
    </div>

  </div>

  <!-- Footer -->
  <footer>
    <a href="https://creative-codes.sa" target="_blank">
      <img decoding="async" src="${CC_LOGO}" alt="Creative Codes"><br>
      made by Creative Codes
    </a>
  </footer>

</div>

<audio id="audio1" crossorigin="anonymous"></audio>
<audio id="audio2" crossorigin="anonymous"></audio>

<script>
const AudioContext = window.AudioContext || window.webkitAudioContext;
const ctx = new AudioContext();

const streams = [
  {
    audio: document.getElementById("audio1"),
    canvas: document.getElementById("wave1"),
    btn: document.getElementById("btn1"),
    playIcon: document.getElementById("icon1Play"),
    pauseIcon: document.getElementById("icon1Pause"),
    url: "${STREAM_1}",
    playing: false
  },
  {
    audio: document.getElementById("audio2"),
    canvas: document.getElementById("wave2"),
    btn: document.getElementById("btn2"),
    playIcon: document.getElementById("icon2Play"),
    pauseIcon: document.getElementById("icon2Pause"),
    url: "${STREAM_2}",
    playing: false
  }
];

streams.forEach(s => {
  s.audio.src = s.url;

  const analyser = ctx.createAnalyser();
  analyser.fftSize = 1024;
  analyser.smoothingTimeConstant = 0.88;

  const source = ctx.createMediaElementSource(s.audio);
  source.connect(analyser);
  analyser.connect(ctx.destination);

  s.analyser = analyser;
  s.data = new Uint8Array(analyser.frequencyBinCount);
  s.ctx = s.canvas.getContext("2d");

  s.btn.onclick = async () => {
    if(!s.playing){
      await ctx.resume();
      s.audio.play();
      s.playing = true;
      s.playIcon.style.display="none";
      s.pauseIcon.style.display="block";
      draw(s);
    }else{
      s.audio.pause();
      s.playing = false;
      s.playIcon.style.display="block";
      s.pauseIcon.style.display="none";
    }
  };
});

function draw(s){
  if(!s.playing) return;
  requestAnimationFrame(()=>draw(s));

  s.analyser.getByteTimeDomainData(s.data);
  const c = s.ctx;
  const canvas = c.canvas;

  c.clearRect(0,0,canvas.width,canvas.height);
  const mid = canvas.height/2;

  c.beginPath();
  for(let i=0;i<s.data.length;i++){
    const x = i/s.data.length * canvas.width;
    const y = mid + (s.data[i]-128)/128 * mid * .8;
    i===0 ? c.moveTo(x,y) : c.lineTo(x,y);
  }

  c.strokeStyle="#f0c37a";
  c.lineWidth=2;
  c.shadowBlur=15;
  c.shadowColor="#f0c37a";
  c.stroke();
}
</script>

</body>
</html>
`);
});

// ===============================
app.listen(PORT, () => {
  console.log("🎙️ Dual Side-by-Side Monitor running");
  console.log("👉 http://localhost:" + PORT);
});
إذاعة ترفيهيـة إجتماعيـة سعـودية موجهة إلى جميع أفراد المجتمع السعودي، من شــباب،شابــات، طلاب طالبات،موظفــين، أرباب أسر و رواد الأعمال.

جميع الحقوق محفوظة 2025 © AlifAlif FM
