quran / quranicaudio-app

QuranicAudio.com Mobile App

QuranicAudio App

Our aim is to launch before Ramadan 2017 (Friday, 26 May), therefore an MVP (Minimal Viable Product) approach would suit us quite well. QuranicAudio.com should always be the reference implementation.

MVP feature list

1. Display a list of reciters
   • Should be in sections (see api)
2. Display a list of chapters (surahs) for a given Qari
   • Show how long is the chapter
   • Cross promote Quran.com app for reading
   • Shuffle Play
3. Play a selected chapter for a given reciter
   • Count down as the surah is playing
   • Progress bar
   • Random, Continues, Next, Previous, Play/Pause
4. Cross Promote Quran.com application for reading

API

Work in progress documentation

MP3

A URL has to be constructed and should look as such:

curl https://download.quranicaudio.com/quran/abdullaah_alee_jaabir_studio/093.mp3

• base url : https://download.quranicaudio.com/quran/
• relative path : abdullaah_alee_jaabir_studio
• zero padded chapter/surah number: 093.mp3

the Relative path can be found in each reciter response object. A reference implemation can be found on our web application:

`${AUDIO_URL}/${action.qari.relativePath}${zeroPad(action.surah.id, 3)}.mp3`

Reciter (Qari)

  curl https://quranicaudio.com/api/qaris/15

example result:

 
 {
   "id":55,
   "name":"Al-Hussayni Al-'Azazy (with Children)",
   "arabic_name":"الحسيني العزازي مع اطفال",
   "relative_path":"alhusaynee_al3azazee_with_children/",
   "file_formats":"mp3",
   "section_id":1,
   "home":true,
   "description":null,
   "torrent_filename":"[Quran] Al-Hussayni Al-'Azazy (with Children) [192Kbps].torrent",
   "torrent_info_hash":"2339aa5f47a1d88e5033595b194099c29155c5e2",
   "torrent_seeders":0,
   "torrent_leechers":1
}

List of Reciters (Qaris)

  curl https://quranicaudio.com/api/qaris

example result:

 [
   {
      "id":55,
      "name":"Al-Hussayni Al-'Azazy (with Children)",
      "arabic_name":"الحسيني العزازي مع اطفال",
      "relative_path":"alhusaynee_al3azazee_with_children/",
      "file_formats":"mp3",
      "section_id":1,
      "home":true,
      "description":null,
      "torrent_filename":"[Quran] Al-Hussayni Al-'Azazy (with Children) [192Kbps].torrent",
      "torrent_info_hash":"2339aa5f47a1d88e5033595b194099c29155c5e2",
      "torrent_seeders":0,
      "torrent_leechers":1
   },
   {
      "id":88,
      "name":"Mostafa Ismaeel",
      "arabic_name":"مصطفى إسماعيل",
      "relative_path":"mostafa_ismaeel/",
      "file_formats":"mp3",
      "section_id":1,
      "home":true,
      "description":null,
      "torrent_filename":"[Quran] Mostafa Ismaeel [128Kbps].torrent",
      "torrent_info_hash":"98b7e43b76fbbafd8d017d86557dc009fb266a4c",
      "torrent_seeders":null,
      "torrent_leechers":null
   },
   {
      "id":123,
      "name":"Madinah Taraweeh 1435",
      "arabic_name":null,
      "relative_path":"madinah_1435/",
      "file_formats":"mp3",
      "section_id":2,
      "home":true,
      "description":"This is the Live Recitation from Masjid al-Nabawi, 1435 H./2014 A.D.  Recited by 6 Imams: <a href=\\\"http://quranicaudio.com/quran/8\\\">Ali Abdur-Rahman al-Huthaify</a>, <a href=\\\"http://quranicaudio.com/quran/11\\\">AbdulMuhsin al-Qasim</a>, <a href=\\\"http://quranicaudio.com/quran/43\\\">Salah al-Budair</a>, Abdullah al-Bu'ayjan, Ahmad Hameed, and Husayn aal ash-Shaykh. Special thanks to <a href=\\\"http://www.mazameer.com\\\">Mazameer</a> for this recitation.",
      "torrent_filename":null,
      "torrent_info_hash":null,
      "torrent_seeders":null,
      "torrent_leechers":null
   },
   {
      "id":16,
      "name":"Mahmoud Khaleel Al-Husary",
      "arabic_name":"محمود خليل الحصري",
      "relative_path":"mahmood_khaleel_al-husaree/",
      "file_formats":"mp3",
      "section_id":1,
      "home":false,
      "description":null,
      "torrent_filename":"[Quran] Mahmoud Khalil Al-Husary [128Kbps].torrent",
      "torrent_info_hash":"36e86a71bf8b17a130dfab53bf58622489c1d4f7",
      "torrent_seeders":3,
      "torrent_leechers":1
   }
 ]

