${surah.number}

\n ${surah.name}\n ${surah.englishName}\n ${surah.numberOfAyahs} versets • ${surah.revelationType}\n

\n \n \n

\n `).join('');\n \n // Ajout des écouteurs d'événements\n this.surahListEl.querySelectorAll('.read-button').forEach(button => {\n button.addEventListener('click', (e) => {\n const surahNumber = e.target.closest('.read-button').dataset.surah;\n this.showVerses(surahNumber);\n });\n });\n \n this.surahListEl.querySelectorAll('.listen-button').forEach(button => {\n button.addEventListener('click', (e) => {\n const surahNumber = e.target.closest('.listen-button').dataset.surah;\n this.playAudio(surahNumber);\n });\n });\n }\n\n renderVerses(verses) {\n this.modalBody.innerHTML = verses.map(verse => `\n

\n ${verse.numberInSurah}\n \n

${verse.text}

${verse.translations.fr}

${verse.translations.tr}

\n `).join('');\n\n // Ajouter les écouteurs d'événements pour les boutons audio des versets\n this.modalBody.querySelectorAll('.verse-audio-button').forEach(button => {\n button.addEventListener('click', (e) => {\n const verseNumber = e.currentTarget.dataset.verse;\n if (verseNumber) {\n this.playAudio(this.currentSurah, verseNumber);\n }\n });\n });\n }\n\n async showVerses(surahNumber) {\n try {\n this.showLoading();\n this.currentSurah = surahNumber; // Stocker le numéro de la sourate actuelle\n\n // Charger le texte arabe\n const arabicResponse = await fetch(`${this.apiBaseUrl}/surah/${surahNumber}/ar.alafasy`);\n const arabicData = await arabicResponse.json();\n\n // Charger la traduction française\n const frenchResponse = await fetch(`${this.apiBaseUrl}/surah/${surahNumber}/fr.hamidullah`);\n const frenchData = await frenchResponse.json();\n\n // Charger la traduction turque\n const turkishResponse = await fetch(`${this.apiBaseUrl}/surah/${surahNumber}/tr.diyanet`);\n const turkishData = await turkishResponse.json();\n\n if (arabicData.code === 200 && frenchData.code === 200 && turkishData.code === 200) {\n // Combiner les versets avec leurs traductions\n const verses = arabicData.data.ayahs.map((ayah, index) => ({\n number: ayah.number,\n numberInSurah: ayah.numberInSurah,\n text: ayah.text,\n translations: {\n fr: frenchData.data.ayahs[index].text,\n tr: turkishData.data.ayahs[index].text\n }\n }));\n\n this.modalTitle.textContent = `${arabicData.data.englishName} - ${arabicData.data.name}`;\n this.renderVerses(verses);\n this.verseModal.classList.add('active');\n }\n } catch (error) {\n console.error('Erreur lors du chargement des versets:', error);\n this.showError('Impossible de charger les versets. Veuillez réessayer plus tard.');\n } finally {\n this.hideLoading();\n }\n }\n\n openModal() {\n this.verseModal.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n \n closeModal() {\n this.verseModal.classList.remove('active');\n document.body.style.overflow = '';\n if (this.currentAudio) {\n this.currentAudio.pause();\n this.currentAudio = null;\n }\n }\n \n async loadVerseAudio(verseNumber) {\n const audioUrl = `https://cdn.islamic.network/quran/audio/128/ar.alafasy/${verseNumber}.mp3`;\n const audio = new Audio(audioUrl);\n return audio;\n }\n\n async playAudio(surahNumber, verseNumber = null) {\n try {\n // Si un audio est déjà en cours\n if (this.currentAudio) {\n if (!this.currentAudio.paused) {\n // Si c'est le même audio, on met en pause\n this.currentAudio.pause();\n this.isPlaying = false;\n this.shouldContinuePlaying = false;\n this.updatePlayButton(surahNumber, verseNumber, false);\n return;\n } else if (this.currentSurah === surahNumber && !verseNumber) {\n // Reprendre la lecture de la sourate\n this.shouldContinuePlaying = true;\n this.playNextVerse();\n return;\n }\n }\n\n if (verseNumber) {\n // Lecture d'un verset individuel\n const audio = await this.loadVerseAudio(verseNumber);\n this.currentAudio = audio;\n this.currentSurah = surahNumber;\n this.currentVerse = verseNumber;\n \n this.updatePlayButton(surahNumber, verseNumber, true);\n await this.currentAudio.play();\n this.isPlaying = true;\n\n this.currentAudio.onended = () => {\n this.isPlaying = false;\n this.updatePlayButton(surahNumber, verseNumber, false);\n this.currentAudio = null;\n this.currentVerse = null;\n };\n } else {\n // Lecture de la sourate complète\n const response = await fetch(`${this.apiBaseUrl}/surah/${surahNumber}/ar.alafasy`);\n const data = await response.json();\n \n if (data.code === 200) {\n this.verses = data.data.ayahs;\n this.currentVerseIndex = 0;\n this.currentSurah = surahNumber;\n this.shouldContinuePlaying = true;\n \n // Commencer la lecture\n await this.playNextVerse();\n }\n }\n } catch (error) {\n console.error('Erreur lors de la lecture audio:', error);\n this.showError('Impossible de lire l\\'audio. Veuillez réessayer plus tard.');\n this.updatePlayButton(surahNumber, verseNumber, false);\n this.resetAudioState();\n }\n }\n\n async playNextVerse() {\n if (!this.shouldContinuePlaying || this.currentVerseIndex >= this.verses.length) {\n this.resetAudioState();\n return;\n }\n\n try {\n const verse = this.verses[this.currentVerseIndex];\n const audio = new Audio(`https://cdn.islamic.network/quran/audio/128/ar.alafasy/${verse.number}.mp3`);\n \n this.currentAudio = audio;\n this.currentVerse = verse.number;\n \n this.updatePlayButton(this.currentSurah, null, true);\n \n await audio.play();\n this.isPlaying = true;\n\n audio.onended = () => {\n this.currentVerseIndex++;\n this.playNextVerse();\n };\n\n audio.onerror = () => {\n console.error('Erreur de lecture audio pour le verset:', this.currentVerseIndex + 1);\n this.currentVerseIndex++;\n this.playNextVerse();\n };\n } catch (error) {\n console.error('Erreur de lecture:', error);\n this.currentVerseIndex++;\n this.playNextVerse();\n }\n }\n\n resetAudioState() {\n this.isPlaying = false;\n this.shouldContinuePlaying = false;\n this.updatePlayButton(this.currentSurah, null, false);\n this.currentAudio = null;\n this.currentVerse = null;\n this.currentSurah = null;\n this.currentVerseIndex = 0;\n this.verses = [];\n }\n \n updatePlayButton(surahNumber, verseNumber, isPlaying) {\n const button = verseNumber \n ? this.modalBody.querySelector(`[data-verse=\"${verseNumber}\"] i`)\n : document.querySelector(`[data-surah=\"${surahNumber}\"] .play-button`);\n\n if (button) {\n if (verseNumber) {\n button.className = isPlaying ? 'fas fa-pause' : 'fas fa-play';\n } else {\n button.innerHTML = isPlaying ? \n ' Pause' : \n ' Écouter';\n }\n }\n }\n \n showError(message) {\n // Implémenter l'affichage des erreurs selon vos besoins\n alert(message);\n }\n}\n\n// Initialisation de l'application\ndocument.addEventListener('DOMContentLoaded', () => {\n new QuranApp();\n});\n","url","link_url","/p/likkb1qfyd8t7dksl67n","versioned_link_url","/p/likkb1qfyd8t7dksl67n/2","yapping","page_description","cursor","eyJpZCI6Imxpa2tiMXFmeWQ4dDdka3NsNjduIn0","token","included",[],"about",{"_177":-5},"parent","routes/browser/layout","actionData","errors"]

Harmonies de l'Âme - Le Saint Coran