<!doctype html>
<html>
<head>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<title>Karaoke via YouTube API - RJM Programming - September, 2016</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes" >
<script type='text/javascript'>
var snippet=-1;
var ourvid=location.search.split('vid=')[1] ? location.search.split('vid=')[1].split('&')[0] : '';
var defval='0';
var next=0;
var nextthing='mytbody';
var lastfinish=-1;
var next_thing='xx0';
var mbmode=false;
var nine=29;
var bcol='#f0f0f0';
var nextdelay=-1;
var lastokn='';
var okn='';
var oko=null;
var cbut="<br><div style='text-align:center; width: 100%;'><div id='ddkaraoke' style='display:inline; visibility: hidden; '></input><input onclick=\"if (document.URL.indexOf('i0=') != -1) { location.href=document.URL; } \" id='repeat' type='button' style='background-color:red;' value='Replay Karaoke Style YouTube Above'></input></div><div id='dkaraoke' style='display:inline; visibility: hidden; '><input id='mousej' type='button' style='background-color:#f0f0f0; display:inline; visibility: hidden;' onclick=' mousebelowj(this);' value='Fill Table Below via Mouse Video Pauses Starting with '></input><input id='mousei' type='button' style='background-color:#f5f5f5; display:inline; visibility: hidden;' onclick=' mousebelowi(this);' value='Fill Table Starting with 0 cell'></input><input id='karaoke' onclick=\" mbmode=false; document.getElementById('ddkaraoke').style.visibility='visible'; if (document.URL.indexOf('i0=') != -1) { next=0; } queuenext();\" type='submit' style='background-color:orange;' value='Play Karaoke Style YouTube Via Entries Below'></input></div></div>";

function toms(inf) {
if (inf.value != '') {
if (inf.value.substring(0,1) >= '0' && inf.value.substring(0,1) <= '9') {
var secsare=eval(inf.value);
//alert(Math.floor(secsare / 3600.0));
//alert(('0' + Math.floor(secsare / 60.0)));
//alert(('0' + eval(secsare,60.0)));
//alert('take two off length of ' + ('0' + Math.floor(eval(secsare,60.0))));
inf.title=Math.floor(secsare / 3600.0) + ':' + ('0' + Math.floor(secsare / 60.0)).substring(eval(-2 + ('0' + Math.floor(secsare / 60.0)).length)) + ':' + ('0' + eval(secsare % 60.0)).substring(eval(-2 + ('0' + Math.floor((secsare % 60.0))).length));
//alert(secsare + ' ' + inf.title);
}
}
}

function andthe() {
var ii=eval(1 + eval(document.getElementById('updatethisplease').value.replace('i','').replace('j','')));
next_thing='xx' + ii;
document.getElementById(next_thing).style.visibility='visible';
document.getElementById(document.getElementById('updatethisplease').value).style.backgroundColor=bcol;
setTimeout(andthe, 1000);
}

function andth() {
document.getElementById('mousei').style.visibility='hidden';
document.getElementById('mousej').style.visibility='hidden';
}

function mousebelowj(omo) {
//alert(omo.id.replace('j','i'));
document.getElementById(omo.id.replace('j','i')).style.visibility='hidden';
//alert(9000);
mbmode=true;
omo.value='When finished with Table Settings click Orange button to Play your Table Settings';
//alert(90000);
bcol='#f0f0f0';
document.getElementById('updatethisplease').value='j0';
document.getElementById(document.getElementById('updatethisplease').value).style.backgroundColor=bcol;
//alert(900000);
document.getElementById('c0').checked=true;
document.getElementById('thft').innerHTML='Via Mouse Video Click Pauses ... <br>' + document.getElementById('thft').innerHTML;
//alert(9000000);
//document.getElementById('karaoke').click();
next=0;
queuenext();
setTimeout(andth, 5000);
andthe();
//alert(90000000);
}

