Part 6: Cara Menambahkan Musik Latar dan Countdown Timer pada Web Undangan Pernikahan Online
Pada Part 5, kita telah menambahkan animasi sederhana agar undangan pernikahan lebih hidup. Kini di Part 6, kita akan membuat undangan semakin spesial dengan menambahkan musik latar yang otomatis diputar serta countdown timer menuju hari pernikahan.
Langkah 1: Menambahkan Musik Latar
Siapkan file musik MP3 (misalnya musik.mp3) dan simpan di folder yang sama dengan index.html. Tambahkan kode berikut di dalam tag <body>:
<!-- Musik Latar -->
<audio id="musik-latar" autoplay loop>
<source src="musik.mp3" type="audio/mpeg">
Browser Anda tidak mendukung audio HTML5.
</audio>
<!-- Tombol Kontrol Musik -->
<button id="btn-music">🎵 Matikan Musik</button>
Lalu tambahkan JavaScript sebelum tag </body>:
<script>
const musik = document.getElementById("musik-latar");
const btnMusic = document.getElementById("btn-music");
btnMusic.addEventListener("click", function() {
if (musik.paused) {
musik.play();
btnMusic.textContent = "🎵 Matikan Musik";
} else {
musik.pause();
btnMusic.textContent = "🎵 Putar Musik";
}
});
</script>
Langkah 2: Menambahkan Countdown Timer
Tambahkan kode berikut di bawah detail acara:
<!-- Countdown Timer -->
<div class="countdown">
<h2>Hitung Mundur Menuju Hari H</h2>
<p id="timer">Memuat countdown...</p>
</div>
Lalu JavaScript untuk menghitung mundur:
<script>
const weddingDate = new Date("Aug 25, 2024 10:00:00").getTime();
const countdown = setInterval(function() {
const now = new Date().getTime();
const distance = weddingDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML =
days + " Hari " + hours + " Jam " + minutes + " Menit " + seconds + " Detik";
if (distance < 0) {
clearInterval(countdown);
document.getElementById("timer").innerHTML = "Hari H Telah Tiba!";
}
}, 1000);
</script>
Langkah 3: Tambahkan CSS
Tambahkan kode CSS berikut di dalam tag <style>:
/* Tombol Musik */
#btn-music {
background-color: #b56576;
color: #fff;
padding: 10px 16px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
margin: 15px;
transition: background 0.3s;
}
#btn-music:hover {
background-color: #8a3f52;
}
/* Countdown Timer */
.countdown {
margin-top: 30px;
background: #fdf2f8;
padding: 15px;
border-radius: 10px;
}
.countdown h2 {
color: #b56576;
margin-bottom: 10px;
}
#timer {
font-size: 20px;
font-weight: bold;
color: #333;
}
Langkah 4: Uji di Browser
Simpan file (Ctrl + S) lalu buka di browser. Hasilnya:
- Musik latar otomatis diputar saat halaman dibuka.
- Tombol kontrol bisa mematikan atau menyalakan musik.
- Countdown timer menghitung mundur menuju tanggal pernikahan.
Kesimpulan
Pada Part 6 ini, kita berhasil menambahkan musik latar dan countdown timer agar undangan online lebih menarik. Di Part 7, kita akan belajar menambahkan galeri foto untuk mempercantik halaman undangan.