Sections

Each will belong to a segment, such as Recitations from Haramain Taraweeh or Non-Hafs Recitations

  curl https://quranicaudio.com/api/sections

example result:

 
 [
  {
    "id": 1,
    "name": "Recitations"
  },
  {
    "id": 2,
    "name": "Recitations from Haramain Taraweeh"
  },
  {
    "id": 3,
    "name": "Non-Hafs Recitations"
  },
  {
    "id": 4,
    "name": "Recitations with Translations"
  }
]

Chapter (surah)

Should be used to display the Chapter name and reference for each audio file.

  curl https://quranicaudio.com/api/surahs/3

example result:

  {
    "id": 3,
    "page": [
      50,
      76
    ],
    "bismillah_pre": true,
    "ayat": 200,
    "name": {
      "complex": "Āli `Imrān",
      "simple": "Ali 'Imran",
      "english": "Family of Imran",
      "arabic": "آل عمران"
    },
    "revelation": {
      "place": "madinah",
      "order": 89
    }
  }

Chapters (surahs)

List of all chapters. We should probably use the new Quran.com Api.

  curl https://quranicaudio.com/api/surahs

example result:

  [{
    "id": 1,
    "page": [
      1,
      1
    ],
    "bismillah_pre": false,
    "ayat": 7,
    "name": {
      "complex": "Al-Fātiĥah",
      "simple": "Al-Fatihah",
      "english": "The Opener",
      "arabic": "الفاتحة"
    },
    "revelation": {
      "place": "makkah",
      "order": 5
    }
  },
  {
    "id": 2,
    "page": [
      2,
      49
    ],
    "bismillah_pre": true,
    "ayat": 286,
    "name": {
      "complex": "Al-Baqarah",
      "simple": "Al-Baqarah",
      "english": "The Cow",
      "arabic": "البقرة"
    },
    "revelation": {
      "place": "madinah",
      "order": 87
    }
  },
  {
    "id": 3,
    "page": [
      50,
      76
    ],
    "bismillah_pre": true,
    "ayat": 200,
    "name": {
      "complex": "Āli `Imrān",
      "simple": "Ali 'Imran",
      "english": "Family of Imran",
      "arabic": "آل عمران"
    },
    "revelation": {
      "place": "madinah",
      "order": 89
    }
  }
  ]

Audio File

List of all audio files and their meta data.

  curl https://quranicaudio.com/api/audio_files/55

example result:

   {
      "qari_id":1,
      "surah_id":43,
      "main_id":85,
      "recitation_id":5,
      "filenum":null,
      "file_name":"043.mp3",
      "extension":"mp3",
      "stream_count":381,
      "download_count":529,
      "format":{
         "size":15659136,
         "bit_rate":128083,
         "duration":978.058625,
         "nb_streams":2,
         "start_time":0,
         "format_name":"mp3",
         "nb_programs":0,
         "probe_score":51,
         "format_long_name":"MP2/3 (MPEG audio layer 2/3)"
      },
      "metadata":{
         "album":"Quran",
         "genre":"Quran",
         "title":"Surat Az-Zukhruf",
         "track":"43/114",
         "artist":"AbdulAzeez al-Ahmad"
      },
      "qari":{
         "id":1,
         "name":"Abdullah Awad al-Juhani",
         "arabic_name":"عبدالله عواد الجهني",
         "relative_path":"abdullaah_3awwaad_al-juhaynee/",
         "file_formats":"mp3",
         "section_id":1,
         "home":true,
         "description":null,
         "torrent_filename":"[Quran] Abdullah Awad al-Juhani [127Kbps - 128Kbps].torrent",
         "torrent_info_hash":"b3f798af9d7c913a7ffa9c278a0299d5d4ef6780",
         "torrent_seeders":2,
         "torrent_leechers":2
      }
   },
   
]

