We Keep Coding

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

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) {
$("<span class='qspan qspan-bsm'>").html("بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ").appendTo("#surah-wrapper");
}
$.each(data.quran, function(i, by) {
$.each(by, function(verseNo, line) {
//$("<p>").html('('+ line.surah+':'+line.ayah+') '+line.verse).appendTo("#surah-wrapper");
$("<span class='qspan' id='" + verseNo + "'>").html(line.verse + '<span class="qspan-ayahno">(' + line.surah + ':' + line.ayah + ')</span>').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;
}
<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>
<div class="play-btn-wrapper">
<select class="customSurah form-control ddCountry styled-select" id="surah" name="surah" onchange="getData($('#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 class="play-btn"></div>
</div>
<div id="surah-wrapper"></div>
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

Here's you go. The biggest challenge I had was handling the value of this within the handler. Set your <audio> 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;
}
<!DOCTYPE html>
<html lang="en">
<meta name="description" content="HTML5 Media Auto Player Skeleton" />
<title>HTML5 Media Auto Player Skeleton</title>
<style>
</style>
</head>
<body>
<main>
<ul>
<li class="album">
<h3 class="album-title">HTML5 Media Player w Auto Next</h3>
</li>
<li>
<audio controls="controls" class="full-width" preload="metadata">
<source src="//rack.international/samples/AttritionDantesKitchenwWHellmixSAMPLE.mp3" type="audio/mpeg">
<source src="//rack.international/samples/AttritionDantesKitchenwWHellmixSAMPLE.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</li>
<li>
<audio controls="controls" class="full-width" preload="metadata">
<source src="//rack.international/samples/AttritionDantesKitchenRascalKlonermxSAMPLE3.mp3" type="audio/mpeg">
<source src="//rack.international/samples/AttritionDantesKitchenRascalKlonermxSAMPLE3.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</li>
<li>
<audio controls="controls" class="full-width" preload="metadata">
<source src="//rack.international/samples/crankRingtone.mp3" type="audio/mpeg">
<source src="//rack.international/samples/crankRingtone.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</li>
</body>
</html>

You can use Promise.all(), Array.prototype.map(), Audio() constructor, canplaythrough event to load all audio first; then use Array.prototype.reduce(), Promise constructor to play audio in sequence at ended event.
var audioAddress = [
"http://download.quranicaudio.com/verses/Sudais/mp3/003001.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003002.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003003.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003004.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003005.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003006.mp3"
];
$("button").click(function() {
Promise.all(audioAddress.map(function(url) {
return new Promise(function(resolve) {
var audio = new Audio(url);
audio.oncanplay = function() {
resolve(audio);
}
})
}))
.then(function(data) {
data.reduce(function(promise, a, index) {
return promise.then(function() {
return new Promise(function(resolve) {
a.onended = resolve;
a.play();
$("p > span").removeClass("playing");
$("p > span:nth-child(" + (index + 1) + ")")
.addClass("playing");
})
})
}, Promise.resolve())
})
});
#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>
<button>Play Audio</button>
<p>
<span>Verse 1</span>
<span>Verse 2</span>
<span>Verse 3</span>
<span>Verse 4</span>
<span>Verse 5</span>
<span>Verse 6</span>
</p>
You can also create a mix of the sequence of audio tracks to play as a single track Is it possible to mix multiple audio files on top of each other preferably with javascript and use AudioContext.linearRampToValueAtTime Web audio api, stop sound gracefully.

End of Video Banner Image

Using code below to run video in my banner on Squarespace. Would like it so that when video ends banner loads banner image. Can't seem to get it to work. Any help would be greatly appreciated. Btw, totally new to scripting.
Thanks!
<script type="text/javascript">
$(window).bind("load", function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
} else {
var banner = $('#pageWrapper img').first();
if (banner.length === 0)
banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first();
if (banner.length === 0)
banner = $('#parallax-images img').first();
if (banner.length === 0)
banner = $('.has-main-image img').first();
if (banner.length === 0)
banner = $('#page-thumb img').first();
var url = "VIDEOHERE";
banner.hide();
$('<video class="bannerVideo" autoplay="" preload><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
adjustBanner($('.bannerVideo'), banner);
setTimeout(function() {
adjustBanner($('.bannerVideo'), banner);
}, 2000);
$(window, banner).resize(function() {
adjustBanner($('.bannerVideo'), banner);
setTimeout(function() {
adjustBanner($('.bannerVideo'), banner);
}, 200);
});
}
function adjustBanner (video, banner) {
video.css({
height: banner.css('height'),
width: banner.css('width'),
top: banner.css('top'),
left: banner.css('left'),
position: 'relative',
'object-fit': 'inherit'
});
}
});
</script>

You can attach an onended event listener after you have inserted the video.
var video = querySelector('.bannerVideo');
video.onended = function() {
// Display Image
adjustBanner($('.bannerVideo'), banner);
}

How do I pause an HTML video and resume automatically over a loop?

I have a 4 second long video embedded in my HTML page using video tag. I need to pause the video for 2 secs first at 2.99s, 3.44s and then at 4.00s. For that to happen the video needs to resume from previous instance.
But after long hours of effort I haven't been able to find a solution. Thus far I have just been able to get the video paused for >=2.99s but it does not resume even after I had used setInterval function.
Here is the code:
var vTag = document.getElementById('video');
setInterval(function() { pVideo();}, 2000);
function pVideo() {
vTag.ontimeupdate = function(e) {
cTime = vTag.currentTime;
(cTime >= 2.9 || cTime >= 3.44 || cTime >= 4.00) ? vTag.pause(): vTag.play();
};
};
PS: The video is being used as a background video for header section.

Try this.. this is a fully working code
HTML
<video id="video" autoplay muted loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
JS
var vTag = document.getElementById('video');
vTag.play();
var wasPausedBefore1 = 0;
var wasPausedBefore2 = 0;
var wasPausedBefore3 = 0;
vTag.ontimeupdate = function(e) {
cTime = vTag.currentTime;
if (cTime < 1) {
wasPausedBefore1 = 0;
wasPausedBefore2 = 0;
wasPausedBefore3 = 0;
} else if (cTime > 2.8 && cTime < 3.1 && wasPausedBefore1 == 0) {
vTag.pause();
wasPausedBefore1 = 1;
setTimeout(function() {
vTag.play();
}, 4000);
} else if(cTime > 3.3 && cTime < 3.6 && wasPausedBefore2 == 0){
vTag.pause();
wasPausedBefore2 = 1;
setTimeout(function() {
vTag.play();
}, 4000);
} else if(cTime > 3.8 && cTime < 4.0 && wasPausedBefore3 == 0){
vTag.pause();
wasPausedBefore3 = 1;
setTimeout(function() {
vTag.play();
}, 4000);
}
};
And here is a working fiddle : https://jsfiddle.net/o9mknsx0/1/

You'll need to update your if statement to track the pause values somehow, otherwise your video will not play because after 2.9 seconds, the if will always return true for all those conditions.
var vTag = document.getElementById('video');
setInterval(pVideo, 2000); //function reference
var nextPause = [2.9, 3.44, 4.00];
var pauseIndex = 0;
function pVideo() {
vTag.ontimeupdate = function(e) {
cTime = vTag.currentTime;
var pauseTime = nextPause[pauseIndex];
if (cTime >= pauseTime) {
vTag.pause();
setTimeout(vTag.play, 2000); //unpause after 2 seconds
if (++index <= nextPause.length) index++
else index = 0;
}
}
};
This is untested and my logic may be flawed, but I feel like the concept is sound.
Put all your pause times into an array, and track the last used index (resetting as well, if need be (looping video)). Then, if the if statement matches, pause the video and run a timeout for 2 seconds to play the video again.

Use setTimeout instead of setInterval.
I'm not sure if you'd be able to catch the times you need using timeupdate since it fires either every 200ms or 250ms but I'd do it like so:
var vTag = document.getElementById('video');
vTag.addEventListener('timeupdate', function() {
var cTime = vTag.currentTime;
if(cTime === 2.99 || cTime === 3.44 || cTime === 4)) {
vTag.pause();
setTimeout(function() {
vTag.play();
}, 2000);
}
});
For it to catch your times like 2.99 and 3.44 then you need to poll for it every 10ms using setInterval.
setInterval(function() {
var cTime = vTag.currentTime;
if(cTime === 2.99 || cTime === 3.44 || cTime === 4) {
vTag.pause();
setTimeout(function() {
vTag.play();
}, 2000);
}
}, 10);

