<!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>
<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;
function checkval(iois) {
if (document.URL.indexOf('i0=') == -1) {
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<=9; 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 id=i' + eval(ii + snippet) + ' name=i' + eval(ii + snippet) + ' value=></input></td><td><input style=width:100px; type=number min=0 id=j' + eval(ii + snippet) + ' name=j' + eval(ii + snippet) + ' step=0.1 value=></input></td></tr>';
vmode='hidden';
}
document.getElementById(nextthing).innerHTML+='<tr id=xx0 style=background-color:pink;><td><input type=checkbox id=c' + snippet + ' name=c' + snippet + '></input></td><td><input style=width:400px; onblur=checkval(this); type=text id=i' + snippet + ' name=i' + snippet + ' value=' + defval + '></input></td><td><input style=width:100px; type=number min=0 max=' + document.getElementById('youtube_duration').value + ' id=j' + snippet + ' name=j' + snippet + ' step=0.1 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<=9; 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 id=i' + eval(ii + snippet) + ' name=i' + eval(ii + snippet) + ' value=></input></td><td><input style=width:100px; type=number min=0 id=j' + eval(ii + snippet) + ' name=j' + eval(ii + snippet) + ' step=0.1 value=></input></td></tr>';
vmode='hidden';
}
document.getElementById(nextthing).innerHTML+='<tr id=xx0 style=background-color:pink;><td><input type=checkbox id=c' + snippet + ' name=c' + snippet + '></input></td><td><input style=width:400px; onblur=checkval(this); type=text id=i' + snippet + ' name=i' + snippet + ' value=' + isnippet + '></input></td><td><input style=width:100px; type=number min=0 max=' + document.getElementById('youtube_duration').value + ' id=j' + snippet + ' name=j' + snippet + ' step=0.1 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<=9; 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 id=i' + eval(ii + snippet) + ' name=i' + eval(ii + snippet) + ' value=></input></td><td><input style=width:100px; type=number min=0 id=j' + eval(ii + snippet) + ' name=j' + eval(ii + snippet) + ' step=0.1 value=></input></td></tr>';
vmode='hidden';
}
document.getElementById(nextthing).innerHTML+='<tr id=xx0 style=background-color:pink;><td><input type=checkbox id=c' + snippet + ' name=c' + snippet + ' checked></input></td><td><input style=width:400px; onblur=checkval(this); type=text id=i' + snippet + ' name=i' + snippet + ' value=' + isnippet + '></input></td><td><input style=width:100px; type=number min=0 max=' + document.getElementById('youtube_duration').value + ' id=j' + snippet + ' name=j' + snippet + ' step=0.1 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(vidis) {
ourvid=vidis;
document.getElementById('performance').innerHTML="<iframe id='myiframe' style='width:720px;height:410px;' src='stop_start_youtube.html?vid=" + vidis + "&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) 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)) {
//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;
}
}
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);
document.getElementById('myiframe').src="stop_start_youtube.html?vid=" + ourvid + "&playtime=" + thisd + "&start=" + document.getElementById('i' + i).value;
next++;
more=true;
setTimeout(queuenext, eval(1000 * thisd));
}
}
}
}
if (!more) next=0;
}
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();
}
}
</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(ourvid); }">
<h1 id='myh1' style='text-align:center; width: 100%;'>Karaoke via YouTube API - RJM Programming - September, 2016</h1>
<form action=./karaoke_youtube_api.html method=GET>
<div style='text-align:center; width: 100%;'><span>YouTube URL or Video ID: <input onblur='findduration(this.value);' name='youtubeid' id='youtubeid' type='text' value=''></input><div id='myspan' style='display:inline; visibility: hidden;'>YouTube URL or Video Duration: <input type='text' name='youtube_duration' id='youtube_duration' value=''></input></div></span></div>
<div id='performance' style='text-align:center; width:100%;height:410px;display:none;'></div>
<div id='areyousinging' style='text-align:center; width: 100%; font-size:36px; font-color='red;'></div>
<div style='text-align:center; width: 100%;'><div id='ddkaraoke' style='display:inline; visibility: hidden; '><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='karaoke' onclick="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>
<table style='text-align:center; width: 100%;'>
<thead>
<tr style='background-color:yellow;'><th>✔</th><th>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>Finish</th>
</thead>
<tbody id='mytbody'>
</tbody>
</table>
<input type=text style=margin-left:-9000px; value=''></input>
</form>
</body>
</html>