function mousebelowi(omo) {
//alert(900);
document.getElementById(omo.id.replace('i','j')).style.visibility='hidden';
omo.value='When finished with Table Settings click Orange button to Play your Table Settings';
document.getElementById('updatethisplease').value='i0';
bcol='#f5f5f5';
document.getElementById(document.getElementById('updatethisplease').value).style.backgroundColor=bcol;
document.getElementById('thst').innerHTML='Via Mouse Video Click Pauses ... <br>' + document.getElementById('thst').innerHTML;
document.getElementById('c0').checked=true;
//document.getElementById('karaoke').click();
mbmode=true;
next=0;
queuenext();
setTimeout(andth, 5000);
andthe();
}

function ofc(iois) {
okn=iois.value;
oko=iois;
lastokn=okn;
}

function precval(iois) {
//okn=iois.value;
oko=iois;
lastokn=okn;
if (okn.indexOf(':x') != -1) {
var cvi=okn.split(':');
if (cvi.length > 1) {
var scs=0.0, factor=1.0;
for (var ij=eval(-1 + cvi.length); ij>=0; ij--) {
if (cvi[ij] == "") cvi[ij]="00";
scs+=eval(factor * eval(cvi[ij]));
factor*=60.0;
}
okn='' + scs;
oko.value=okn;
lastokn=okn.replace(':','');
//document.title=oko.value;
//setTimeout(fixval,30);
}
}
}

function fixval() {
if (okn != '') {
oko.value=okn;
} else if (lastokn != '') {
oko.value=lastokn;
lastokn='';
} //else {
//document.title='why';
//}
}

function cval(eiois) {
if (document.URL.indexOf('i0=') == -1) {
//alert(eiois.which);
//okn+=String.fromCharCode(eiois.which || eiois.keyCode);
if ((eiois.which || eiois.keyCode) == 8) {
okn='';
} else if ((eiois.which || eiois.keyCode) == 186 || (eiois.which || eiois.keyCode) == 900000016) {
okn=okn.replace(':','') + ':';
//document.title=okn + ' ' + (eiois.which || eiois.keyCode);
var cvi=okn.split(':');
if (cvi.length > 1) {
var scs=0.0, factor=1.0;
for (var ij=eval(-1 + cvi.length); ij>=0; ij--) {
if (cvi[ij] == "") cvi[ij]="00";
scs+=eval(factor * eval(cvi[ij]));
factor*=60.0;
}
//alert(scs + ' ' + okn);
okn='' + scs;
oko.value=okn;
lastokn=okn.replace(':','');
//document.title=okn + ' ' + (eiois.which || eiois.keyCode) + ' ' + oko.value;
//setTimeout(fixval,30);
}
} else if ((eiois.which || eiois.keyCode) < 46 || (eiois.which || eiois.keyCode) > 58) {
okn=okn;
} else {
okn+=String.fromCharCode(eiois.which || eiois.keyCode);
//document.title+='=' + okn + '+' + eiois.which + ' ' + eiois.keyCode + ' ... ';
}
}
}

function checkval(iois) {
if (document.URL.indexOf('i0=') == -1) {
var cvi=iois.value.split(':');
if (cvi.length > 1) {
var scs=0.0, factor=1.0;
for (var ij=eval(-1 + cvi.length); ij>=0; ij--) {
scs+=eval(factor * eval(cvi[ij]));
factor*=60.0;
}
iois.value='' + scs;
}
addrow();
} else {
snippet=eval(iois.id.replace('i','').replace('j','').replace('c',''));
snippet++;
document.getElementById('xx' + snippet).style.visibility='visible';
}
}

