top of page
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radyo Player</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: url('dj-bayan.jpg') no-repeat center center fixed;
background-size: cover;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.stars {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
opacity: 0;
animation: twinkle 2s infinite;
}
@keyframes twinkle {
0% { opacity: 0; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
100% { opacity: 0; transform: scale(0.8); }
}
.player {
background: #222;
padding: 15px;
width: 250px;
border-radius: 12px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
text-align: center;
border: 8px solid #444;
border-top: 20px solid #444;
border-bottom: 20px solid #444;
position: relative;
}
.player::before {
content: '';
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 8px;
background: #666;
border-radius: 4px;
}
.player::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 8px;
background: #666;
border-radius: 4px;
}
.player h2 {
margin-bottom: 6px;
font-size: 18px;
color: #ffcc00;
}
.controls {
display: flex;
justify-content: center;
margin-top: 8px;
gap: 8px;
}
button {
background: #40E0D0; /* Turkuaz */
color: black;
border: none;
padding: 10px;
font-size: 14px;
cursor: pointer;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease, background 0.3s ease;
box-shadow: inset 0 0 4px #000;
}
button:hover {
background: #32C6B6; /* Daha koyu turkuaz */
transform: scale(1.1);
}
.volume-control {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.volume-control input {
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="stars" id="stars"></div>
<div class="player">
<h2>🔊 Canlı Radyo Yayını</h2>
<audio id="radio" src="https://ssl22.radyotelekom.com:8032/;" preload="none"></audio>
<div class="controls">
<button id="playBtn" onclick="playRadio()">▶</button>
<button onclick="pauseRadio()">⏸</button>
</div>
<div class="volume-control">
<label for="volume">🔊</label>
<input type="range" id="volume" min="0" max="1" step="0.1" value="1" onchange="setVolume(this.value)">
</div>
</div>
<script>
function playRadio() {
document.getElementById("radio").play();
}
function pauseRadio() {
document.getElementById("radio").pause();
}
function setVolume(value) {
document.getElementById("radio").volume = value;
}
function createStars() {
const starContainer = document.getElementById("stars");
for (let i = 0; i < 50; i++) {
let star = document.createElement("div");
star.classList.add("star");
star.style.top = Math.random() * 100 + "vh";
star.style.left = Math.random() * 100 + "vw";
star.style.animationDuration = (Math.random() * 2 + 1) + "s";
starContainer.appendChild(star);
}
}
createStars();
</script>
</body>
</html>
<iframe src="https://ssl22.radyotelekom.com/cp/widgets/player/single/?p=8032" height="110" width="100%" scrolling="no" style="border:none;"></iframe>
WEB SİTENİZDE BÖYLE GÖRÜNÜR
<audio id="stream" controls preload="none" style="width: 400px;"> <source src="https://ssl22.radyotelekom.com/8032/stream" type="audio/mpeg"> </audio>
WEB SİTENİZDE BÖYLE GÖRÜNÜR.
WEB SİTENİZDE BÖYLE GÖRÜNÜR.
<iframe src="https://tunein.com/embed/player/s340925/" style="width:100%; height:100px;" scrolling="no" frameborder="no"></iframe>
bottom of page