Digital Masjid Gratis | Aplikasi Jam

// Fungsi untuk memutar suara azan (menggunakan oscillator sederhana, mirip nada panjang) function playAzanSound() // Hentikan audio sebelumnya jika ada if (currentAudio) currentAudio.pause(); currentAudio = null; // Menggunakan AudioContext (web audio) untuk suara azan sederhana try window.webkitAudioContext; const audioCtx = new AudioContextClass(); currentAudio = audioCtx; let startTime = audioCtx.currentTime; // nada azan sederhana: rangkaian frekuensi dan durasi (simulasi panggilan) const notes = [ freq: 440, dur: 0.8 , // A freq: 494, dur: 0.8 , // B freq: 523, dur: 1.0 , // C freq: 587, dur: 0.9 , // D freq: 523, dur: 0.8 , freq: 440, dur: 1.2 , freq: 659, dur: 1.0 , // E freq: 587, dur: 1.2 , freq: 523, dur: 1.5 ]; let timeCursor = startTime; for (let note of notes) const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.connect(gain); gain.connect(audioCtx.destination); osc.frequency.value = note.freq; gain.gain.value = 0.35; osc.start(timeCursor); gain.gain.exponentialRampToValueAtTime(0.0001, timeCursor + note.dur); osc.stop(timeCursor + note.dur); timeCursor += note.dur; // tambah nafas panjang const finalOsc = audioCtx.createOscillator(); const finalGain = audioCtx.createGain(); finalOsc.connect(finalGain); finalGain.connect(audioCtx.destination); finalOsc.frequency.value = 440; finalGain.gain.value = 0.3; finalOsc.start(timeCursor); finalGain.gain.exponentialRampToValueAtTime(0.0001, timeCursor + 2.2); finalOsc.stop(timeCursor + 2.2); // resume jika suspended if (audioCtx.state === 'suspended') audioCtx.resume(); // status selesai cleanup setTimeout(() => if (currentAudio === audioCtx) currentAudio = null; , (timeCursor + 2.5) * 1000); catch(e) console.warn("AudioContext error:", e); azanMsgSpan.innerText = "⚠️ Browser tidak support audio, azan visual tetap aktif.";

/* Container utama masjid style */ .masjid-container max-width: 750px; width: 100%; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); border-radius: 80px 80px 60px 60px; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.1); padding: 20px 20px 35px; border: 1px solid rgba(218, 165, 32, 0.4);

.hijri-date font-size: 0.95rem; background: #2c5a50; padding: 4px 12px; border-radius: 30px; color: #f9eec1;

.next-prayer-highlight background: linear-gradient(145deg, #2c6e5c, #1c4a3e); border: 2px solid #f7c56e; box-shadow: 0 0 10px #ffd966aa; aplikasi jam digital masjid gratis

// inisialisasi + update setiap detik let intervalId; function initApp() getLocationAndUpdate(); // coba ambil data jadwal // update jam tiap 1 detik intervalId = setInterval(() => updateClockAndDate(); , 1000); updateClockAndDate(); testBtn.addEventListener('click', () => stopAzanSound(); triggerAzan("Demo Azan"); ); resetBtn.addEventListener('click', () => stopAzanSound(); azanMsgSpan.classList.remove('azan-active'); azanMsgSpan.innerText = "🔇 Suara dihentikan manual"; setTimeout(() => updateAzanMessageDefault(), 2000); );

// Tambahan geolocation (opsional) untuk lebih akurat function getLocationAndUpdate() if ("geolocation" in navigator) navigator.geolocation.getCurrentPosition(async (position) => const lat = position.coords.latitude; const lon = position.coords.longitude; try const url = `https://api.aladhan.com/v1/timings?latitude=$lat&longitude=$lon&method=2`; const res = await fetch(url); const data = await res.json(); if (data.code === 200 && data.data && data.data.timings) const timings = data.data.timings; prayerSchedule = Subuh: timings.Fajr, Dzuhur: timings.Dhuhr, Ashar: timings.Asr, Maghrib: timings.Maghrib, Isya: timings.Isha ; if(data.data.date.hijri) hijriElement.innerText = `$data.data.date.hijri.day $data.data.date.hijri.month.en $data.data.date.hijri.year H`; document.getElementById('lokasiMasjid').innerHTML = `📍 Masjid (GPS)`; renderPrayerTimes(new Date()); catch(e) console.log("Geo API error"); , () => fetchPrayerTimes(); // fallback jakarta ); else fetchPrayerTimes(); // Fungsi untuk memutar suara azan (menggunakan oscillator

<div class="azan-status" id="azanStatusArea"> <span class="alert-badge">🔊 Status Azan: </span> <span id="azanMessage" class="alert-badge">Menunggu waktu salat</span> </div> <div style="display: flex; justify-content: center; gap: 15px;"> <button id="testAzanBtn">🔔 Uji Coba Azan (Demo)</button> <button id="resetAzanBtn">🔇 Hentikan Suara</button> </div> <div class="footer-note"> ⏰ Waktu salat berdasarkan kota Jakarta (otomatis deteksi lokasi atau default) • Azan berupa notifikasi suara & visual </div> </div> </div>

Berikut adalah kode untuk gratis, lengkap dengan waktu salat otomatis, tampilan LED, dan pengingat azan (simulasi). Bisa langsung dijalankan di browser.

<div class="prayer-times" id="prayerGrid">  </div> Tanggal Hijriah dari API atau fallback lokal

/* area jam digital LED */ .jam-led background: #0a0f0e; border-radius: 48px; padding: 25px 15px; text-align: center; box-shadow: inset 0 0 12px #00b89433, 0 10px 20px rgba(0,0,0,0.3); border: 1px solid #2e7d64;

// Elemen DOM const jamElement = document.getElementById('jamDigital'); const tanggalElement = document.getElementById('tanggalMasehi'); const hijriElement = document.getElementById('hijriDisplay'); const prayerGrid = document.getElementById('prayerGrid'); const azanMsgSpan = document.getElementById('azanMessage'); const testBtn = document.getElementById('testAzanBtn'); const resetBtn = document.getElementById('resetAzanBtn');

@keyframes pulse 0% opacity: 0.7; text-shadow: 0 0 0px gold; 100% opacity: 1; text-shadow: 0 0 6px #ffaa33;