Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
    <!DOCTYPE html>
    <html>
    <head>
      <style>
      #surah-wrapper{ 
      color:black; 
      font-size:28px; 
      direction:rtl;
      max-width:50%;
      padding: 30px;
      margin:0 auto;
      text-align:right;
      }
.verseno{margin:0 0px; font-size:23px;}   
#myAudio {
    display: none;
}
span {
    margin: 0px 0px 0px 5px;
    line-height:42px;
    
}
.playing {
    background: #eee;
}
      </style>
      
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <audio id="myAudio">
    <source src="" type="audio/mpeg">
    </audio>
    <button>Play Audio</button>     
    
        <select class="customSurah" id="surah" name="surah" onchange="DataByParam($('#surah option:selected').val())"><option value="1">Al-Faatiha</option><option value="2">Al-Baqara</option><option value="3">Aal-i-Imraan</option><option value="4">An-Nisaa</option><option value="5">Al-Maaida</option><option value="6">Al-An'aam</option><option value="7">Al-A'raaf</option><option value="8">Al-Anfaal</option><option value="9">At-Tawba</option><option value="10">Yunus</option><option value="11">Hud</option><option value="12">Yusuf</option><option value="13">Ar-Ra'd</option><option value="14">Ibrahim</option><option value="15">Al-Hijr</option><option value="16">An-Nahl</option><option value="17">Al-Israa</option><option value="18">Al-Kahf</option><option value="19">Maryam</option><option value="20">Taa-Haa</option><option value="21">Al-Anbiyaa</option><option value="22">Al-Hajj</option><option value="23">Al-Muminoon</option><option value="24">An-Noor</option><option value="25">Al-Furqaan</option><option value="26">Ash-Shu'araa</option><option value="27">An-Naml</option><option value="28">Al-Qasas</option><option value="29">Al-Ankaboot</option><option value="30">Ar-Room</option><option value="31">Luqman</option><option value="32">As-Sajda</option><option value="33">Al-Ahzaab</option><option value="34">Saba</option><option value="35">Faatir</option><option value="36">Yaseen</option><option value="37">As-Saaffaat</option><option value="38">Saad</option><option value="39">Az-Zumar</option><option value="40">Al-Ghaafir</option><option value="41">Fussilat</option><option value="42">Ash-Shura</option><option value="43">Az-Zukhruf</option><option value="44">Ad-Dukhaan</option><option value="45">Al-Jaathiya</option><option value="46">Al-Ahqaf</option><option value="47">Muhammad</option><option value="48">Al-Fath</option><option value="49">Al-Hujuraat</option><option value="50">Qaaf</option><option value="51">Adh-Dhaariyat</option><option value="52">At-Tur</option><option value="53">An-Najm</option><option value="54">Al-Qamar</option><option value="55">Ar-Rahmaan</option><option value="56">Al-Waaqia</option><option value="57">Al-Hadid</option><option value="58">Al-Mujaadila</option><option value="59">Al-Hashr</option><option value="60">Al-Mumtahana</option><option value="61">As-Saff</option><option value="62">Al-Jumu'a</option><option value="63">Al-Munaafiqoon</option><option value="64">At-Taghaabun</option><option value="65">At-Talaaq</option><option value="66">At-Tahrim</option><option value="67">Al-Mulk</option><option value="68">Al-Qalam</option><option value="69">Al-Haaqqa</option><option value="70">Al-Ma'aarij</option><option value="71">Nooh</option><option value="72">Al-Jinn</option><option value="73">Al-Muzzammil</option><option value="74">Al-Muddaththir</option><option value="75">Al-Qiyaama</option><option value="76">Al-Insaan</option><option value="77">Al-Mursalaat</option><option value="78">An-Naba</option><option value="79">An-Naazi'aat</option><option value="80">Abasa</option><option value="81">At-Takwir</option><option value="82">Al-Infitaar</option><option value="83">Al-Mutaffifin</option><option value="84">Al-Inshiqaaq</option><option value="85">Al-Burooj</option><option value="86">At-Taariq</option><option value="87">Al-A'laa</option><option value="88">Al-Ghaashiya</option><option value="89">Al-Fajr</option><option value="90">Al-Balad</option><option value="91">Ash-Shams</option><option value="92">Al-Lail</option><option value="93">Ad-Dhuhaa</option><option value="94">Ash-Sharh</option><option value="95">At-Tin</option><option value="96">Al-Alaq</option><option value="97">Al-Qadr</option><option value="98">Al-Bayyina</option><option value="99">Az-Zalzala</option><option value="100">Al-Aadiyaat</option><option value="101">Al-Qaari'a</option><option value="102">At-Takaathur</option><option value="103">Al-Asr</option><option value="104">Al-Humaza</option><option value="105">Al-Fil</option><option value="106">Quraish</option><option value="107">Al-Maa'un</option><option value="108">Al-Kawthar</option><option value="109">Al-Kaafiroon</option><option value="110">An-Nasr</option><option value="111">Al-Masad</option><option value="112">Al-Ikhlaas</option><option value="113">Al-Falaq</option><option value="114">An-Naas</option></select>
