Useful.Website<br/>
@MairkMusic

<!-- to do make the setter master (2)
all others random 3,4,5 to play

if negative, try get again in 10 seconds
<br/>
-->


<div
      id="btn"
      style="
        height: 100px;
        width: 100%;
        background-color: white;
        display: block;
		padding: 10px;
      "
    >
	<br/><br/>
	
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<audio id="audio1" SRC='1-second-of-silence.mp3' controls width='100%' height=100px></audio>


    </div>
<div
      id="box"
      style="
        height: 10px;
        width: 10px;
        background-color: salmon;
        display: none;
      "
    >
      Btn
	        <p style="font-size: 50vw;text-align: center;">Go!</p>
    </div>

    
<p style='font-size:200%;text-align: center;'>[ <span style="text-align: center;" id="txtHint">press play ^ and wait</span> ]</p>
<script>
var start=0
document.getElementById('audio1').addEventListener('playing',function() { getWhen(); },false); 

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  // 👇️ hide button
//  btn.style.display = 'none';
  //var timeInterval = setInterval(getTime, 300);
  //play_x(1); 
  //play_x(1); 
  //document.getElementById('audio2').load();
  //document.getElementById('audio3').load();
  //document.getElementById('audio4').load();


  // 👇️ show div
  //const box = document.getElementById('box');
  //box.style.display = 'block';
});
</script>


<meta name="viewport" content="initial-scale=0.8, maximum-scale=0.8">
<style>
html, body {
  padding: 5;
  margin: 5;
}
</style>
<div id="control" style="background-color: #7ac2be ; padding: 10px; border: 1px solid green;;height:auto;display:flex;font-size:200%; width: 98%; ">"

<div style="width:2% "></div>
@mairkmusic <br>custom cliplauncher <br>for live trigger of lyrics and music
<div style="padding: 10px; width:5% "></div>


<div id="play1" class="1" style="background-color: #d2d0ba ; padding: 10px; border: 1px solid grey;width:20%; ">
1 All the flavours
</div>
<div style="width:2% "></div>
<div id="play2" class="2" style="background-color: #b6be9c ; padding: 10px; border: 1px solid grey;width:20%;">
2 I sub1
</div>
<div style="width:2% "></div>
<div id="play3" class="3" style="background-color: #97c2a6 ; padding: 10px; border: 1px solid green;width:20%;">
3. sub2
</div>
<div style="width:2% "></div>
<div id="play4" class="4" style="background-color: #9bbfd1 ;padding: 10px; border: 1px solid green;width:20%;">
4. sub3
</div>

</div>

<script>
const control = document.getElementById('control');
control.style.display = 'none';
master=0
main=1
// Returns a random integer from 2 to 4:
sub=Math.floor(Math.random() * 3)+2;
//console.log(sub)
const sounds = [];
sounds.push('1-second-of-silence.mp3', "everything.wav", "sub1.wav","sub2.wav","sub3.wav");
const images = [];
images.push('1Sb9.gif','XOsX.gif','3vc0.gif','7QXR.gif','1Sb9.gif')
//console.log(fruits.length); // 3
document.getElementById('audio1').src=sounds[0];
</script>


<!--  <p style='font-size:200%;'>[<span id="txtHint"></span>]</p> -->
<img width="100%" id='lyric1' src='7QXR.gif'>

<script src='MairkMusic.js'></script>


<script>
//let person = prompt("Ready?", "Yes");
var lastvalue=0;
var lastTime=0;
var latency = 200;


function getWhen() {
	//document.getElementById('audio1').disabled = true;
	start=start+1
	if (start==1) document.getElementById('audio1').src=sounds[1]
	if (start>=1){ //the first time (was==1)
      //lastvalue=document.getElementById("txtHint").innerHTML
	  document.getElementById('lyric1').src=images[sub]
	  
    
	btn.style.display = 'none';
	document.getElementById("txtHint").innerHTML = 'Please wait - starting audio'
	//document.getElementById('audio1').controls=''
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
	
	//console.log(e);
      if (this.readyState == 4 && this.status == 200 ) {
	    //document.getElementById("txtHint").innerHTML = this.responseText;
		//console.log(this);
		console.log(this.response);	
		//alert(this.response);
		//setTimeout(function(){goNow()}, this.response+(latency/2));
		if (this.response<0) setTimeout(function(){getWhen()}, 5000);
		
		if (this.response>1000) {
		if (master==0) document.getElementById("setBtn").style.display = 'none';
		setTimeout(function(){goNow()}, this.response);
		}
		if (lastvalue!=this.response){
			lastvalue=this.response
			//console.log(this.responseText);
			//if(lastvalue==1)play_x(1); 
			//if(lastvalue==2) play_x(2);
		}
      }
    
	};
    xmlhttp.open("GET", "get.php?q=", true);
    xmlhttp.send();
  }
}

syncTime();

function goNow(){
 whichSound=sub
 if ( master==1) whichSound=main
 if (master==0) document.getElementById("setBtn").style.display = 'none';
 console.log(whichSound)
 document.getElementById('audio1').src=sounds[whichSound]
 document.getElementById('audio1').play()
 //play_x(1); 
 //alert('hi');
}


function getTime() {
      //lastvalue=document.getElementById("txtHint").innerHTML
    
    var xmlhttpT = new XMLHttpRequest();
    xmlhttpT.onreadystatechange = function() {
	
	//console.log(e);
      if (this.readyState == 4 && this.status == 200 ) {
	         //document.getElementById("txtHint").innerHTML = this.responseText;
		//console.log(this);
		console.log(this.response);
		if (lastTime==0) lastTime=this.response;
if (lastTime!=this.response){
		//kill the timer
		clearInterval(timeInterval);
		//syncTime();
		//console.log(systemtime)
		//document.getElementById("txtHint").innerHTML=systemtime
		myTimeout = setTimeout(play_x(1), gap)
//play_x(1); 
		}
      }
    };
    xmlhttpT.open("GET", "getTime.php?q=", true);
    xmlhttpT.send();
  
}


var systemtime=0

function syncTime() {
    // Set up our time object, synced by the HTTP DATE header
    // Fetch the page over JS to get just the headers
    console.log("syncing time")
    var r = new XMLHttpRequest();
    var start = (new Date).getTime();

    r.open('HEAD', document.location, false);
    r.onreadystatechange = function()
    {
        if (r.readyState != 4)
        {
            return;
        }
        latency = (new Date).getTime() - start;
        var timestring = r.getResponseHeader("DATE");

        // Set the time to the **slightly old** date sent from the 
        // server, then adjust it to a good estimate of what the
        // server time is **right now**.
        systemtime = new Date(timestring);
        systemtime.setMilliseconds(systemtime.getMilliseconds() + (latency / 2))
		gap = ((new Date).getTime() - systemtime)
		console.log((new Date).getTime() - systemtime)
		}
    r.send(null);
}


</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div
      id="setBtn"
      style="
        height: 50%;
        width: 100%;
        background-color: white;
        display: block;
      "
    >
      <p style="font-size: 25vw;text-align: center;">Enjoy!</p>
    </div>
	
	
<script>
const setBtn = document.getElementById('setBtn');

setBtn.addEventListener('click', () => {
  this.img = document.createElement("img");
  master=1
  this.img.src = "set.php";
  src = document.getElementById("setBtn");
  src.appendChild(this.img)
});
</script>