<!doctype html>
<html>
<head>
<title>Splicing Audio - RJM Programming - August, 2016</title>
<script type='text/javascript'>

var audioobj=[];
var audiofiles=['','','','','','','','',''];
var audiotype=['Audio','Audio','Audio','Audio','Audio','Audio','Audio','Audio','Audio'];
var audiooverlay=['Optional','Optional','Optional','Optional','Optional','Optional','Optional','Optional','Optional',''];
var zero=0;
var delay=0.0;
var noneblock='block';
var hideform='on';
var hideformlater='off';
var burl='';
var wo=null;
var isaudio=true;
var lastvideo='';
var cmd='';
var spareaudiourl='';
var suffix='';

function overlaydosel(sio) {
audiooverlay[eval(-1 + eval(sio.id.replace('osel','')))]=sio.value;
}

function dosel(sio) {
audiotype[eval(-1 + eval(sio.id.replace('sel','')))]=sio.value;
}

function doinput(sio) {
audiofiles[eval(-1 + eval(sio.id.replace('audio','')))]=sio.value;
}

function noplus(inp) {
var outp=inp;
isaudio=true;
if (outp.indexOf(' ') == 0) outp=outp.replace(' ','');
if (outp.indexOf('+') == 0) outp=outp.replace('+','');
while (outp.indexOf('+') != -1) {
outp=outp.replace('+',' ');
}
if (outp != outp.trim()) {
if (eval(outp.length) > eval(1 + outp.trim().length)) {
//alert(9);
document.getElementById('audio' + eval(1 + zero)).value=outp.trim();
document.getElementById('sel' + eval(1 + zero)).value='Image';
audiotype[eval(0 + zero)]='Image';
document.body.style.opacity=0.6;
document.body.style.background=" url('" + outp.trim() + "')";
delay=5.0;
} else {
isaudio=false;
audiotype[eval(0 + zero)]='Video';
}
}
return outp.trim();
}

function fixtypes() {
var sparef;
for (var ii=1; ii<=audiofiles.length; ii++) {
if (audiofiles[eval(-1 + ii)].indexOf('+') == 0) {
audiooverlay[eval(-1 + ii)]='Overlay';
audiofiles[eval(-1 + ii)]=audiofiles[eval(-1 + ii)].substring(1);
} else if (audiofiles[eval(-1 + ii)].indexOf(' ') == 0) {
audiooverlay[eval(-1 + ii)]='Overlay';
audiofiles[eval(-1 + ii)]=audiofiles[eval(-1 + ii)].substring(1);
}
if (audiofiles[eval(-1 + ii)].indexOf('++') != -1 || eval(audiofiles[eval(-1 + ii)].length) > eval(1 + audiofiles[eval(-1 + ii)].trim().length)) {
document.getElementById('sel' + ii).value = 'Image';
audiotype[eval(-1 + ii)]='Image';
} else if (audiofiles[eval(-1 + ii)].indexOf('+') != -1 || eval(audiofiles[eval(-1 + ii)].length) > eval(audiofiles[eval(-1 + ii)].trim().length)) {
document.getElementById('sel' + ii).value = 'Video';
audiotype[eval(-1 + ii)]='Video';
}
}
for (var ii=2; ii<=audiofiles.length; ii++) {
if (audiooverlay[eval(-1 + ii)] == 'Overlay' && audiooverlay[eval(-2 + ii)] != 'Overlay') {
//alert(990 + ' ... ' + audiotype[eval(-1 + ii)] + ' ... ' + audiotype[eval(-2 + ii)]);
if (audiotype[eval(-1 + ii)] == 'Video' && audiotype[eval(-2 + ii)] == 'Audio') {
//alert(99);
sparef=audiofiles[eval(-2 + ii)];
audiofiles[eval(-2 + ii)]=audiofiles[eval(-1 + ii)];
audiofiles[eval(-1 + ii)]=sparef;
audiotype[eval(-2 + ii)]='Video';
audiotype[eval(-1 + ii)]='Audio';
document.getElementById('audio' + eval(-1 + ii)).value=audiofiles[eval(-2 + ii)].replace('+','').replace('+','').replace('+','');
document.getElementById('audio' + eval(ii)).value=audiofiles[eval(-1 + ii)].replace('+','').replace('+','').replace('+','');
//alert(99);
}
}
}
}

