Quran Audio Player Demo

Test the audio playback features with different reciters and controls

Select Ayah to Test

Basic Audio Player

1:1
audio.play.ayah

Audio Player (Auto-Advance)

Listen to ayahs with automatic advancement to the next ayah

Audio Player

Surah 1 • 7 ayat

Ayah 1
1 of 7 ayat

Auto-advance enabled • Audio will continue to next ayah automatically

Inline Audio Buttons

Al-Fatiha:1 - Small Button
Al-Fatiha:1 - Medium Button with Time
Al-Fatiha:1 - Large Button

Multiple Ayat Test (Inline Buttons)

Al-Fatiha:1

Click play to listen to this ayah

Al-Fatiha:2

Click play to listen to this ayah

Al-Baqarah:1

Click play to listen to this ayah

Al-Baqarah:2

Click play to listen to this ayah

Yasin:1

Click play to listen to this ayah

Audio Features

Audio Sources

  • • MP3Quran.net (High quality)
  • • Multiple reciters available
  • • Fast streaming servers

Controls

  • • Play/Pause functionality
  • • Volume control
  • • Progress tracking
  • • Reciter selection

📱 User Experience

  • • Responsive design
  • • Dark mode support
  • • Loading states
  • • Error handling

🔧 Technical

  • • Custom React hooks
  • • TypeScript support
  • • Tailwind CSS styling
  • • Accessibility features