🔔 Çevrimdışı bildirim almak ister misiniz?
Bir konuya etiketlendiğinizde, özel mesaj aldığınızda, bir mesajınız alıntılandığında forumda olmasanız bile anlık bildirim almak için lütfen izni verin.
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: Kodu kopyalamak için üzerine çift tıklayın!
<!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>
Eline sağlık @[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]. Paylaşım için teşekkürler.
__________________
I'm a dreamer but it's getting hard to take it.
Some nights don't know if I'm gonna make it.
Heart is heavy but there's nothing that can break me down.