Audio Files

List of all audio files and their meta data.

  curl https://quranicaudio.com/api/audio_files

example result:

  [
   {
      "qari_id":1,
      "surah_id":43,
      "main_id":85,
      "recitation_id":5,
      "filenum":null,
      "file_name":"043.mp3",
      "extension":"mp3",
      "stream_count":381,
      "download_count":529,
      "format":{
         "size":15659136,
         "bit_rate":128083,
         "duration":978.058625,
         "nb_streams":2,
         "start_time":0,
         "format_name":"mp3",
         "nb_programs":0,
         "probe_score":51,
         "format_long_name":"MP2/3 (MPEG audio layer 2/3)"
      },
      "metadata":{
         "album":"Quran",
         "genre":"Quran",
         "title":"Surat Az-Zukhruf",
         "track":"43/114",
         "artist":"AbdulAzeez al-Ahmad"
      },
      "qari":{
         "id":1,
         "name":"Abdullah Awad al-Juhani",
         "arabic_name":"عبدالله عواد الجهني",
         "relative_path":"abdullaah_3awwaad_al-juhaynee/",
         "file_formats":"mp3",
         "section_id":1,
         "home":true,
         "description":null,
         "torrent_filename":"[Quran] Abdullah Awad al-Juhani [127Kbps - 128Kbps].torrent",
         "torrent_info_hash":"b3f798af9d7c913a7ffa9c278a0299d5d4ef6780",
         "torrent_seeders":2,
         "torrent_leechers":2
      }
   },
   {
      "qari_id":1,
      "surah_id":35,
      "main_id":69,
      "recitation_id":5,
      "filenum":null,
      "file_name":"035.mp3",
      "extension":"mp3",
      "stream_count":413,
      "download_count":590,
      "format":{
         "size":13254784,
         "bit_rate":128100,
         "duration":827.776189,
         "nb_streams":2,
         "start_time":0,
         "format_name":"mp3",
         "nb_programs":0,
         "probe_score":51,
         "format_long_name":"MP2/3 (MPEG audio layer 2/3)"
      },
      "metadata":{
         "album":"Quran",
         "genre":"Quran",
         "title":"Surat Fatir",
         "track":"35/114",
         "artist":"AbdulAzeez al-Ahmad"
      },
      "qari":{
         "id":1,
         "name":"Abdullah Awad al-Juhani",
         "arabic_name":"عبدالله عواد الجهني",
         "relative_path":"abdullaah_3awwaad_al-juhaynee/",
         "file_formats":"mp3",
         "section_id":1,
         "home":true,
         "description":null,
         "torrent_filename":"[Quran] Abdullah Awad al-Juhani [127Kbps - 128Kbps].torrent",
         "torrent_info_hash":"b3f798af9d7c913a7ffa9c278a0299d5d4ef6780",
         "torrent_seeders":2,
         "torrent_leechers":2
      }
   }
]

Addition recitation by the same reciter:

Soon!

How to contribute

We trust that you will not copy this idea/project, this is at the end for the sake of Allah and we all have good intentions while working with this project. But we must stress that copying the code/project is unacceptable.

Read the [contributing] section before creating an issue.

Tech Stack

The Quran team is invested in the React eco-system and we want to keep the stack simple, and close to our other sister projects.

Core

• React/React Native
• Redux (maybe Redux-saga)
• React-navigation
• Font Awesome

UI