​
    <div id="surah-wrapper"></div>
    
    
    <script>
    //$.ajaxSetup({ cache: true, jsonpCallback: 'quranData' }); // define ajax setup
    //$.getJSON("http://api.globalquran.com/surah/2/quran-simple?key=a5e1d12cda745cd984ee1b0b5c847dd46&jsoncallback=?", {
    //$.getJSON("http://api.globalquran.com/surah/2/quran-simple?key=a5e1d12cda745cd984ee1b0b5c847dd46&jsoncallback=?", {
    //    format : "jsonp"
    //}, function(data)
    //{    
     //   $.each(data.quran, function(i, by)
    //    {
    //  $.each(by, function (verseNo, line) {
    //          // $("<p>").html('('+ line.surah+':'+line.ayah+') '+line.verse).appendTo("#surah-wrapper");
    //          //$("<span>").html(line.verse + ' (' +line.surah + ':' + line.ayah + ') ').appendTo("#surah-wrapper");
    //          $("<span>").html(line.verse + ' <span class="verseno">(' + line.ayah + ')</span> ').appendTo("#surah-wrapper");
    //  });
    //    });
    //});
    
    DataByParam(1);
    function DataByParam(id){
    //alert(id);
        //Emty div
        $( "#surah-wrapper" ).empty();
    //surahNo = id;
    
     //console.log(surhaNo);
        $.ajaxSetup({ cache: true, jsonpCallback: 'quranData' }); // define ajax setup
    $.getJSON("http://api.globalquran.com/surah/" + id + "/quran-simple?key=api_key&jsoncallback=?", {
        format : "jsonp"
    }, function(data)
    {    
        $.each(data.quran, function(i, by)
        {
        $.each(by, function (verseNo, line) {
               // $("<p>").html('('+ line.surah+':'+line.ayah+') '+line.verse).appendTo("#surah-wrapper");
                $("<span>").html(line.verse + '&nbsp;(' +line.surah + ':' + line.ayah + ') &nbsp; ').appendTo("#surah-wrapper");
        });
        });
    });
      }
    
    //Play Script & highlight script
var audioIndex = 0;
​
var countSpan = 0;
countSpan = $('#surah-wrapper').children().length;  
​
var surahNo = 1;
var strCat;
$('.customSurah').change(function(){
    
    surahNo = $('#surah option:selected').val();
    
    setTimeout(function(){ 
    countSpan = $('#surah-wrapper').children().length;
    
    //surahNo = 1;
    //countSpan = 7;
    var i=0;
         for (i = 0; i <= countSpan; i++) {
            strCat += surahNo+"/"+i+".mp3,";
            console.log(strCat);
        //alert(strCat);
        }
    
    }, 3000);
    
    //setTimeout(function(){ 
    //countSpan = $('#surah-wrapper').children().length;
    //}, 4000); 
    
     
    console.log($('#surah option:selected').val());
    
    //setTimeout(function(){ console.log($('#surah-wrapper').children().length);}, 2000);
    
 });
​
​
 
​
 
//  setTimeout(function(){ 
//   for (i = 0; i < countSpan; i++) {
//      strCat = strCat + surahNo+"/"+i+".mp3";
        //console.log(strCat);
//  }
//  alert(strCat);
//}, 3000); 
​
//alert(strCat);
 
var audioTracks = "001/1.mp3,001/2.mp3,001/3.mp3, 001/4.mp3, 001/5.mp3,001/6.mp3,001/7.mp3";
//alert (audioTracks);
​
//console.log(audioTracks.split(','));
​
var audioAddress = audioTracks.split(',');
​
var playing = false;
​
$(function() {
​
  $aud = $("#myAudio")[0];
  $btn = $("button");
​
  function setAudio(index) {
    $("#surah-wrapper > span").removeClass("playing");
    $aud.src = audioAddress[index];
  }
​
  setAudio(audioIndex);
​
  $btn.click(function() {
    if (playing) {
      playing = false;
      $aud.pause();
    } else
      $aud.play();
  });
​
  $aud.onended = function() {
    if (audioIndex < audioAddress.length - 1) {
      audioIndex++;
      setAudio(audioIndex);
      $aud.play();
    } else {
      audioIndex = 0;
      setAudio(audioIndex);
      playing = false;
      $btn.text("Play");
    }
  };
​
  $aud.onpause = function() {
    if (!playing) $btn.text("Play");
  };
​
  $aud.onplay = function() {
    $btn.text("Pause");
    playing = true;
    $("#surah-wrapper > span:nth-child(" + (audioIndex + 1) + ")").addClass("playing");
  };
});
    </script>
    </body>
    </html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers