Preload mp3 file in queue to avoid any delay in playing the next file in queue

Spread the love

Question Description

I am working on a script where i am playing multiple mp3 and each files is in queue. There is slight delay in playing next .mp3 file as it takes time to buffer/load the file.

How can i buffer the next .mp3 file which is queue so that all file run smoothly without any delay.

 getData(1);

 function getData(id) {
   //Emty div
   $("#surah-wrapper").empty();

   $.ajaxSetup({
 cache: true,
 jsonpCallback: 'quranData'
   }); // define ajax setup 
   // Quran Text Type quran-uthmani | quran-simple | quran-simple-clean | quran-wordbyword
   $.getJSON("http://api.globalquran.com/surah/" + id + "/quran-uthmani?key=api_key&jsoncallback=?", {
 format: "jsonp"
   }, function(data) {
 if (id > 1) {
   $("").html("بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ").appendTo("#surah-wrapper");
 }
 $.each(data.quran, function(i, by) {
   $.each(by, function(verseNo, line) {
     //$("

").html('('+ line.surah+':'+line.ayah+') '+line.verse).appendTo("#surah-wrapper"); $("").html(line.verse + '(' + line.surah + ':' + line.ayah + ')').appendTo("#surah-wrapper"); }); }); }); } //Play Script & highlight script var audioIndex = 0; var countSpan = 0; countSpan = $('#surah-wrapper').children().length; var surahNo = 1; var strCat = "http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001004.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001005.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001006.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001007.mp3"; setPlayer(); $('.customSurah').change(function() { $('.play-btn').css('display', 'none'); $aud.pause(); surahNo = $('#surah option:selected').val(); setTimeout(function() { countSpan = $('#surah-wrapper').children().length; var i = 0; strCat = ''; for (i = 0; i <= countSpan; i++) { if (i == 0) { strCat = "http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,"; i += 1 } if (i == countSpan) { if (surahNo == 1) { } else { if (i < 10) { strCat += "http://download.quranicaudio.com/verses/Sudais/mp3/00" + surahNo + "00" + i + ".mp3,"; } } } else { if (i < 10) { strCat += "http://download.quranicaudio.com/verses/Sudais/mp3/00" + surahNo + "00" + i + ".mp3,"; } } } if (surahNo == 1) { strCat = null; strCat = "http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001004.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001005.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001006.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001007.mp3"; } setPlayer(); $('.play-btn').css('display', 'block'); }, 3000); }); function setPlayer() { //reset values audioIndex = 0; countSpan = 0; countSpan = $('#surah-wrapper').children().length; strCat = strCat.trim(); var audioTracks = strCat; var audioAddress = audioTracks.split(','); var playing = false; $(function() { $aud = $("#myAudio")[0]; $btn = $(".play-btn"); function setAudio(index) { $("#surah-wrapper > .qspan").removeClass("qplaying"); $aud.preload = 'auto'; $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"); $(".play-btn").css("background-image", "url(https://cdn0.iconfinder.com/data/icons/cosmo-player/40/button_play_1-64.png)"); }; $aud.onplay = function() { $btn.text("Pause"); $(".play-btn").css("background-image", "url(https://cdn0.iconfinder.com/data/icons/cosmo-player/40/button_pause_1-64.png)"); playing = true; $("#surah-wrapper > .qspan:nth-child(" + (audioIndex + 1) + ")").addClass("qplaying"); var wHeight = $(window).height(); var wHalfHeight = wHeight; var x = $(".qplaying").offset(); var curentSpanPosition = x.top; wHalfHeight = wHalfHeight / 2; if (curentSpanPosition > wHalfHeight) { $('html, body').animate({ scrollTop: curentSpanPosition - 50 }, 1000); } }; }); }

.play-btn {
  background-image: url("https://cdn0.iconfinder.com/data/icons/cosmo-player/40/button_play_1-64.png");
  float: none;
  font-size: 0 !important;
  height: 50px;
  margin: 15px auto;
  padding: 5px 10px;
  text-align: center;
  width: 50px;
}
body{float:right; direction:rtl;}
span{padding:5px 10px; direction:rtl; text-align:right;
  margin:5px 1px;
font-size:20px}
.qplaying {
  background: #f00 none repeat scroll 0 0;
}

         

       
         

THIS IS THE ACTUAL SCRIPT that i want to implement same: I would appreciate solution in context with script mentioned in the fiddle.

http://codepen.io/anon/pen/pRKreo

Practice As Follows

Here’s you go. The biggest challenge I had was handling the value of this within the handler. Set your elements to preload="none". My script loads the next song as soon as you play one before it and auto-plays next song once first one finishes.

If you’re worried about Global Scope just put it in an IIFE. Enjoy!

var files = document.getElementsByTagName('audio');
var songs = [];
var index = 0;

var Song = function(element) {

this.index = index;
this.playing = function(event) {
	try {
		files[this.index].preload = "auto";
	}
	catch (e) {

	}
};
this.ended = function(event) {
	try {
		files[this.index].play();
	}
	catch (e) {

	}
};
element.addEventListener('playing', this.playing.bind(this), false);
element.addEventListener('ended', this.ended.bind(this), false); // Trick
};

for (var len = files.length, i = 0; i < len; ++i) {
index++;
songs.push(new Song(files[i]));
}
ul{
  list-style: none;
}


    
    HTML5 Media Auto Player Skeleton
    



        
    
  • HTML5 Media Player w Auto Next

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.