function addrow() {
var suffix='', vmode='visible';
snippet++;
var csnippet=location.search.split('c' + snippet + '=')[1] ? location.search.split('c' + snippet + '=')[1].split('&')[0] : 'off';
var isnippet=location.search.split('i' + snippet + '=')[1] ? location.search.split('i' + snippet + '=')[1].split('&')[0] : ' ';
var jsnippet=location.search.split('j' + snippet + '=')[1] ? location.search.split('j' + snippet + '=')[1].split('&')[0] : ' ';
if (isnippet == ' ' && jsnippet == ' ') {
if (defval != '') {
//alert(0);
for (var ii=1; ii<=nine; ii++) {
suffix+='<tr style=visibility:' + vmode + ';background-color:pink; id=xx' + eval(ii + snippet) + '><td><input type=checkbox id=c' + eval(ii + snippet) + ' name=c' + eval(ii + snippet) + '></input></td><td><input style=width:400px; onblur=checkval(this); type=text onmouseover=toms(this); id=i' + eval(ii + snippet) + ' name=i' + eval(ii + snippet) + ' value=></input></td><td><input style=width:100px; type=number onkeyup=cval(event); oninput=precval(this); onclick=ofc(this); onmouseover=toms(this); min=0 id=j' + eval(ii + snippet) + ' name=j' + eval(ii + snippet) + ' step=0.000001 value=></input></td></tr>';
vmode='hidden';
}
document.getElementById(nextthing).innerHTML+='<tr id=xx0 style=background-color:pink;><td><input onclick=andth(); type=checkbox id=c' + snippet + ' name=c' + snippet + '></input></td><td><input style=width:400px; onblur=checkval(this); type=text onmouseover=toms(this); id=i' + snippet + ' name=i' + snippet + ' value=' + defval + '></input></td><td><input style=width:100px; type=number onkeyup=cval(event); oninput=precval(this); onclick=ofc(this); onmouseover=toms(this); min=0 max=' + document.getElementById('youtube_duration').value + ' id=j' + snippet + ' name=j' + snippet + ' step=0.000001 value=' + document.getElementById('youtube_duration').value + '></input></td></tr>' + suffix;
} else {
//alert(90);
document.getElementById(nextthing).style.visibility='visible';
}
} else if (csnippet == 'off') {
if (defval != '') {
//alert(0);
for (var ii=1; ii<=nine; ii++) {
suffix+='<tr style=visibility:' + vmode + ';background-color:pink; id=xx' + eval(ii + snippet) + '><td><input type=checkbox id=c' + eval(ii + snippet) + ' name=c' + eval(ii + snippet) + '></input></td><td><input style=width:400px; onblur=checkval(this); type=text onmouseover=toms(this); id=i' + eval(ii + snippet) + ' name=i' + eval(ii + snippet) + ' value=></input></td><td><input style=width:100px; type=number onkeyup=cval(event); oninput=precval(this); onclick=ofc(this); onmouseover=toms(this); min=0 id=j' + eval(ii + snippet) + ' name=j' + eval(ii + snippet) + ' step=0.000001 value=></input></td></tr>';
vmode='hidden';
}
document.getElementById(nextthing).innerHTML+='<tr id=xx0 style=background-color:pink;><td><input onclick=andth(); type=checkbox id=c' + snippet + ' name=c' + snippet + '></input></td><td><input style=width:400px; onblur=checkval(this); type=text onmouseover=toms(this); id=i' + snippet + ' name=i' + snippet + ' value=' + isnippet + '></input></td><td><input style=width:100px; type=number onkeyup=cval(event); oninput=precval(this); onclick=ofc(this); onmouseover=toms(this); min=0 max=' + document.getElementById('youtube_duration').value + ' id=j' + snippet + ' name=j' + snippet + ' step=0.000001 value=' + jsnippet + '></input></td></tr>' + suffix;
} else {
//alert(90);
document.getElementById(nextthing).style.visibility='visible';
document.getElementById('i' + snippet).value=isnippet;
document.getElementById('j' + snippet).value=jsnippet;
}
} else {
if (defval != '') {
//alert(0);
for (var ii=1; ii<=nine; ii++) {
suffix+='<tr style=visibility:' + vmode + ';background-color:pink; id=xx' + eval(ii + snippet) + '><td><input type=checkbox id=c' + eval(ii + snippet) + ' name=c' + eval(ii + snippet) + '></input></td><td><input style=width:400px; onblur=checkval(this); type=text onmouseover=toms(this); id=i' + eval(ii + snippet) + ' name=i' + eval(ii + snippet) + ' value=></input></td><td><input style=width:100px; type=number onkeyup=cval(event); oninput=precval(this); onclick=ofc(this); onmouseover=toms(this); min=0 id=j' + eval(ii + snippet) + ' name=j' + eval(ii + snippet) + ' step=0.000001 value=></input></td></tr>';
vmode='hidden';
}
document.getElementById(nextthing).innerHTML+='<tr id=xx0 style=background-color:pink;><td><input onclick=andth(); type=checkbox id=c' + snippet + ' name=c' + snippet + ' checked></input></td><td><input style=width:400px; onblur=checkval(this); type=text onmouseover=toms(this); id=i' + snippet + ' name=i' + snippet + ' value=' + isnippet + '></input></td><td><input style=width:100px; type=number onkeyup=cval(event); oninput=precval(this); onclick=ofc(this); onmouseover=toms(this); min=0 max=' + document.getElementById('youtube_duration').value + ' id=j' + snippet + ' name=j' + snippet + ' step=0.000001 value=' + jsnippet + '></input></td></tr>' + suffix;
} else {
//alert(90);
document.getElementById(nextthing).style.visibility='visible';
document.getElementById('c' + snippet).checked=true;
document.getElementById('i' + snippet).value=isnippet;
document.getElementById('j' + snippet).value=jsnippet;
}
csnippet=location.search.split('c' + eval(1 + snippet) + '=')[1] ? location.search.split('c' + eval(1 + snippet) + '=')[1].split('&')[0] : 'off';
isnippet=location.search.split('i' + eval(1 + snippet) + '=')[1] ? location.search.split('i' + eval(1 + snippet) + '=')[1].split('&')[0] : ' ';
jsnippet=location.search.split('j' + eval(1 + snippet) + '=')[1] ? location.search.split('j' + eval(1 + snippet) + '=')[1].split('&')[0] : ' ';
//alert('isnippet=' + isnippet + '*and* jsnippet=' + jsnippet + '*');
if (isnippet.trim() == '' && jsnippet.trim() == '') {
//alert('isNippet=' + isnippet + '*and* snippet=' + snippet + '*');
queuenext(); //document.getElementById('dkaraoke').click();
return;
} else {
nextthing='xx' + eval(1 + snippet);
defval='';
document.getElementById('dkaraoke').style.visibility='visible';
//alert('isnippet=' + isnippet + '*and* jsnippet=' + jsnippet + '*');
addrow();
return;
}
}
nextthing='xx' + eval(1 + snippet);
defval='';
document.getElementById('dkaraoke').style.visibility='visible';
}