function fixtype() {
var typeis, ovis, prefix='';
for (var ii=1; ii<=audiofiles.length; ii++) {
if (document.getElementById('osel' + ii).value != audiooverlay[eval(-1 + ii)]) document.getElementById('osel' + ii).value = audiooverlay[eval(-1 + ii)];
if (document.getElementById('sel' + ii).value != audiotype[eval(-1 + ii)]) document.getElementById('sel' + ii).value = audiotype[eval(-1 + ii)];
if (document.getElementById('audio' + ii).value != audiofiles[eval(-1 + ii)]) document.getElementById('audio' + ii).value = audiofiles[eval(-1 + ii)].replace('+',' ').replace('+',' ').replace('+',' ');
ovis=document.getElementById('osel' + ii).value;
prefix='';
if (ovis == 'Overlay') prefix=' ';
typeis=document.getElementById('sel' + ii).value;
if (typeis.indexOf('ideo') != -1) {
audiotype[eval(-1 + ii)]='Video';
fis=document.getElementById('audio' + ii).value;
if (fis != '') document.getElementById('audio' + ii).value=prefix + document.getElementById('audio' + ii).value.trim() + ' ';
} else if (typeis.indexOf('mage') != -1) {
audiotype[eval(-1 + ii)]='Image';
fis=document.getElementById('audio' + ii).value;
if (fis != '') document.getElementById('audio' + ii).value=prefix + document.getElementById('audio' + ii).value.trim() + ' ';
} else {
audiotype[eval(-1 + ii)]='Audio';
fis=document.getElementById('audio' + ii).value;
if (fis != '') document.getElementById('audio' + ii).value=prefix + document.getElementById('audio' + ii).value.trim();
}
}
}

function fixhide() {
var sofar='off', typeis='', fis='';
if (document.getElementById('hideform').checked) {
sofar='on';
}
if (document.getElementById('hideformlater').checked) {
sofar+='on';
} else {
sofar+='off';
}
document.getElementById('hide').value=sofar;
fixtype();
}

function precheckget() {
if (wo && wo.closed) {
wo=null;
zero++;
setTimeout(checkget, 20);
} else {
setTimeout(precheckget, 100);
}
}

