Quran Recitation with related verse highlighted script

Question

I have a requirement where i have to play specific verses from Quran (mp3) and on the other hand highlight the same verse in actual Quran. something similar to this http://www.quranexplorer.com/quran/.

They usually break each chapter of Holy Quran into N number of verses and play each verse and highlight the same span or div tag.

Holy Quran has about 6236 verses that mean i need to create 6236 mp3 files.

Is there any software or script that can create auto script or what is the best way for the solution.

Solution can be jquery based as requirement is for .net project

Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it. — Liam, May 09 '16 at 10:17
You probably need a timing text file which shows time for playing of each verse by each reciter. For the split of verse by verse there are few open source projects as well you can find it here [link](http://www.versebyversequran.com/site/) — Ramin, May 09 '16 at 10:20

Mohammad · Accepted Answer · 2016-05-09T13:54:38.243

You need to use HTML audio DOM refrence to do this work. Using HTML DOM refrence you can manage audio player and playing audio. You can play audio, stop audio, load audio and add event. I create example at bottom. When you click on button, player start playing of first sound and highlight first word. When first sound ended, player start playing of next sound and highlight next word.

var audioIndex = 0;
var audioAddress = [
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/caca5b5fcde48f9",
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/9cd6976b1ce3b76",
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/5d4ab0a4db5e7b4",
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/0f5e54eda37e7f0",
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/4597608ea80a312",
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/6c4ae634173cc83"
];

$("button").click(function(){
    audioIndex = 0;
    playAudio(0);
});

$("#myAudio")[0].onended = function() {
    audioIndex += 1;
    playAudio(audioIndex);
};

function playAudio(index)
{
    $("p > span").removeClass("playing");
    $("#myAudio")[0].src = audioAddress[index];  
    $("#myAudio")[0].play();
    $("p > span:nth-child(" + (index + 1) + ")").addClass("playing");
}

#myAudio {
    display: none;
}
span {
    margin: 0px 10px;
}
.playing {
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="myAudio">
    <source src="" type="audio/mpeg">
</audio>
<button>Play Audio</button>
<p>
    <span>Rooster</span>
    <span>Cat</span>
    <span>Horse</span>
    <span>Elephant</span>
    <span>Vulture</span>
    <span>Duck</span>
</p>

play() method start playing, src property get source of audio, onended event fired when playlist is ended.

You can see HTML audio/video DOM refrence in this

Appreciate your reply. It is beautifully done. Thanks Mr. Mohammad. I will try and implement your solution. — Learning, May 10 '16 at 05:58
I have tried it with Surah Fatiha and it works perfectly. Just one question not sure how to scroll down if Surah is very long and pointer would be helpful. I just want to keep the highlighted area visible to the user — Learning, May 10 '16 at 08:24
@Learning See http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Mohammad, May 10 '16 at 08:44

Quran Recitation with related verse highlighted script

1 Answers1