function findduration(vidiso,vtxt) {
if (vtxt != '') {
ourvid=vtxt;
} else if (vidiso.value.indexOf('v=') != -1) {
ourvid=vidiso.value.split('v=')[1].split('&')[0].split('#')[0];
vidiso.value=ourvid;
} else {
ourvid=vidiso.value;
}
document.getElementById('performance').innerHTML="<iframe id='myiframe' style='width:720px;height:410px;' src='stop_start_youtube.html?vid=" + ourvid + "&playtime=0&start=0'></iframe>";
document.getElementById('performance').style.display='block';
setTimeout(showd, 200);
}

function queuenext() {
var which=next, thisd=0.0, more=false, thisstart=0.0;
//alert('snippet=' + snippet + '*and* snippet=' + snippet + '*');
document.getElementById('areyousinging').innerHTML='';
if (eval(snippet) >= 0) {
if (document.URL.indexOf('i0=') == -1) {
if (mbmode == false) {
document.getElementById('dkaraoke').style.visibility='hidden';
document.getElementById('ddkaraoke').style.visibility='visible';
} else {
document.getElementById('ddkaraoke').style.visibility='hidden';
document.getElementById('dkaraoke').style.visibility='visible';
}
} else {
document.getElementById('dkaraoke').style.visibility='hidden';
document.getElementById('ddkaraoke').style.visibility='visible';
}
for (var i=0; i<=snippet; i++) {
if (document.getElementById('c' + i).checked) {
if (i == which) {
thisstart=eval(document.getElementById('i' + i).value);
if (eval(lastfinish) >= 0.0) {
if (eval(lastfinish) < eval(thisstart)) {
if (document.getElementById('conduit').value.indexOf('-') != -1 || eval(1.0 + eval(document.getElementById('conduit').value)) > eval(lastfinish)) {
//alert(thisstart + ' ... ' + lastfinish);
document.getElementById('areyousinging').innerHTML='<h1>Are you singing along with ' + document.getElementById('myh1').innerHTML + ' yet?</h1>';
more=true;
setTimeout(queuenext, eval(1000 * eval(eval(thisstart) - eval(lastfinish))));
lastfinish=thisstart;
return;
} else {
setTimeout(queuenext, 1000);
return;
}
}
}
lastfinish=eval(document.getElementById('j' + i).value);
thisd = eval(eval(document.getElementById('j' + i).value) - eval(document.getElementById('i' + i).value));
document.getElementById('xx' + i).style.backgroundColor='lightgreen';
//alert('xx' + i);
var ndt=new Date();
document.getElementById('myiframe').src="stop_start_youtube.html?vid=" + ourvid + "&playtime=" + thisd + "&start=" + document.getElementById('i' + i).value + '&ct=' + encodeURIComponent(ndt.toUTCString());
next++;
more=true;
if (3 == 3) {
document.getElementById('conduit').value='0';
nextdelay=eval(1000 * thisd);
xqn();
} else {
setTimeout(queuenext, eval(1000 * thisd));
}
}
}
}
}
if (!more) next=0;
}

