Web App Hafalan Qur'an Otomatis: Bikin Aplikasi Juz Amma untuk Anak Tanpa Iklan

Mendampingi anak menghafal Juz 30 (Juz Amma) sering kali terkendala aplikasi yang dipenuhi iklan atau pemutar audio yang tidak fleksibel untuk mengulang ayat tertentu. Sebagai seorang developer sekaligus orang tua, saya membuat web app hafalan Qur’an yang 100% gratis, bebas iklan, dan ramah anak.

Masalah & Solusi yang Dibangun

Kebanyakan audio player memutar satu surat penuh dari awal sampai akhir. Padahal saat proses belajar hafalan, anak biasanya fokus pada rentang 2-3 ayat baru per hari.

Aplikasi ini menghadirkan fitur esensial:

• Play Range Ayat: Pilih ayat awal dan ayat akhir (misal ayat 4 sampai 6), lalu setel perulangan otomatis (2x, 5x, atau infinite loop).
• Kontrol Tempo / Playback Speed: Dapat diperlambat menjadi 0.5x atau 0.75x agar anak dapat menyimak makhraj huruf dengan jelas.
• Repeat Per-Ayat & Per-Surah: Memberi jeda natural untuk anak menirukan bacaan.
• Audio Tilawah Resmi: Menggunakan audio Syaikh Muhammad Siddiq Al-Minshawi (Murattal) berkualitas tinggi.

Tech Stack & Sumber Data

• Frontend: Pure HTML5, Vanilla CSS3, Modern JavaScript (ES6+)
• Data Source: AlQuran API (JSON format)
• Audio Provider: Quran Foundation Audio CDN
• Hosting: GitHub Pages

Link & Resource

• Live Web App: ab2rahman.github.io/HafalanQur-an
• Source Code: github.com/ab2rahman/HafalanQur-an
• Tonton Video Penjelasan: YouTube - Bikin Web App Juz Amma Otomatis