javascript - Quran Recitation with related verse highlighted script -

i have requirement have play specific verses quran (mp3) , on other hand highlight same verse in actual quran. similar http://www.quranexplorer.com/quran/.

they break each chapter of holy quran n number of verses , play each verse , highlight same span or div tag.

holy quran has 6236 verses mean need create 6236 mp3 files.

is there software or script can create auto script or best way solution.

solution can jquery based requirement .net project

you need use html audio dom refrence work. using html dom refrence can manage audio player , playing audio. can play audio, stop audio, load audio , add event. create example @ bottom. when click on button, player start playing of first sound , highlight first word. when first sound ended, player start playing of next sound , 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 source of audio, onended event fired when playlist ended.

you can see html audio/video dom refrence in this