function checkget() {
var i, xv, ssrc;
delay=0.0;
cmd='';
if (spareaudiourl == '') spareaudiourl=document.getElementById('spareaudio').src;
if (zero == 0) {
audiofiles[0]=location.search.split('audio1=')[1] ? decodeURIComponent(location.search.split('audio1=')[1].split('&')[0]) : '';
audiofiles[1]=location.search.split('audio2=')[1] ? decodeURIComponent(location.search.split('audio2=')[1].split('&')[0]) : '';
audiofiles[2]=location.search.split('audio3=')[1] ? decodeURIComponent(location.search.split('audio3=')[1].split('&')[0]) : '';
audiofiles[3]=location.search.split('audio4=')[1] ? decodeURIComponent(location.search.split('audio4=')[1].split('&')[0]) : '';
audiofiles[4]=location.search.split('audio5=')[1] ? decodeURIComponent(location.search.split('audio5=')[1].split('&')[0]) : '';
audiofiles[5]=location.search.split('audio6=')[1] ? decodeURIComponent(location.search.split('audio6=')[1].split('&')[0]) : '';
audiofiles[6]=location.search.split('audio7=')[1] ? decodeURIComponent(location.search.split('audio7=')[1].split('&')[0]) : '';
audiofiles[7]=location.search.split('audio8=')[1] ? decodeURIComponent(location.search.split('audio8=')[1].split('&')[0]) : '';
audiofiles[8]=location.search.split('audio9=')[1] ? decodeURIComponent(location.search.split('audio9=')[1].split('&')[0]) : '';
fixtypes();
var hide=location.search.split('hide=')[1] ? decodeURIComponent(location.search.split('hide=')[1].split('&')[0]) : 'offoff';
document.getElementById('hide').value=hide;
if (hide.substring(0,2) == 'on') {
hideform='on';
} else {
hideform='off';
}
hide=hide.replace(hideform,'');
//hideform=location.search.split('hideform=')[1] ? decodeURIComponent(location.search.split('hideform=')[1].split('&')[0]) : hideform;
hideformlater=hide; //location.search.split('hideformlater=')[1] ? decodeURIComponent(location.search.split('hideformlater=')[1].split('&')[0]) : hideformlater;
if (hideform == 'on') document.getElementById('hideform').checked=true;
if (hideformlater == 'on') document.getElementById('hideformlater').checked=true;
burl=location.search.split('background=')[1] ? decodeURIComponent(location.search.split('background=')[1].split('&')[0]) : burl;
if (burl != '') {
document.getElementById('background').value=burl;
document.body.style.background=" url('" + burl + "')";
if (hideform != 'on') {
document.body.style.opacity=0.6;
} else {
noneblock='none';
}
} else {
if (hideform == 'on') noneblock='none';
}
if (audiofiles[eval(0 + zero)] != '') {
document.getElementById('subis').value='Currently Playing ...';
}
}
if (lastvideo != '') {
document.getElementById(lastvideo).style.display='none';
lastvideo='';
}
if (audiofiles[eval(0 + zero)] != '') {
for (i=eval(1 + zero); i<=(1 + zero); i++) {
if (noplus(audiofiles[eval(0 + zero)]) != '') {
if (delay != 0.0) document.getElementById('audio' + i).value=noplus(audiofiles[eval(0 + zero)]);
//document.getElementById('iaudio' + i).src=audiofiles[eval(0 + zero)];
//document.getElementById('iaudio' + i).load();
//document.getElementById('iaudio' + i).play();
if (eval(delay) != 0.0) { // is an image
document.getElementById('subis').value='Currently Showing Image ' + eval(1 + zero) + ': ' + noplus(audiofiles[eval(0 + zero)]) + " for 5 seconds";
zero++;
if (zero < audiofiles.length) {
setTimeout(checkget, eval(1000 * delay));
}
delay=0.0;
} else if (noplus(audiofiles[eval(0 + zero)]).indexOf(' ') != -1) {
document.getElementById('subis').value='Currently Playing Audio ' + eval(1 + zero) + ': ' + noplus(audiofiles[eval(0 + zero)]) + " via Google Translate if you press speaker and am waiting for you to close that window.";
wo=window.open('https://translate.google.com/#auto/en/' + encodeURIComponent(noplus(audiofiles[eval(0 + zero)])),'_blank','top=50,left=50,width=600,height=600');
setTimeout(precheckget, 20);
} else {
if (isaudio == false) document.getElementById('sel' + eval(1 + zero)).value='Video';
if (!isaudio) {
xv=document.createElement("VIDEO");
xv.autoplay = true;
xv.src = noplus(audiofiles[eval(0 + zero)]);
//xv.src=noplus(audiofiles[eval(0 + zero)]);
xv.id='video' + eval(1 + zero);
lastvideo=xv.id;
xv.style.position='absolute';
xv.style.top='10px';
xv.style.left='10px';
//xv.style.width='200px';
//xv.style.height='200px';
xv.style.zIndex='10';
xv.style.display='block';
//ssrc = document.createElement("source");
//ssrc.type = "video/mp4";
//ssrc.src = noplus(audiofiles[eval(0 + zero)]);
//xv.appendChild(ssrc);
xv.controls = true;
audioobj.push(xv);
var was=document.getElementById('spareaudio').src;
document.body.appendChild(xv);
//var sd=document.getElementById('sparediv');
//sd.appendChild(xv);
fixtype();
fixtypes();
//document.getElementById('spareaudio').src=was;

if (eval(1 + zero) < audiofiles.length && audiooverlay[eval(1 + zero)] == 'Overlay') {
//document.getElementById('formbits').style.display='none';
//hideform='on';
//noneblock='NONE';
suffix=' and ' + audiotype[eval(1 + zero)] + ' ' + eval(2 + zero) + ': ' + noplus(audiofiles[eval(1 + zero)]);
document.getElementById('spareaudio').src=spareaudiourl.replace("1=&", "1=" + encodeURIComponent(audiofiles[eval(1 + zero)]) + "&");
//alert('x: ' + document.getElementById('spareaudio').src);
//window.open(spareaudiourl.replace("1=&", "1=" + encodeURIComponent(audiofiles[eval(1 + zero)]) + "&"),"_blank","top=50,left=50,width=50,height=50");
xv.addEventListener('loadedmetadata', function() {
//alert("Playing " + audioobj[zero].src + ", for: " + audioobj[zero].duration + "seconds.");
delay+=xv.duration;
document.getElementById('subis').value='Currently Playing Video ' + eval(1 + zero) + ': ' + noplus(audiofiles[eval(0 + zero)]) + " for " + xv.duration + " seconds" + suffix;
suffix="";
zero++;
audioobj.push(xv);
zero++;
if (zero < audiofiles.length) {
setTimeout(checkget, eval(1000 * delay));
}
//alert(87);
xv.play();
});
} else {
xv.addEventListener('loadedmetadata', function() {
//alert("Playing " + audioobj[zero].src + ", for: " + audioobj[zero].duration + "seconds.");
delay+=xv.duration;
document.getElementById('subis').value='Currently Playing Video ' + eval(1 + zero) + ': ' + noplus(audiofiles[eval(0 + zero)]) + " for " + xv.duration + " seconds";
zero++;
if (zero < audiofiles.length) {
setTimeout(checkget, eval(1000 * delay));
}
xv.play();
});
}
} else if (delay == 0.0) {
eval("audioobj.push(new " + document.getElementById('sel' + eval(1 + zero)).value + "())"); // thanks to http://stackoverflow.com/questions/10868249/html5-audio-player-duration-showing-nan
//alert('zero=' + zero + ' ... ' + noplus(audiofiles[eval(0 + zero)]));
audioobj[eval(zero)].autoplay = true;
audioobj[eval(zero)].src=noplus(audiofiles[eval(0 + zero)]);
if (eval(1 + zero) < audiofiles.length && audiooverlay[eval(1 + zero)] == 'Overlay') {
suffix=' and ' + audiotype[eval(1 + zero)] + ' ' + eval(2 + zero) + ': ' + noplus(audiofiles[eval(1 + zero)]);
document.getElementById('spareaudio').src=spareaudiourl.replace("1=&", "1=" + encodeURIComponent(audiofiles[eval(1 + zero)]) + "&");
//alert(document.getElementById('spareaudio').src);
audioobj[zero].addEventListener('loadedmetadata', function() {
//alert("Playing " + audioobj[zero].src + ", for: " + audioobj[zero].duration + "seconds.");
delay+=audioobj[zero].duration;
document.getElementById('subis').value='Currently Playing Audio ' + eval(1 + zero) + ': ' + audioobj[zero].src + " for " + audioobj[zero].duration + " seconds" + suffix;
suffix="";
zero++;
//document.getElementById('spareaudio').src=spareaudiourl.replace("1=&", "1=" + encodeURIComponent(audiofiles[zero]) + "&");
audioobj.push(audioobj[eval(-1 + zero)]);
zero++;
if (zero < audiofiles.length) {
setTimeout(checkget, eval(1000 * delay));
}
audioobj[eval(-2 + zero)].play();
});
} else {
audioobj[zero].addEventListener('loadedmetadata', function() {
//alert("Playing " + audioobj[zero].src + ", for: " + audioobj[zero].duration + "seconds.");
delay+=audioobj[zero].duration;
document.getElementById('subis').value='Currently Playing Audio ' + eval(1 + zero) + ': ' + audioobj[zero].src + " for " + audioobj[zero].duration + " seconds";
zero++;
if (zero < audiofiles.length) {
setTimeout(checkget, eval(1000 * delay));
}
audioobj[eval(-1 + zero)].play();
});
}
}
}
} else {
document.getElementById('subis').value='Play Sequentially';
fixtype();
if (hideformlater != 'on') {
//alert(98);
document.getElementById('formbits').style.display='block';
document.getElementById('formbits').style.backgroundColor='yellow';
} else {
document.getElementById('formbits').style.display='none';
}
}
}
//alert(980);
document.getElementById('formbits').style.display=noneblock;
} else if (zero != 0) {
//alert(9800);
document.getElementById('formbits').style.display=noneblock;
document.getElementById('subis').value='Play Sequentially';
fixtype();
if (hideformlater != 'on') {
//alert(98000);
document.getElementById('formbits').style.display='block';
document.getElementById('formbits').style.backgroundColor='yellow';
} else {
document.getElementById('formbits').style.display='none';
}
} else {
//alert(980000);
document.getElementById('formbits').style.display=noneblock;
}
if (cmd != '') {
if (audiotype[zero] == 'Audio') {
document.getElementById('spareaudio').src=spareaudiourl.replace("1=&", "1=" + encodeURIComponent(audiofiles[zero]) + "&");
} else {
eval(cmd);
}
cmd='';
}
}

