Musik Romantis yang Terus Mengalun Tanpa Putus

Tantangan & Kebutuhan Pengguna

Musik latar merupakan elemen emosional utama dalam undangan digital. Jika elemen `<audio>` ditempatkan di dalam komponen halaman biasa (`HomePage`), musik akan langsung mati atau mengulang dari detik ke-0 setiap kali tamu berpindah ke halaman `/gallery` dan kembali ke `/`. Di samping itu, peramban modern secara ketat memblokir pemutaran suara otomatis sebelum pengguna berinteraksi dengan dokumen.

Dengan mengangkat elemen audio ke level RootLayout, musik berubah menjadi lapisan atmosfer aplikasi yang kebal terhadap siklus bongkar-pasang halaman.

Solusi & Cara Kerja

Memanfaatkan sifat persistensi `RootLayout` pada Next.js App Router, elemen `<audio ref={audioRef} loop>` beserta tombol kontrol melayang (`motion.button` yang berputar 360° secara kontinu ketika aktif) dipasang langsung di `src/app/layout.tsx`.Saat aplikasi dimuat, sebuah interval asinkron mengatur volume ke level nyaman (`0.5`) dan mencoba memanggil `audioRef.current.play()`. Begitu pengguna melakukan sentuhan pertama di layar dan peramban membuka kunci konteks audio, Promise `play()` berhasil diselesaikan, state `isPlaying` disetel ke `true`, dan interval langsung dibersihkan.

Berikut adalah implementasi mekanisme autoplay retry dan kontrol pemutar musik di `src/app/layout.tsx`:

Detail & Hal yang Diperhatikan

• Penanganan Unhandled Promise Rejection: Di peramban berbasis Chromium dan WebKit, `audio.play()` melempar `NotAllowedError` jika dipanggil sebelum gestur pengguna; membungkusnya di dalam `try/catch` menjaga konsol dan runtime tetap bersih.
• Pembersihan timer segera (Immediate Cleanup): Pemanggilan `clearInterval(interval)` tepat setelah `await audioRef.current.play()` berhasil memastikan tidak ada polling yang membebani event loop selama sisa sesi pengguna.
• Navigasi berbasis `<Link>`: Perpindahan antara `/` dan `/gallery` wajib menggunakan komponen `<Link>` dari `next/link` (bukan tag `<a>` mentah) agar `RootLayout` beserta state `audioRef` tetap dipertahankan di memori.

Pastikan seluruh tautan internal di dalam aplikasi menggunakan komponen `next/link` agar transisi halaman dilakukan secara client-side dan tidak memicu full-page reload yang memutus pemutaran audio.