Implementing Word-by-Word Highlighting for Quranic Audio

uthuman

Asalam aliekum

Primary Technical Question:

What is the optimal technical implementation approach for synchronizing audio recitation with word-by-word text highlighting in a Quran web application?
HERE IS THE APPLICATION:
https://www.quranhub.cloud
PLEASE TEST THE APPLICATION

Specific Implementation Considerations:

What JavaScript libraries or Web Audio API methods work best for precise audio-word synchronization?
How should the Quranic text be structured (HTML/CSS) to enable smooth word-level highlighting transitions?
What timing data format and parsing method ensures accurate alignment between audio playback and text highlighting?
Are there existing Quran-specific audio timing datasets or APIs that provide word-level timestamps?
What performance optimizations are crucial for maintaining smooth highlighting on mobile devices and slower networks?

User Experience Requirements:

What visual highlighting techniques (color changes, underlines, background highlights) provide the clearest word-following experience?
How should the application handle user interactions (play/pause, seek, speed control) while maintaining sync?
What loading states and error handling are needed for large audio files and timing data?

Progressive Web App Specifics:

What caching strategies work best for audio files and timing data in a PWA context?
How can Service Workers ensure reliable audio playback and highlighting offline?
What PWA capabilities (background sync, push notifications) could enhance the recitation experience?

Current Application Context:

Target Application: QuranHub.cloud (Progressive Web App)
Required Feature: Real-time word highlighting synchronized with audio recitation
Technical Stack: [To be specified based on QuranHub's current implementation]

meezaan

uthuman Optimal is different from person to person.

The only question that can actually be answered here is about timing datasets - they are usually not for words but for ayahs for an audio file for an entire surah - https://everyayah.com/data/timings_files/ - for example.

The rest of the questions, IMHO, are far too generic for answer, which is probably why there aren't any.

abdulmalik

Assalamu Alaikum uthuman
I’ve been exploring your work on QuranHub.cloud and I must say, the implementation is impressive! The user experience is very smooth, and I truly appreciate the effort you've put into building such a valuable tool for the Ummah.

I am currently a developer working on a project called HifzTracker, aimed at helping users maintain Quranic consistency. While testing your application, I came across the 'Father and Son' (Teacher-Student) recitation style. I have been searching for a stable API or source for this specific format to help our users with memorization, but I've run into some "NotSupportedError" issues with standard sources.

Could you kindly point me in the right direction regarding where you sourced that specific audio? Is it a public API, or a custom-hosted dataset?

Looking forward to hearing from you. Keep up the amazing work!

Barakallahu Feek,
Abdulmalik"