Radio

.radio-mi { font-family: Arial, sans-serif; margin: 0; background: #f7f7f7; color: #222; padding-bottom: 20px; } .radio-mi header { background: #0f172a; color: white; padding: 24px; text-align: center; } .radio-mi .container { max-width: 900px; margin: 24px auto; padding: 0 16px; } .radio-mi .card { background: white; border-radius: 14px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .radio-mi h1, .radio-mi h2, .radio-mi h3 { margin-top: 0; } .radio-mi .live-badge { display: inline-block; background: red; color: white; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: bold; margin-bottom: 10px; } .radio-mi audio { width: 100%; margin-top: 12px; } .radio-mi .muted { color: #666; font-size: 14px; } .radio-mi .now-playing { margin-top: 12px; font-size: 14px; color: #333; line-height: 1.6; } .radio-mi .playlist { margin-top: 16px; padding-left: 18px; } .radio-mi .playlist li { margin-bottom: 8px; font-size: 14px; } .radio-mi .start-note { margin-top: 10px; font-size: 13px; color: #888; } .radio-mi .btn-start { background: #0f172a; color: #fff; border: none; padding: 10px 16px; border-radius: 10px; cursor: pointer; margin-top: 12px; } Radio Markaz Inayah Streaming kajian dan rekaman audio LIVE 24 JAM Siaran Audio Kajian Playlist akan berputar otomatis, lanjut ke audio berikutnya, lalu mengulang dari awal tanpa henti. Sedang diputar: Memuat audio... ▶ Putar Radio Pada sebagian browser, audio baru benar-benar berbunyi setelah tombol dipencet satu kali. Daftar Playlist const playlist = [ { title: "Agar Kita Mendapatkan Haji Mabrur", url: "https://markazinayah.com/wp-content/uploads/2022/06/1.-agar-kita-mendapatkan-haji-mabrur.mp3" }, { title: "Haji dan Urgensi Ilmu", url: "https://markazinayah.com/wp-content/uploads/2022/06/2.-haji-dan-urgensi-ilmu.mp3" }, { title: "Haji dan Keikhlasan", url: "https://markazinayah.com/wp-content/uploads/2022/06/3.-haji-dan-keikhlasan.mp3" }, { title: "Haji dan Tauhid", url: "https://markazinayah.com/wp-content/uploads/2022/06/4.-haji-dan-tauhid.mp3" }, { title: "Haji dan Ittiba", url: "https://markazinayah.com/wp-content/uploads/2022/06/5.-haji-dan-ittiba.mp3" }, { title: "Haji dan Cinta Rasul", url: "https://markazinayah.com/wp-content/uploads/2022/06/6.-haji-dan-cinta-rasul.mp3" }, { title: "Haji dan Pengorbanan", url: "https://markazinayah.com/wp-content/uploads/2022/06/7.-haji-dan-pengorbanan.mp3" }, { title: "Haji Sesuai Tuntunan 1", url: "https://markazinayah.com/wp-content/uploads/2022/06/8.-haji-sesuai-tuntunan-1.mp3" }, { title: "Haji Sesuai Tuntunan 2", url: "https://markazinayah.com/wp-content/uploads/2022/06/9.-haji-sesuai-tuntunan-2.mp3" }, { title: "Larangan-larangan Ihram serta Hukum Fidyah Haji dan Umrah", url: "https://markazinayah.com/wp-content/uploads/2022/06/10.-larangan-larangan-ihram-serta-hukum-fidyah-haji-dan-umrah.mp3" }, { title: "Haji dan Perjalanan Menuju Akhirat", url: "https://markazinayah.com/wp-content/uploads/2022/06/11.-haji-dan-perjalanan-menuju-akhirat.mp3" }, { title: "Haji dan Shalat Berjamaah", url: "https://markazinayah.com/wp-content/uploads/2022/06/12.-haji-dan-shalat-berjamaah.mp3" }, { title: "Haji dan Ibadah Harta", url: "https://markazinayah.com/wp-content/uploads/2022/06/13.-haji-dan-ibadah-harta.mp3" }, { title: "Haji dan Pendidikan Keluarga", url: "https://markazinayah.com/wp-content/uploads/2022/06/14.-haji-dan-pendidikan-keluarga.mp3" }, { title: "Haji dan Wanita Muslimah", url: "https://markazinayah.com/wp-content/uploads/2022/06/15.-haji-dan-wanita-muslimah.mp3" }, { title: "Haji dan Amanah", url: "https://markazinayah.com/wp-content/uploads/2022/06/16.-haji-dan-amanah.mp3" }, { title: "Haji dan Bahaya Maksiat", url: "https://markazinayah.com/wp-content/uploads/2022/06/17.-haji-dan-bahaya-maksiat.mp3" }, { title: "Haji dan Motivasi Dakwah", url: "https://markazinayah.com/wp-content/uploads/2022/06/18.-haji-dan-motivasi-dakwah.mp3" }, { title: "Haji dan Doa", url: "https://markazinayah.com/wp-content/uploads/2022/06/19.-haji-dan-doa.mp3" }, { title: "Haji dan Ukhuwah", url: "https://markazinayah.com/wp-content/uploads/2022/06/20.-haji-dan-ukhuwah.mp3" } ]; const player = document.getElementById("radioPlayer"); const nowPlayingTitle = document.getElementById("nowPlayingTitle"); const playlistView = document.getElementById("playlistView"); const startRadioBtn = document.getElementById("startRadioBtn"); let currentIndex = 0; function loadTrack(index) { player.src = playlist[index].url; nowPlayingTitle.textContent = playlist[index].title; updatePlaylistHighlight(); } function playTrack(index) { loadTrack(index); player.play().then(() => { setTimeout(() => { player.muted = false; }, 500); }).catch(() => {}); } function nextTrack() { currentIndex = (currentIndex + 1) % playlist.length; playTrack(currentIndex); } function updatePlaylistHighlight() { const items = playlistView.querySelectorAll("li"); items.forEach((item, i) => { item.style.fontWeight = i === currentIndex ? "bold" : "normal"; item.style.color = i === currentIndex ? "#0f172a" : "#222"; }); } playlist.forEach((track, index) => { const li = document.createElement("li"); li.textContent = track.title; li.style.cursor = "pointer"; li.addEventListener("click", function () { currentIndex = index; playTrack(currentIndex); }); playlistView.appendChild(li); }); loadTrack(currentIndex); window.addEventListener("load", function () { player.play().then(() => { setTimeout(() => { player.muted = false; }, 500); }).catch(() => {}); }); player.addEventListener("ended", function () { nextTrack(); }); startRadioBtn.addEventListener("click", function () { playTrack(currentIndex); });