Many thanks to Ahmad Galal for the amazing UI he has contributed.

Useful links:

https://github.com/quran/audio.quran.com https://github.com/quran/quran.com-frontend https://quranicaudio.com/api

#Native-base:

Eject themes:

  node node_modules/native-base/ejectTheme.js

#Sentry:

For Sentry to work you need to have the sentry.properties file locally in both the android and ios directories, to get these files generated make sure you are logged in on sentry in your default browser with an account that have access to Sentry account for Quranicaudio and then run these commands:

$ react-native unlink react-native-sentry
$ react-native link react-native-sentry

quranicaudio-app's Issues

Names are not sorted alphabetically

Audio Player

We need to find a decent Audio Player. Basic requirements:

• Can load MP3 files from HTTP
• Can preload
• Can save cache for offline playing (not a big deal)
• Play while out of the application

potential:

https://github.com/just-team/react-native-youtube-player
https://docs.expo.io/versions/v15.0.0/sdk/audio.html

shuffled/sequential autoplay in audio player

Basically, I use Quran apps while driving and the idea is to make it compatible for drivers. A couple of features are suggested in separate issues.

Three features are requested:

1. Repeat the same surah which is being played currently.
2. Autoplay very next surah
3. Autoplay shuffled surah (available in web)

Home Screen

• Should have a list of Qaris. Use the /qaris endpoint.
• Qaris are split by sections, and each qari has a property of section_id. We should have a way to filter based on section names. Please use the /sections endpoint to retrieve the section name.
• Qari name should be pressable and will navigate to the qari profile page. You can either pass information from the list on the home screen or do an api call to /qaris/{QARI_ID}

See #2 for UI.

test

styled-components?

Mind blown by this:
https://github.com/styled-components/styled-components#react-native

Uses:
https://github.com/styled-components/css-to-react-native

download of surah for making the app offline compatible

Basically, I use Quran apps while driving and the idea is to make it compatible for drivers. A couple of features are suggested in separate issues.

For making the app offline compatible, below is the app i used over commute and has a good model for offline usage:

https://itunes.apple.com/ae/app/almuaiqly-%D8%A7%D9%84%D8%B4%D9%8A%D8%AE-%D9%85%D8%A7%D9%87%D8%B1-%D8%A7%D9%84%D9%85%D8%B9%D9%8A%D9%82%D9%84%D9%8A/id512297210?mt=8

How does it work (for the above app):

1. Surah number is grayed out with a beautiful art (if not downloaded)
2. You can't play until the surah has been downloaded
3. Once downloaded it is available for play next time (so the app knows where to look for in the device for the surah)

How should it work (suggestion) for quranic audio:

1. Surah number is grayed out with a beautiful art (if not downloaded)
2. You have the option to play directly from internet if not downloaded
3. Once downloaded it is available for play next time from the device even if there is internet (so the app knows where to look for in the device for the surah)

Surah Fatiha by another reciter doesn't play while Surah Fatiha is playing on background by another reciter.

Steps:

1. Play Surah Fatiha for any reciter
2. While the surah is playing, go to another reciter
3. Tried to Play Surah Fatiha, but it fails

Using audio to sync with verses

Assalamualaikum I appreciate the work all you have done, you have contribute so much mashaallah.

I want to ask, is there a way I can access data to sync the audio with each ayah? e.g. is there some data on verses/words that are being recited? Is there a method of doing that?

UI

Some beautiful UI shared by AhmedGalal.

test

Close audio player dialog

There's no way to stop the player. We can only pause it.

Documentation

Documentations:

• Api
• Objective for the MVP

Filter are mistakenly carried over to the chapters list

When setting a filter in reciters list and choose one e to open the filter is carried over to the next screen.

Audio minimize button not working

Title is clipped

Setup

• Find a Router/Navigator
• Redux/ Redux Saga
• Audio Player (supports mp3 via HTTP)
• Prototype a UI, maybe follow haramain app (https://itunes.apple.com/us/app/haramain/id1120580567?mt=8) @ahmedre please share any sketch or zeplin files