</script>
</head>
<body onload='checkget();'>
<div id='formbits' style='display:none;text-align:center; width: 100%; z-index:1; '>
<h1 style='text-align:center; width: 100%;'>Splicing Audio/Video/Image - RJM Programming - August, 2016</h1>
<form style='text-align:center; width: 100%;' method='GET' action='./splice_audio.htm'>
<select id='osel1' style='display:none;' onchange='overlaydosel(this);'><option value='Optional'>Optional</option></select>Optional <select id='sel1' onchange='dosel(this);'><option value='Audio'>Audio</option><option value='Video'>Video</option><option value='Image'>Image</option></select> File (or Text) 1: <input onblur='doinput(this);' style='width:50%;' type='text' name='audio1' id='audio1'></input><br>
<select id='osel2' onchange='overlaydosel(this);'><option value='Optional'>Optional</option><option value='Overlay'>Overlay</option></select> <select id='sel2' onchange='dosel(this);'><option value='Audio'>Audio</option><option value='Video'>Video</option><option value='Image'>Image</option></select> File (or Text) 2: <input onblur='doinput(this);' style='width:50%;' type='text' name='audio2' id='audio2'></input><br>
<select id='osel3' onchange='overlaydosel(this);'><option value='Optional'>Optional</option><option value='Overlay'>Overlay</option></select> <select id='sel3' onchange='dosel(this);'><option value='Audio'>Audio</option><option value='Video'>Video</option><option value='Image'>Image</option></select> File (or Text) 3: <input onblur='doinput(this);' style='width:50%;' type='text' name='audio3' id='audio3'></input><br>
<select id='osel4' onchange='overlaydosel(this);'><option value='Optional'>Optional</option><option value='Overlay'>Overlay</option></select> <select id='sel4' onchange='dosel(this);'><option value='Audio'>Audio</option><option value='Video'>Video</option><option value='Image'>Image</option></select> File (or Text) 4: <input onblur='doinput(this);' style='width:50%;' type='text' name='audio4' id='audio4'></input><br>
<select id='osel5' onchange='overlaydosel(this);'><option value='Optional'>Optional</option><option value='Overlay'>Overlay</option></select> <select id='sel5' onchange='dosel(this);'><option value='Audio'>Audio</option><option value='Video'>Video</option><option value='Image'>Image</option></select> File (or Text) 5: <input onblur='doinput(this);' style='width:50%;' type='text' name='audio5' id='audio5'></input><br>
<select id='osel6' onchange='overlaydosel(this);'><option value='Optional'>Optional</option><option value='Overlay'>Overlay</option></select> <select id='sel6' onchange='dosel(this);'><option value='Audio'>Audio</option><option value='Video'>Video</option><option value='Image'>Image</option></select> File (or Text) 6: <input onblur='doinput(this);' style='width:50%;' type='text' name='audio6' id='audio6'></input><br>
<select id='osel7' onchange='overlaydosel(this);'><option value='Optional'>Optional</option><option value='Overlay'>Overlay</option></select> <select id='sel7' onchange='dosel(this);'><option value='Audio'>Audio</option><option value='Video'>Video</option><option value='Image'>Image</option></select> File (or Text) 7: <input onblur='doinput(this);' style='width:50%;' type='text' name='audio7' id='audio7'></input><br>
<select id='osel8' onchange='overlaydosel(this);'><option value='Optional'>Optional</option><option value='Overlay'>Overlay</option></select> <select id='sel8' onchange='dosel(this);'><option value='Audio'>Audio</option><option value='Video'>Video</option><option value='Image'>Image</option></select> File (or Text) 8: <input onblur='doinput(this);' style='width:50%;' type='text' name='audio8' id='audio8'></input><br>
<select id='osel9' onchange='overlaydosel(this);'><option value='Optional'>Optional</option><option value='Overlay'>Overlay</option></select> <select id='sel9' onchange='dosel(this);'><option value='Audio'>Audio</option><option value='Video'>Video</option><option value='Image'>Image</option></select> File (or Text) 9: <input onblur='doinput(this);' style='width:50%;' type='text' name='audio9' id='audio9'></input><br><br>
Optional Background Image: <input style='width:50%;' type='text' name='background' id='background'></input><br><br>
Hide This Form While Audio Plays? <input onchange='fixhide();' type='checkbox' id='hideform'></input><br>
Hide This Form After Audio Plays? <input onchange='fixhide();' type='checkbox' id='hideformlater'></input><br><br>
<input type='hidden' name='hide' id='hide' value='offoff'></input>
<input onclick='fixhide();' id='subis' style='text-align:center; background-color: pink; ' type='submit' value='Play Sequentially'></input>
</form>
</div>

<div id='sparediv'></div>
<iframe id='spareaudio' style='display:none;position:absolute;left:-20000px;top:-20000px;'src='http://www.rjmprogramming.com.au/Mac/iPad/splice_audio.htm?audio1=&audio2=&audio3=&audio4=&audio5=&audio6=&audio7=&audio8=&audio9=&background=&hide=onon' title='Audio Overlay goes here'></iframe>
<canvas id='canvas' style='display:none;'></canvas>
</body>
</html>