Anything Slider not playing video on second loop in IE9

I am using Anything slider in infinite slides with an HTML 5 video in one slide. The goal is to have the video run each time the slide loops. the problem is in IE9 it seems to break the slider on the second loop. The video does not play nor does it advance to the next slide, it just freezes.
onSlideInit: function (e, slider) {
var vid = slider.$lastPage.find('video');
if (vid.length && typeof (vid[0].pause) !== 'undefined') {
vid[0].pause();
}
},
onSlideBegin: function (e, slider) { },
onSlideComplete: function (slider) {
// make current slide conform to user define data-duration value
var video = slider.$lastPage.find('video');
console.log(video)
if (video.length > 0) {
video[0].currentTime = 0;
}
if (hasVideoSupport == "false") {
jwplayer("container").setup({
file: video,
flashplayer: "http://player.longtailvideo.com/player.swf",
height: 400,
width: 500
});
jwplayer().play()
slider.startStop(false);
onComplete(function () { slider.startStop(true) })
} else {
var vid = slider.$currentPage.find('video');
if (vid.length > 0) {
console.log(vid);
vid[0].play();
}
}
},
Thanks for the help

calling the next item in my array

right now I have an array of videos. How do I make it so when i click next and prev the next or previous video in the array loads.
<video id="video" controls autoplay width="1000">
<source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/test.ogv" />
</video>
next
<script>
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array
function vidSwap(vidURL) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}

Using yout code, it'll be something like this.
What you need to do is have the video that you loaded on a javascript variable.
Then, when you click prev or next you can call a function that will put the correct video number and call it.
<script>
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos"]
var video = 0;
function vidSwap() {
var myVideo = document.getElementsByTagName('video')[video];
myVideo.src = vidURL[video];
myVideo.load();
myVideo.play();
}
function prevVideo() {
if(video == 0) {
video = vidUrl.length;
}
else {
video -= 1;
}
vidSwap();
}
function nextVideo() {
if(video == length) {
video = 0;
}
else {
video += 1;
}
vidSwap();
}
</script>
<video id="video" controls autoplay width="1000">
<source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/test.ogv" />
</video>
prev
next

Introduce variable which will save current video index, then increment it or decrement it each time you press next/prev
</script>
var i = 0;
<script>
javascript:vidSwap(vidURL[i++])

It looks like you're missing another plus sign in your increment operator.
Try changing
next
To this
next

Wrapped up alternative with wrap-around;
next
prev
...
var Vids = (function() {
var _currentId = -1;
var _urls = ["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array
return {
next: function() {
if (++_currentId >= _urls.length)
_currentId = 0;
return this.play(_currentId);
},
prev: function() {
if (--_currentId < 0)
_currentId = _urls.length - 1;
return this.play(_currentId);
},
play: function(id) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = _urls[id];
myVideo.load();
myVideo.play();
return false;
}
}
})();