function xqn() {
if (document.getElementById('conduit').value.indexOf('-') != -1 || eval(1.0 + eval(document.getElementById('conduit').value)) > eval(lastfinish)) {
nextdelay=-1;
queuenext();
} else if (eval(nextdelay) > 200) {
nextdelay-=500;
setTimeout(xqn, 200);
} else {
nextdelay=-1;
queuenext();
}
}

function showd() {
if (document.getElementById('youtube_duration').value == '') {
setTimeout(showd, 200);
} else {
if (document.getElementById('youtube_duration').value.indexOf('.') == -1) document.getElementById('youtube_duration').value+='.0';
document.getElementById('myspan').style.visibility='visible';
addrow();
if (document.URL.indexOf('i0=') == -1) {
document.getElementById('mousei').style.visibility='visible';
document.getElementById('mousej').value+=document.getElementById('youtube_duration').value + ' cell';
document.getElementById('mousej').style.visibility='visible';
}
}
}

</script>
</head>
<body style='background-color: lightblue;' onload=" if (ourvid == '') { ourvid=(location.search.split('youtubeid=')[1] ? location.search.split('youtubeid=')[1].split('&')[0] : ''); } if (ourvid != '') { document.getElementById('youtubeid').value=ourvid; findduration(null,ourvid); }">
<h1 id='myh1' style='text-align:center; width: 100%;'>Karaoke via YouTube API - RJM Programming - September, 2016</h1>
<script>
document.write("<form action=" + document.URL.split('?')[0].split('#')[0] + " method=GET>");
</script>
<div style='text-align:center; width: 100%;'><span>YouTube URL or Video ID: <input onblur="findduration(this,'');" name='youtubeid' id='youtubeid' type='text' value=''></input><div id='myspan' style='display:inline; visibility: hidden;'> Duration in seconds: <input onmouseover=toms(this); type='text' name='youtube_duration' id='youtube_duration' value=''></input></div></span></div>
<script>
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.write(cbut);
}
</script>
<div id='performance' style='text-align:center; width:100%;height:410px;display:none;overflow-y:hidden;'></div>
<div id='areyousinging' style='text-align:center; width: 100%; font-size:36px; font-color='red;'></div>
<script>
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.write(cbut);
}
</script>

<table style='text-align:center; width: 100%;'>
<thead>
<tr style='background-color:yellow;'><th>✔</th><th id='thst'>Start time in seconds <span id=nm style='display:none;'>(negative means you will be singing or Prefix by Audio file URL or YouTube ID delimited by :)</span></th><th id='thft'>Finish</th>
</thead>
<tbody id='mytbody'>
</tbody>
</table>
<input type=text onmouseover=toms(this); style=margin-left:-9000px; value=''></input><input id='conduit' type='hidden' value='-1'></input><input id='updatethisplease' type='hidden' value=''></input>
</form>
</body>
</html>