widget

DJ Cat

ON AIR

Travellers Web Radio

Ζωντανή Ροή – Μουσική Περιπλάνηση μέσα από Rock Ιστορίες

Εκπομπή: Travellers Stories

If you experience problems listening, click here

Loading…

ON AIR

□

Βάλε τον Travellers Player στο site σου

Πάτα το κουμπί για να αντιγράψεις όλον τον κώδικα έτοιμο για χρήση.

[ΞΕΚΙΝΑΕΙ Ο ΚΩΔΙΚΑΣ ΣΟΥ]

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

.eq-mini { display:none; }

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 12px red; }
  50% { transform: scale(1.1); box-shadow: 0 0 20px red; }
  100% { transform: scale(1); box-shadow: 0 0 12px red; }
}

#onairWrapper { display:inline-block; animation:pulse 1.2s infinite; }

#travellers-player * {
  box-sizing: border-box;
  font-family: Segoe UI, Arial;
}

.tfp-player {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.tfp-logo img {
  width: 55px;
  height: 55px;
  border-radius: 6px;
  object-fit: cover;
}

.tfp-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tfp-toprow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tfp-scroll {
  overflow: hidden;
  white-space: nowrap;
  font-size: 15px;
  color: #4fd4ff;
  font-weight: bold;
  flex: 1;
}

.tfp-scroll span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 12s linear infinite;
}

.tfp-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tfp-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: radial-gradient(circle at 30% 30%, #c7ff4d, #7fa71a);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tfp-play-icon {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #000;
  margin-left: 2px;
}

.tfp-pause span {
  width: 3px;
  height: 11px;
  background: #000;
  display: inline-block;
  margin: 1px;
}

.tfp-volume-icon {
  font-size: 16px;
  color: #4fd4ff;
  margin-right: 4px;
  margin-left: 2px;
  display: flex;
  align-items: center;
}

.tfp-slider input {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  background: #1a1a1a;
  border-radius: 4px;
  outline: none;
}

.tfp-slider input::-webkit-slider-runnable-track {
  height: 4px;
  background: #0a4a6e;
  border-radius: 4px;
}

.tfp-slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #4fd4ff;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
  box-shadow: 0 0 6px #4fd4ff;
  transition: 0.2s;
}

.tfp-slider input::-webkit-slider-thumb:hover {
  box-shadow: 0 0 10px #4fd4ff;
}

.tfp-live {
  color: #ffe066;
  font-weight: bold;
  font-size: 12px;
}

#twr-alert.show { display:block !important; opacity:1 !important; }
#twr-alert.hide { opacity:0 !important; }
</style>

<div id="travellers-player">

<div class="tfp-toprow">
        <div class="tfp-scroll">
          <span id="tfpProgramTitle">Loading…</span>
        </div>
        <div id="onairWrapper">
          <div id="onair-text" class="tfp-live">ON AIR</div>
        </div>
      </div>

</div>

</div>

const schedule = [
        { day: 3, start: 22, end: 24, title: "Rock…ανίζοντας" },
        { day: "all", start: 0, end: 5, title: "Late Night Stories" },
        { day: "all", start: 5, end: 15, title: "Travellers Stories" },
        { day: "all", start: 15, end: 15.0833, title: "This Day in Music" },
        { day: "all", start: 15.0833, end: 16, title: "Travellers Stories" },
        { day: "all", start: 16, end: 18, title: "New Rock Music for Life" },
        { day: "all", start: 18, end: 24, title: "Travelers Stories" }
    ];

const audio = document.getElementById("tfp-audio");
    const playBtn = document.getElementById("tfp-play");
    const icon = document.getElementById("tfp-icon");
    const volume = document.getElementById("tfp-volume");

let playing = true;

audio.volume = 0;
    audio.play().catch(()=>{});

icon.className = "tfp-pause";
    icon.innerHTML = "<span></span><span></span>";

setTimeout(()=>{ audio.volume = volume.value; }, 200);

volume.oninput = () => { audio.volume = volume.value; };

playBtn.onclick = () => {
        if(!playing){
            audio.play();
            playing = true;
            icon.className = "tfp-pause";
            icon.innerHTML = "<span></span><span></span>";
        } else {
            audio.pause();
            playing = false;
            icon.className = "tfp-play-icon";
            icon.innerHTML = "";
        }
    };

function updateProgram(){
        const now = new Date();
        const day = now.getDay();
        const hour = now.getHours();
        const minute = now.getMinutes();
        const time = hour + minute/60;

let current = schedule.find(s =>
            (s.day === day || s.day === "all") &&
            time >= s.start &&
            time < s.end
        );

if(!current) current = schedule[1];

const el = document.getElementById("tfpProgramTitle");

el.textContent = current.title;

if(el.scrollWidth <= el.parentElement.clientWidth){
            el.style.animation = "none";
            el.style.paddingLeft = "0";
        } else {
            el.style.animation = "scroll-left 12s linear infinite";
            el.style.paddingLeft = "100%";
        }
    }

updateProgram();
    setInterval(updateProgram, 30000);

});
</script>

// PARTICLES
const canvas = document.getElementById("particles");
const ctx = canvas.getContext("2d");
let particles = [];

function resizeCanvas() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}
resizeCanvas();
window.addEventListener("resize", resizeCanvas);

for (let i = 0; i < 40; i++) {
  particles.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    r: Math.random() * 3 + 1,
    dx: (Math.random() - 0.5) * 0.6,
    dy: (Math.random() - 0.5) * 0.6,
    color: `hsl(${Math.random() * 360}, 80%, 60%)`
  });
}

function animateParticles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(p => {
    p.x += p.dx;
    p.y += p.dy;
    if (p.x < 0 || p.x > canvas.width) p.dx *= -1;
    if (p.y < 0 || p.y > canvas.height) p.dy *= -1;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.fill();
  });
  requestAnimationFrame(animateParticles);
}
animateParticles();

// AUTO-RECONNECT + ALERT
const audio2 = document.getElementById("tfp-audio");
const alertBox = document.getElementById("twr-alert");

function showAlert() {
  alertBox.classList.add("show");
  alertBox.classList.remove("hide");
}

function hideAlert() {
  alertBox.classList.add("hide");
  setTimeout(() => alertBox.classList.remove("show"), 400);
}

setInterval(() => {
  if (audio2.paused || audio2.readyState < 2) {
    showAlert();
    audio2.load();
    audio2.play().catch(()=>{});
  } else {
    hideAlert();
  }
}, 5000);
</script>

[ΤΕΛΟΣ ΚΩΔΙΚΑ]