CODE f1-photo-music

SOURCE CODE OF f1-photo-music.html

OR
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<style>

body{
	background-color:	#D8D8D8; /* #408E91; B0E0E6;  #8FBC8F; */
	font-size:14px;
	font-family:Arial;
	padding:0px;
	margin:0px;
}

.sect{
font-size:1.3em;
font-style:italic;
color: navy; /* #0000CD; */
font-family:Times;
}

.sect2, .sect3{
font-weight:bold;
font-size:1em;
font-style:italic;
color: #11468F; /* blue; #4169E1; */
}

.brDiv{
	width:2px;
	height:6px;
}

  form {
  margin: 1em 0;
  text-align: center;
}

#search, input[type="text"] {
  width:85%;
  border: none;
  outline: none;
  padding: 5px 0;
  font-size: 1em;
  font-weight: bold;
  border-bottom: 1px solid #aaa;
  margin-bottom:.3em;
}

input[type="button"]{
	  font-size:1.1em;
	padding: 2px 12px;/* 2px 12px */
    text-align: center;
    text-decoration: none; 
    overflow: hidden;

    border-top: 4px solid #c0ffff ; /* 5px solid #c0ffff */
    border-right: 4px solid #00f ;
    border-bottom: 4px solid #00f ;
    border-left: 4px solid #c0ffff ; 
    border: 4px outset #b37d00 ;
    border-style: outset;
}

.result{
display: none;
  color: white;
  font-weight:bold;
  /* width: 86%; */
  margin: auto;
  padding: .2em;
  
  text-align:left;
  background-color:#003333;
}

.selRuDiv{
	display: inline-block;
}

#result img{
	/* height:120px; */
}

.indicator{
  position:absolute;
  z-index: 4;
  top:.1em;
  right:.1em;
  font-size: 1.3em;
  color: magenta; /* aqua; */
}

.cell, .cell1 {
  padding: 3px;
  margin:3px;
  background-color:white;
  position:relative;
/*  border:2px solid gray; */
  display: inline-block;
  height: fit-content;
  width:fit-content;
}

button{
font-size: 1.1em;
margin-bottom:0.3em;
/* border-radius: 20%; */
}

#vDiv button{
font-size: 1.1em;
margin:0px;
}

#container{
     position: relative;
	width:100%; 
	padding: 0px;
	margin: 0px;
	right:0px; 
}

#slides{
    /* border:1px solid magenta; */
    background-color: #003333; /* 999 */
	position: relative;
	width:100%; 
	padding: 0px;
	margin: 0px;
	right:0px; 
}

.slide{
	position: absolute;
	max-width: 100%; 
	opacity: 0;
	z-index: 1;
	left:0;
     right:0;
     margin-left: auto;
     margin-right: auto;
     	/* top:1px; */
     top: 0px;
/*
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
*/
}

.showing{
	opacity: 1;
	z-index: 2;
}

/* Caption text */
.text {
  color: blue; 
  font-family:Arial;
  padding: .2em;
  position: absolute;
  line-height:140%;
  width: 96%;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  max-height:6em; 
  /* height:6em; */
  overflow: hidden;
  text-align: center;
  z-index:50;

text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;
}

#seleArea{
 font-size:.8em
}

table td{
 border-collapse: collapse;
border:1px solid gray;
}

h2{
font-family:Times;
font-style:italic;
margin:.9em;
}

table, td{
	border:1px solid gray;
	background-color:white;
	font-family:Arial;
	font-size:1em;
	vertical-align: top;
}

  .text{
    font-size:1.5em;
    bottom: .5em;
  }

.stt{
color:white;
font-weight:bold;
font-family:Arial;
position:absolute;

top:0px;
left:0px;
z-index:10;
background-color:#666;
opacity:.3;
padding:3px;
text-align: center;
}

.desc{
display:none;
}

#player{
/* display:absolute;
left:0px;
top:0px;
z-index:1;*/
}

  #showState{
  display: inline-block;
  border:2px solid gray;
  border-style:inset;
  color:#66FF00;
  font-weight:bold;
  text-align:left;
  background-color:black;
  padding:3px;
  padding-left:8px;
  margin:0px;
  }

/* ======= */

.progress {
  background: blue; /* linear-gradient(to right, #82CFD0 0%, #82CFD0 40%, #fff 40%, #fff 100%); */
  border: solid 2px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 86%;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;

  margin-bottom:1.2em;
}

.progress::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  -webkit-appearance: none;
  cursor: ew-resize;
  background: white; /* aqua; #6fbbd3; #434343;  */
}

button {
    position: relative;
    background-color:white; 
    font-size: 1.1em;
    color: black; 
    padding: 2px 6px; /* 2px 12px */
    text-align: center;
    text-decoration: none; 
    overflow: hidden;
    cursor: pointer; 
    border-top: 4px solid #c0ffff ; /* 5px solid #c0ffff */
    border-right: 4px solid #00f ;
    border-bottom: 4px solid #00f ;
    border-left: 4px solid #c0ffff ;
    border: 4px outset #b37d00 ;
    border-style: outset;
}
button:after{ 
    content: "";
    background:magenta; 
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0; 
    transition: all 2.2s; /* 1.8s; */
}

button:active:after {
    padding: 0;
    margin: 0;
    opacity:  1; 
    transition: 0s
}

.video 
{
    width: 100%;
    height: 95vh;
}

.videoSm{
	width:300px;
}


@media only screen and (max-width:700px){
  body{
     font-size:14px;
  }
  #bigBut{
  	display: none;
  }

   #resultBig{
    /* height:380px; */
  }

  .cell1 img{
	max-width: 100%;
	max-height:200px;
	}
	
    #slides img{
	/* max-width: 100%; */
	height: 200px;  /* max-height:660px;*/
	}
	
	#slides{
	height:200px;
	}
	.slide{
	max-height:200px;
	}
  .text{ font-size: .7em;
     bottom:.4em;
     display: none;
  }
  .stt{
  font-size:.
  width:5em;
  }
}

@media only screen and (min-width: 700px) and (max-width: 1270px){
  body{
    font-size:18px;
  }
  #bigBut{
  	display:inline-block;
  }
     #result{
      height:500px;
   }
  
    .cell1 img{
	max-width: 100%;
	max-height:200px;
	}
	
  #slides img{
	/* max-width: 100%; */
	height: 696px; /* max-height:660px;*/
	}
	#slides{
	height:696px;
	}
	.slide{
	height:696px;
	}
  .text{
    font-size:1.5em;
    bottom: .5em;
  }
    .stt{
  font-size:1em;
  width:5em;
  }
}

@media screen and (min-width: 1280px) {
   body{
     font-size:20px;
   }
   #bigBut{
  	display:inline-block;
   }
     #result {
      height:600px;
     }
     .cell1 img{
	max-width: 100%;
	max-height:320px;
	}
   #slides img{
	max-width: 100%;
	max-height:855px; /* height ? */
	}
	#slides{
	height:855px;
	}
	.slide{
	height:855px; /* max-height:870px;*/
	}
	    .stt{
    font-size:1em;
    width:5em;
  }
}
</style>
</head>

<body>
<div align="center">
 <div style="width:98%; overflow:hidden; background-color:#245953; color:white;padding:1px;">
       <h2>Search for pixabay, unsplash photos to make slideshow</h2>
  </div>
<br>
<b class="sect2">DOWNLOAD this html file:<br>
<a style="text-decoration:none" href="https://phanhung20.blogspot.com/2023/03/code-f1-photo-music.html">https://phanhung20.blogspot.com/2023/03/code-f1-photo-music.html</a></b>
<br><br>
<b class="sect">A. SEARCH FOR PHOTOS</b><br>

<button onclick="newS()">New Search [Reload]</button>
<br><b class="sect3">
(Use if the “Load photos” button has been pressed)</b>
<br>

<button onclick="pNum = 1; $('#key').val('')">New Search (pixab.)</button>

<br><b class="sect3">
(Use if the “Load photos” button has not been pressed)</b>
<br>
<br>
(1) Type tag to search, for example: Nature; China; Japan; Kyoto; France; Paris; Scotland; <br>
Germany; Italy; Thailand; Tahiti; India; Mexico; Peru; flowers; castles; Europe; Asia; Wales; Ireland ...<br>
<br>
Tag: <input id="key" name="key" type="text" placeholder="Please enter a text for search" onblur="myFunc1()">
     <br>
     (2)  
       <input type="button" style="background:#E49393" value = "Search(pixabay)" id="btnPi">
<div id="info-pixb" style="color:red; display:inline-block"></div>
<br><br>
<button onclick="currPage=1; $('#search').val('')">New Search ( unspl.)</button>
<!--
<input type="button" style="background:#E49393" value = "New Search (unsp.)" onclick="currPage = 1; $('#search').val('')">
-->
<br><b class="sect3">
(Use if the “Load photos” button has not been pressed)</b>
<br><br>
(1) Tag: 
<input id="search" type="text" placeholder="Please enter a text for search"><br>
(2) 

<input type="button" style="background:#E49393" value = "Search (unsplash)" onclick="SearchPhotos()">
<!--
<button id="searchBtn" onclick="SearchPhotos()">Seach(unsplash)</button>
-->
<div id="info-unsp" style="color:red; display:inline-block"></div>
<br>
<br>
<b class="sect">B. SELECT PHOTOS</b><br>
<div id="info-unsp" style="color:red; display:inline-block"></div>
<br>
<div style="width:70%; text-align:left; padding:.3em; border:1px solid gray">
Tap button <b>pi0, pi1 ... or un4, un5 ...</b> to see each page<br>
Place your finger on the dark green area 
<div style="display:inline-block; background: #003333; width:30px;height:1.2em"></div> 
swepe down to see more photos.<br>
Tap on a photo you like to select it.  Tap it again to deselect.<br>
 Tap the "Search" button again to get another 70 (or 30) photos.
  <br>Select more photos.  Then again tap "Search" then select photos<br>
If you see the message “Nothing left", don't tap "Search" button anymore!<br>
Tap "New Search"; Type another tag; Tap "Search" ...
</div>
<br>

<div id="resMenu" style="width:85%; border:1px solid gray"></div>
<br>
<span class="sect2" style="font-size:1em">DO NOT SELECT OVER 70 PHOTOS <br>
(otherwise tv, ipad, phone won't work well)</span>
<div id="theInfo" style="width:86%; padding:4px; font-weight:bold; color:white; background-color:#666"></div>
<br>
<div id="yesDiv3" style="color: blue; font-weight:bold; display:inline-block"></div>
<br>
    <div id="resultBig" style="height:380px; overflow:auto; width:86%; border:1px solid gray">
</div>

<div id="yesDiv2" style="color: blue; font-weight:bold; display:inline-block"></div><br>

<div style="display:none">
<b>CURRENT JSON</b>
<br>
<textarea id="jsonArea" style="width:80%;height:150px; font-size:.9em" readonly>
</textarea>
</div>
<br>

<button onclick="selectAll(60)">Randomly select 60 photos</button>
<button onclick="deSelectAll()">Deselect All</button>
<br>
<textarea id="seleArea" style="width:80%; height:120px; ">

</textarea>
<br>
NOTE: photos of pixabay stock are very beautiful.  <br>
Unfortunately the links to those photos are only valid for a day or two
<br>
(4) Tap this button <button onclick= "arrayInit('seleArea')">Load photos</button>
<button onclick= "copy('seleArea')">Copy the above js code<br>(mainly for unsplash)</button>
 <br><br>
<b class="sect">C. SELECT MUSIC</b>
<br>
(5) Tap any blue title of a video in the table below to listen to music<br>
<b class="sect2">Saved list</b><br>
    <div style="width:85%;height:200px;overflow:auto;background-color:white">
  <table class="listTab" id="listTab2" style="width:100%"><tbody id='tbody2'></tbody></table>
 
  </div>
<br>
<div class="sect2" style="width:85%">
FOR LOOP PLAYING ONLY ONE VIDEO<br>
Change all number in the last column to zero.<br>
In the video row tap button 0 to change to 1. <br>
Tap “Copy from Saved to Temporary". <br>
Play the video in Temporary list.
</div>

<button onclick="allRuBut()">Change all to zero</button>
<button onclick="copyList()">Copy from Saved to Temporary</button>
<button onclick="toView('screen')">Scroll to video</button>
<br>

<b class="sect2">Temporary list</b><br>
<div style="width:85%;height:170px;overflow:auto;background-color:white">
  <table class="listTab" id="listTab3" style="width:100%"><tbody id='tbody3'></tbody></table>
  </div>
<br>
<div class="sect2" style="width:85%">
FOR ADDING A YOUTUBE VIDEO TO TEMPORARY LIST<br>
Open youtube.com. Search video. Tap "Share" to get link.<br>
Return to this page.<br>
Clear the text in the below text area. Paste the video link. <br>
Tap "Add video". Swepe up to see just added video link.<br>
Tap to play it. After only few seconds the full code appears.<br>
Copy it. Open this html file. Swepe to the end.<br>
Find the line with vst = ''.<br>
After that paste the code.
</div>
<button onclick="scanOne()">Add video (use youtube link)</button>
<button onclick="copy('oneArea')">Copy the code below</button>
<br>
<textarea id="oneArea" style="width:80%; height:50px;background-color:white; font-size:1em">
 https://youtu.be/DgSlq0oBj9k
</textarea>
<br>
<br>
<button onclick="setSm()">Small</button>
<button id="bigBut" onclick="setBig()">Big</button>
<button type="button" onclick="pauseYoutube();">Pause</button>
<button id="screen" type="button" onclick="playYoutube();">Play</button>
<br>
  
  <div id="player" class="videoSm"></div>
<br>0
<input id="price" type="range" class="progress" min="0" max="2400" value="0"/>
<br>
<div class="sect2" style="85%">
TO PLAY ONLY A SECTION OF THE VIDEO<br>
While playing video you can drag the circle button on progress bar, <br>
tap button with +xx or -xx to forward or backward to xx seconds. <br>When you find a beginning tap "Start time" <br>
When you hear the end tap "End time"<br>
Tap "Copy the code below"<br>
Open this html file. Swepe down to the end. <br>
Find the line with vst = ''. After that paste the code.
</div>

<div id="timeShow" style="display:inline;width:300px; border:2px solid black; padding:3px; margin:5px;font-size:1em;font-weight:bold">

<div id="curTimeDiv" style="margin-left:5px;padding-top:3px;width:75px;text-align:right;font-weight:normal; display:inline">
  time
</div>
</div>

<div id="showState" style="display: inline-block; width: 85px; text-align:center; height:22px"> </div>

<span id="priceNum"></span>
<br><br>
<div id="subAdd">
<button>-180</button>
<button>-90</button>
<button>-30</button>
<button>-10</button>
<button> -3 </button>
<button> -1 </button>
<div class="brDiv"></div>
<button> +1 </button>
<button> +3 </button>
<button>+10</button>
<button>+30</button>
<button>+90</button>
<button>+180</button>
</div>
<div class="brDiv"></div>
<button onclick="showCurrS()">Start time</button>
<button onclick="showCurrE()">End time</button>
<button onclick="copy('stendArea')">Copy the code below</button>
<br>
<textarea id="stendArea" style="width:80%; height:90px; background-color:white; font-size:1em">
</textarea>
<br><br>
<b class="sect">D. PLAY SLIDESHOW WITH MUSIC</b><br>
(6) Tap "Stop". <b class="sect2" style="color:#E11299;"">
Then wait for 1 or 2 minutes until all photos fully loaded</b><br>
(7) Tap "Play Slide" button to play slideshow. After that don't tap it any more.
<br>
<button onclick="toView('slides')">Scroll to Slideshow</button>

<button style="color:red; font-weight:bold" onclick="stopYoutubeS()">Stop</button>

<button style="color:green; font-weight:bold" onclick="setIntv(this)">Play Slide</button>

<div class="container">

<div id="slides">
<div id="stt"></div>
</div>

</div>  <!-- container -->
<br>
<b class="sect">E. PLAY SLIDESHOW AND SCREEN RECORD
</b>
<br><br>
<img src="image1.jpeg" style="width:85%">
<br><br>
<img src="PNG-image2.png" style="width:85%">

<br>
<br>
<b class="sect">F. HELP</b>
<br>
<br>
<div id="helpDiv" style="width:85%; font-size:1em; background-color:#FFFFE0; line-height:130%; padding:1em; height:300px; overflow:auto; text-align:left; border:1px solid gray">
Here is my Web app (on base of HTM, CSS and JavaScript).<br>
I have tested it on my Ipad, my Android phone and my LG smart TV.
<br><br>
I use it to quickly generate photo slideshow with music from youtube video. After that, by using my Ipad I can perform screen record to make mp4 video.<br><br>
To test  this app, you need just type the following adress to the address box on your TV, phone, Ipad or Laptop then add this address to Bookmarks.<br><span class="sect2">
https://pvhung20.000webhostapp.com/f1-photo-music.html
</span><br><br>
In essence, this application is composed of 2 applications: <br>
1 Collect links to photos online to generate slide show .  <br>
2 Save your favorite music, songs to a list to listen continuously one by one
<br><br>
If you want to use your Ipad to run my app and convert the html slideshow to mp4 video then you should install the iOS app <b>Koder code editor</b>. Put my html file there, run it and peform screen record.<br>
Open "Photos" app of the Ipad, find created mp4. Tap "Edit" then crop  this video. Now it's ready to be uploaded to youtube.com.

<br><br>
I don't use Google Search to get photos because I don't know if I can use the API to find the photos quickly.  <br>
Furthermore, the photos produced by Google Search are often copyrighted or sold.  I use 2 free online image stores, Pixabay (high quality images) and Unsplash (images are not as eye-catching as Pixabay but all your search tags are well answered).
<br><br>
In my opinion, if you use mobile phones, you should install <b>Opera browser</b>. Using it to view my website, the font is just right and beautiful.<br><br>
If you want to download this html file to your phone to save more music as you like, you should install the Android app <b>anWriter</b><br><br>

<div>
<br>
   </div>
    
 <script src="https://www.youtube.com/iframe_api"></script>

<script>

pixN = 0;
pageCount = 0;

function showIt(thi){
	$(".result[style*='display: block']").hide();
	str = thi.innerHTML
	str1 = str.substring(3);
	num = Number(str1);
// alert('num = ' + num);
	$('.result').eq(num).show();
	theIn = $('.result').eq(num).find('p').html();
	$('#theInfo').html(theIn);
	$('.result').eq(num).find('p')[0].scrollIntoView();
	window.scrollBy(0, -230);
}

function readyTerm(thi){
	$('#key').val($(thi).html());
}

 $('#subAdd button').click(function(){//for the square divs
   // alert('button has been clicked')
   // alert($(this).html());
   xx = Number(p.value) + Number($(this).html());
     player.seekTo(xx);
 })

var p = document.getElementById("price")

p.addEventListener("input", function() {
     player.seekTo(p.value);
}, false); 

function showCurrS(){
	ct = player.getCurrentTime().toFixed(1)
	$('#stendArea').val(ct);
}

function showCurrE(){
	ct = player.getCurrentTime().toFixed(1)
	oldVal = $('#stendArea').val()
	tit1 = $(par).closest('tr').find('a').html();
	id1 = $(par).closest('tr').find('.vidCL').html();
	ss = 'vst += "' + tit1 + '" +\n' + '"@' + id1 + '#' + oldVal + '>' + ct + '@";\n\n'
	$('#stendArea').val(ss);
	
	str =  tit1 + '@' + id1 + '#' + oldVal + '>' + ct + '@;\n'
	readJS(str, 'tbody3');
}

function myFunc1(){
  let x = document.getElementById("key");
  document.getElementById("search").value = x.value
}

function newS(){
	var okS = confirm("Do you really want to reload the page?");
if (okS)
    {
            window.location.reload(); 
		  return false
    }
}

function allRuBut(){
	$('.ruBut').each(function(i, obj) {
	   if($(this).html() == 1){
	   		$(this).html(0);
	   }
	});
}

function scanOne(){
	url = $('#oneArea').val().trim()
     var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;

     var match = url.match(regExp);
  	name1 =   (match&&match[7].length==11)? match[7] : false;
     vstOne = 'Title 1@' + name1 + '@;\n';
     readJS(vstOne, 'tbody3');
}

/////// PIXABAY

pNum = 1;
'use strict';

var slideInterval;

document.getElementById('btnPi').addEventListener('click', function(e) {
  e.preventDefault(); 

if (!navigator.onLine) {
	alert('Check connection to internet !')
	return
}

  fetch( createURL(document.getElementById('key').value) )
  .then( function( data ) {
    return data.json();  
  })
  .then( function( json ) {
    	jsonSt = JSON.stringify(json, null, 2);
	$('#jsonArea').val(jsonSt); 
	
	ptotal = json.totalHits
	ss = 'Remaining: ';
	dif = ptotal - pNum*70
	expr = ' ('+ ptotal + ' - 70 x ' + pNum + ')'
	if (dif <= 0 ){
		ss += '<b>Nothing left </b>' + expr
	}else{
	     ss +=  '<b>' + dif + '</b>' + expr;
	}
	$('#info-pixb').html(ss)
	
    createImage( json );
    pNum++;
  })
})

function createURL( value ) {
  var API_KEY = '7126297-c5a1bdd21b4ba1a7d9969984b';
  var baseUrl = 'https://pixabay.com/api/?key=' + API_KEY;
  var keyword = '&q=' + encodeURIComponent( value );
  var option = '&orientation=horizontal&per_page=70&page=' +      pNum;
  var URL = baseUrl + keyword + option;
// alert(URL);
  return URL;
}

count =0

    RuArr =[]

function createImage( json ) {
       	RuArr[pageCount] = 0
	
		zz = '<button onclick="showIt(this); return false;">' + ' pi' + pageCount + ' ' + 
		'</button> <div class="selRuDiv" id="Ru' + pageCount + '">' + RuArr[pageCount]
	+ '</div> '
	$('#resMenu').append(zz);
	
       resDiv = document.createElement('div');
    resDiv.id = "pu" + pageCount
       /* resDiv.style.width = "86%"; */
       resDiv.className = "result";
       ele = $(resDiv);
       $('#resultBig').append(ele);

        // var result = document.getElementById('result');
	   ss1 = '';
	   len =  json.hits.length 
	info = '<p id="pg' + pageCount + '"> PIXA. ' + document.getElementById('key').value + ' - page ' + (pNum - 1) + 
	': ' + ((pNum - 1)*70 + 1) + ' - ' + (pNum*70) + '</p>';
        for (let i = 0; i < len; i++) {
               src =  json.hits[i].webformatURL; 
			ss1 +=  '<div class="cell1" id="pu' + count + '" onclick = \'' +
			'toggleChoice(this)\'>' +
'<div class="indicator"></div>' +
               '<img src="' + 
			src + '" alt="' + json.hits[i].largeImageURL + '">' +
           '</div>'
			count++;
         } 
			$(ele).append(info + ss1);
			pageCount++
}

////// UNSPLASH
unsN = 0;
currPage = 1;
totalPages = 1;

var pageMax;
clientId = "gK52De2Tm_dL5o1IXKa9FROBAJ-LIYqR41xBdlg3X2k"; 

function SearchPhotos(){
       query = document.getElementById("search").value;
       url = "https://api.unsplash.com/search/photos/?client_id="+clientId+"&query="+query + "&per_page=30&page=" + currPage;
	 $.getJSON(url, callBack); 
};

function callBack(data, status) {
       RuArr[pageCount] = 0
	
		zz = '<button onclick="showIt(this)">' + ' un' + pageCount + ' ' + 
		'</button> <div class="selRuDiv" id="Ru' + pageCount + '">' + RuArr[pageCount]
		+ '</div> '
	$('#resMenu').append(zz);
	
	  resDiv = document.createElement('div');
	 resDiv.id = "pu" + pageCount;
       /* resDiv.style.width = "86%"; */
       resDiv.className = "result";
       ele = $(resDiv);
       $('#resultBig').append(ele);

	jsonSt = JSON.stringify(data, null, 2);
	$('#jsonArea').val(jsonSt); 
	
	ptotal = data.total
	ss = 'Remaining: '
	dif = ptotal - currPage*30
	expr = ' ('+ ptotal + ' - 30 x ' + currPage + ')'
	if (dif <= 0 ){
		ss += '<b>Nothing left </b>' + expr
	}else{
	     ss +=  '<b>' + dif + '</b>' + expr;
	}
	$('#info-unsp').html(ss)
	
	info2 = '<p id="pg' + pageCount + '"> UNSP. ' + document.getElementById("search").value + ' - page ' + 
	(currPage - 1) + 
	': ' + ((currPage - 1)*30  + 1) + ' - ' + (currPage*30) + '</p>'
	
        ss1 = '';
        for (let i = 0; i < data.results.length; i++) {
			ss1 +=  '<div  onclick="toggleChoice(this)" ' +
			'class="cell1" id="pt' + count + '">' +
'<div class="indicator"></div>' +
			'<div class="desc">' + count + '- ' + data.results[i].description +
               '</div><img src="' + 
			data.results[i].urls.small +
			'" alt="' + data.results[i].urls.regular + '">' +
               '</div>'
			count++;
         } 
			$(ele).append(info2 + ss1);
		currPage++
		pageCount++
}

////////// COMMON

yes = [];
no = [];
// ii = 0;

function toggleChoice(thi){
   	  idx = $(thi).closest('.result').attr('id');
   	  ii = Number(idx.substring(2));
       var selindex = yes.indexOf(thi.id);
       var nolindex = no.indexOf(thi.id);
       if(selindex ==  -1){  var nolindex = no.indexOf(thi.id);

      RuArr[ii]++
	$('#Ru' + ii).html(RuArr[ii]);
	thi.firstElementChild.innerHTML = '<i class="fas fa-check-circle"></i>';
	    yes.push(thi.id);
	
  	}else{
    yes.splice(selindex, 1);
    thi.firstElementChild.innerHTML = '';

 	RuArr[ii]--
	$('#Ru' + ii).html(RuArr[ii]);
     }
     ss = yes.join(', ');
     $('#seleArea').val(ss);
     showYes();
}

function showYes(){
	yesLen = yes.length;
	$('#yesDiv2, #yesDiv3').html(yesLen + ' photos selected');
}

function makeDiv(){
	len = yes.length;
	st = 'imgArr = [\n';
	for(i=0; i<len; i++){
		sour = $('#' + yes[i]).find('img').attr('alt');
		ds = typeof $('#' + yes[i]).find('.desc')[0]
		des1 = '';
		if(ds == 'object'){
		des5=  $('#' + yes[i]).find('.desc').html();
		des = des5.replace(/"/g,'\\"');
		des = des.replace(/\n/g, '<br>');
		xx = des.indexOf('-') + 1;
		des1 = (des.substring(xx)).trim();
		}
		st += '"' + sour + '#>' + des1 + '",\n\n'
	}
	aa = st.lastIndexOf(',')
	st1 = st.substring(0,aa) + '\n];';
	$('#seleArea').val(st1);
}

function selectAll(nb){
  deSelectAll();
  el =   document.getElementsByClassName("cell1")
   len = el.length;
   if(len <= nb){
	num = len;
   }else{
	num = nb;
   }
   arr1 = [];
   for(i=0; i<len; i++){
   	  arr1.push(i)
   }
   shuffled = [...arr1].sort(() => 0.5 - Math.random());
   arr2 = shuffled.slice(0, num);

     for(i=0; i<len; i++){
            bull = el[i].querySelector('.indicator').innerHTML == '';
            bull2 = arr2.includes(i);
		  if(bull && bull2){
       			el[i].click();
            }
    }
}

function deSelectAll() {
    document.querySelectorAll(".cell1")
       .forEach(function(el) {
		  if(el.querySelector('.indicator').innerHTML != ''){
       			el.click();
            }
    });
}

//////// COPY

var copy = function(elementId) {
	var input = document.getElementById(elementId);
	var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i);
	if (isiOSDevice) {
		var editable = input.contentEditable;
		var readOnly = input.readOnly;
		input.contentEditable = true;
		input.readOnly = false;
		var range = document.createRange();
		range.selectNodeContents(input);
		var selection = window.getSelection();
		selection.removeAllRanges();
		selection.addRange(range);
		input.setSelectionRange(0, 999999);
		input.contentEditable = editable;
		input.readOnly = readOnly;
	} else {
	 	input.select();
	}
	document.execCommand('copy'); 
	alert('copied to the clipboard'); 
	input.blur();
}

/////////////////////// SLIDESHOW

dur = 4000;
stt = 0;

var currentSlide = 0;

function nextSlide(){
	goToSlide(currentSlide+1);
}

function previousSlide(){
	goToSlide(currentSlide-1);
}

function goToSlide(n){
slides = document.querySelectorAll('#slides .slide');
// alert('n = ' + n + '\n' + 'currentSlide = ' + currentSlide);
	slides[currentSlide].className = 'slide';
	
	currentSlide = (n+slides.length)%slides.length;
	slides[currentSlide].className = 'slide showing';
}

var playing = true;

function arrayInit(area){
     $('#slides').html('<div id="stt"></div>');

     makeDiv();
     alert('OK 1');
	const script = document.createElement("script");
	const str = $('#' + area).val();
	script.text = str
	document.body.appendChild(script);
	alert('OK 2');
	init();
}

  function init(){
	len = imgArr.length
	ss = '<div class="slide showing"><img src="'
	+ getSrc(imgArr[0]) + '">' +
	  '<div class="text">' + 
		getAlt(imgArr[0])
               + '</div>' 
		+ '<div class="stt">1' + ' / ' + len 
               + '</div></div>'
	
	for(i=1; i<len ; i++){
		ss +=  '<div class="slide"><img src="' + 
		getSrc(imgArr[i])+ '">' +
	     '<div class="text">' + 
		getAlt(imgArr[i])
               + '</div>' 
		+ '<div class="stt">' + (i + 1) + ' / ' + len 
               + '</div></div>'
	}
	$('#slides').append(ss);
	
	// document.getElementById("slides").innerHTML = ss;
   }

function getSrc(st){
     if(st.search('#>') > 0){
		arr = st.split('#>');
		return arr[0]
	}else{
		return st
	}
}

function getAlt(st){
      if(st.search('#>') > 0){
		arr = st.split('#>');
		mm = arr[1].trim();
	     mm1 = mm.replace('null', '')
		return mm1;
	}else{
		return ''
	}
}

function setIntv(thi){
if(vidMode){
       player.seekTo(0, true);
       playYoutube();
}else{
	  player.loadVideoById({'videoId': gvidSt,
               'startSeconds': gstart,
               'endSeconds':  gend
       });
}
       goToSlide(0);
       slideInterval = setInterval(nextSlide,dur);
        toView('slides')
}

function toView(ide){
	document.getElementById(ide).scrollIntoView();
}

function toBegin(thi){
	goToSlide(0);
}

////////////////////////  PLAY VIDEO

 var vvsum = 0; 

$(document ).ready(function(){
     $('#player').addClass('videoSm'); 
	readJS(vst, 'tbody2');
});

 function readJS(str, place){
    vst1 = str.replace(/@$/g, '');
    arr = vst1.split('@');
    mmm = 'playVid(this)'

    for(i=0;i<arr.length;i++){
        sst4 = '';
        if(i%2 == 0){ // if0
            if(arr[i+1].search(/#/g) < 0){ // if1
                sst1 = '<b>'+vvsum+
                '</b>: <a class="titCL" href="#" onclick="'+mmm+';return false" title="' + arr[i+1] +  '">' +
                arr[i]+'</a>';
                sst2 = '<span class="vidCL">'+ arr[i+1] +'</span>';
            }else{

      		 bb = arr[i+1].split('#')
                aa = bb[1].split('>')
                if(aa.length == 3){ // if2
        sst1='<a href="#" onclick="' + mmm + '; return false" title="' + arr[i+1] + '">' + arr[i]+ '</a>'
sst4 = ' # ' + aa[2]
			 }else{
				sst1= '<a href="#" onclick="' + mmm + '; return false" title="' + arr[i+1] + '">' + arr[i] + '</a>'
sst4 = ' # ' + aa[0] + '-' + aa[1];
			} // if2
                sst2 = '<span class="vidCL">'+ arr[i+1].substring(0,11) +'</span>';
            } // if1

            sst3 = '<tr style="background-color:white">'+
            '<td width="80"><img width="80" height="60" '+
            'src="http://img.youtube.com/vi/'+ arr[i+1].substring(0,11)
+'/default.jpg"></td>'+
            '<td>'+ sst1 + '<br>'+ sst2 +  sst4

 + '</td><td style="width:25px">'+
            '<button class="ruBut" onclick="removeUndo(this)" style="width:100%">'+
            '0</button></td></tr>';
            document.getElementById(place).innerHTML += sst3
            vvsum++;  
        } // if0
    }    // for

}

///////

 function readJSkt(str, place, kt){
alert('str = ' + str);
    vst1 = str.replace(/@$/g, '');
    arr = vst1.split('@');
      mmm = 'playVid(this)'

    for(i=0;i<arr.length;i++){
        sst4 = '';
        if(i%2 == 0){ // if0

            if(arr[i+1].search(/#/g) < 0){ // if1
              
                sst1 = '<b>'+vvsum+
                '</b>: <a class="titCL" href="#" onclick="'+mmm+';return false" title="' + arr[i+1] +  '">' +
                arr[i]+'</a>';
                sst2 = '<span class="vidCL">'+ arr[i+1] +'</span>';
            }else{

      		 bb = arr[i+1].split('#')
                aa = bb[1].split('>')
                if(aa.length == 3){ // if2
        sst1='<a href="#" onclick="' + mmm + '; return false" title="' + arr[i+1] + '">' + arr[i]+ '</a>'
			alert('sst1 = ' + sst1);
			sst4 = ' # ' + aa[2]
			 }else{
			
			alert('aa.length != 3');
				sst1= '<a href="#" onclick="' + mmm + '; return false" title="' + arr[i+1] + '">' + arr[i] + '</a>'
			
sst4 = ' # ' + aa[0] + '-' + aa[1];
			} // if2
                sst2 = '<span class="vidCL">'+ arr[i+1].substring(0,11) +'</span>';
            } // if1

alert('sst1 = ' + sst1);

            sst3 = '<tr style="background-color:white">'+
            '<td width="80"><img width="80" height="60" '+
            'src="http://img.youtube.com/vi/'+ arr[i+1].substring(0,11)
+'/default.jpg"></td>'+
            '<td>'+ sst1 + '<br>'+ sst2 +  sst4

 + '</td><td style="width:25px">'+
            '<button class="ruBut" onclick="removeUndo(this)" style="width:100%">'+
            '0</button></td></tr>';
$('#' + kt).val(sst3);
            document.getElementById(place).innerHTML += sst3
            vvsum++;  
        } // if0
    }    // for

}

///////////

function copyList(){
	/* ru = document.getElementsByClassName('ruBut');
	alert(ru.length) */
	st = '';
	$('.ruBut').each(function(i, obj) {
	   if($(this).html() == 1){
     		st += '<tr>' + $(this).closest('tr').html() + '</tr>'
        }
});
	// alert(st);
	$('#tbody3').append(st);
}

  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  normalW = '400';
  normalH = '226';
  clientH = document.body.clientHeight;
  bigScreen = false;
  var player;
  startvid = 'NNTpqolsevg';;/* 'VH8UzK_v6yI'; */
 playerState = '';

/* line 980 gInterval = 100 */
  
  function onYouTubePlayerAPIReady(){  
       interval = setInterval(myTime, gInterval); 
        player = new YT.Player('player', {
            width: normalW,
            height:normalH,
            videoId: startvid,
            playerVars: 
            { 'autoplay':0, 'rel':0, 'showsearch':0, 'controls':1,'autohide':0},
            events: {
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError        
            }
        });    
  }
  
 function onPlayerError(error){
          nextVid();
      }
      
 function onPlayerStateChange(event) {
      switch (event.data) {
           case YT.PlayerState.PLAYING:
            playerState = 'playing';
            	// currDuration = sformat
               idx = $(par).closest('tbody').attr('id');
               if(idx == 'tbody3'){
				theTi = player.getVideoData().title;
				
				theTit = theTi.replace(/"/g,'\\"');
				
				tit1 = $(par).closest('tr').find('a').html();
				if(tit1 == 'Title 1'){
					 $(par).closest('tr').find('a').html(theTit);
					 vidLine = 'vst += "' + theTit + '" +\n' +
			'"@' +   $(par).closest('tr').find('.vidCL').html() + '@";'
			           $('#oneArea').val(vidLine);
			     }
               }
            break;

            case YT.PlayerState.ENDED:
               playerState = 'ended';
               nextVid(); 
            break
        }
   }

/////

function myTime(){     
	if(playerState == 'playing'){
      	curTime =  player.getCurrentTime();
     $('#showState').html(curTime.toFixed(1));
      	document.getElementById('curTimeDiv').innerHTML = 		sformat(curTime) + ' / ' +  sformat(player.getDuration());
  		gDur = player.getDuration().toFixed(1);
   $('#priceNum').html(' /' + gDur);
   $('#price').attr('max', gDur + '');  
$('#price').val(player.getCurrentTime().toFixed(1));
    }
  }

/////

 vidMode = true;
 currAnch = {}
  par = {};
  currColor = "#FFE1B2";
  gstart = 0; gend = 0;

   function playVid(obj){
   		vidStr = obj.title;
          // alert(vidStr);
      currAnch = obj

      par = obj.parentNode;
	$('.listTab').find('td').each(function(){
	
		    $(this).css("background-color", "white");
      });

      $(obj).closest('tr').find('td').each(function(){
            $(this).css("background-color", currColor);
      });

      if(vidStr.indexOf('#') < 0){
          player.loadVideoById(vidStr, "large");
      }else{
          vidMode = false;
          pl = vidStr.split('#')
          gvidSt = pl[0];
      	steA = pl[1].split('>')
       	gstart = Number(steA[0]);
       	gend =  Number(steA[1]);
       	player.loadVideoById({'videoId': gvidSt,
               'startSeconds': gstart,
               'endSeconds':  gend
       });
      }
 }

/////
 
 function playYoutube() {
      player.playVideo();
 }
        
 function pauseYoutube() {
      player.pauseVideo();
 }
        
 function stopYoutube() {
      player.seekTo(0, true);
      player.stopVideo();
 }

 function stopYoutubeS() {
      if(vidMode){
      	player.seekTo(0, true);
      }else{
		player.seekTo(0, true);
      }
      player.stopVideo();
 
      clearInterval(slideInterval);
 }
 
  function nextVid(){
          ob =   $(currAnch).closest('tbody').find('a');
          mm = $(currAnch).closest('tbody').find('a').length;
		nn = $(currAnch).closest('tbody').find('a').index(currAnch);
		//;alert(nn + ' / ' + mm);
		nn++
		if(nn == mm){
		nn = 0
		}
		obx = $(ob).eq(nn)[0];
		playVid(obx);
 }

///////

function setSm(){
	   $('#player').removeClass('video').addClass('videoSm');
}

function setBig(){
         $('#player').removeClass('videoSm').addClass('video');
}

 function pSize(){
	vt = $('#player').css('width');
	if(vt == "400px"){
		bigSmall(800);
	}else{
		bigSmall(400);
	}
 }

 function bigSmall(ww){
      hh = Math.round(ww*516/812);
      player.setSize(ww,hh);
      var size =  ww +'px';
 }

function sformat( s ) {
          var fm = [
                    Math.floor(Math.floor(s/60)/60)%60,                //HOURS
                    Math.floor(s/60)%60,                               //MINUTES
                    Math.floor(s%60)                                   //SECONDS
                      ];
          var xx = $.map(fm,function(v,i){ 
                return ( (v < 10) ? '0' : '' ) + v; }).join( ':' );
                var yy = xx.replace(/^0:|^00:|^0/g,'');
                zz = yy.replace(/^0/g,'');
                return zz
 }   

var currDuration;
gInterval = 100; //  (miliseconds)    

oldTime = 0;

 count = 0;
 startS = false;

 function removeUndo(ob){
      var butVal = ob.innerHTML;
      if(butVal == '1'){
          ob.innerHTML = '0';
          // ob.parentNode.style.backgroundColor = "#CCCCCC"
      }else{
          ob.innerHTML = '1'; 
          // ob.parentNode.style.backgroundColor = "white"
      }
 }
 
 function scrollToElement(elem, add){ 
      var top = $("#"+ elem).position().top;
      $(window).scrollTop( top - add);
 }

vst = '';

vst += "Begin The Beguine - (Julio Iglesias) - Rhumba - Cover by Horia Ioan - Yamaha Genos" +
"@5i3Tzrp7WC0@";

vst += "Historia de un amor - (Luis Miguel) - Bolero Lento - Cover by Horia Ioan - Yamaha Genos" +
"@uDgZqq_pETc@";

vst += "Arivederci Roma + O sole mio - Italian Rhumba Medley - Cover by Horia Ioan - Yamaha Genos" +
"@3kJvisROAJM@";

vst += "Nathalie - (Julio Iglesias) - Rhumba - Cover by Horia Ioan - Yamaha Genos" +
"@4BIkBgQtPN8@";

vst += "Vambrace Music - Million Roses Remix" +
"@DgSlq0oBj9k@";

vst += "THE WINNER TAKES IT ALL (ABBA) - ROBERTO ZEOLLA ON YAMAHA GENOS" +
"@ui_F6ckRpzE@";

vst += "HISTORIA DE UN AMOR (ROBERTO ZEOLLA ON YAMAHA GENOS)" +
"@CkjMqBESnY4@";

vst += "JE T' AIME....... MOI NON PLUS (Cover di Roberto Zeolla)" +
"@VqjBFrwPSyo@";

vst += "Cha Cha Cha's - Patricia & Pepito" +
"@NzsmCWhpX0s@";

vst += "Green green grass of home.. Maestro" +
"@9_XLqLFa6IA@";

vst += "i cant stop loving you Maestro Luc" +
"@e31ao-8eebc@";

vst += "Roses are red my love  Maestro luc" +
"@cCbhbavWWyM@";

vst += "Smokie   cover  Yamaha Genos /Chris Norman & Suzi Quatro" +
"@KlS6QOWUHIc@";

vst += "Instrumental Boleros For the Soul - The Best Guitar Melodies of All Time" +
"@cmymTYmbd8Y@";

vst += "Instrumental Boleros For the Soul - The Best Guitar Melodies of All Time" +
"@cmymTYmbd8Y#2575.2>2744.8@";

vst += "Golden Memories Songs Of Yesterday 🎸 Oldies Instrumental Of The 50s 60s 70s 🎸" +
"@VDMXd43eSAA@";

vst += "Grandes Boleros Orquestados En Guitarra y Piano Más Hermosa Del Mundo - Musica para relajarse" +
"@U9I0VEKDHCw@";

vst += "Grandes Boleros Orquestados En Guitarra y Piano Más Hermosa Del Mundo - Musica para relajarse" +
"@U9I0VEKDHCw#1633.7>1873.9@";

vst += "Mr. Guitar - Shoji Youkoghi Guitar Instrumental" +
"@NNTpqolsevg@";

vst += "Golden Oldies Instrumental 1957-1977 (1h07m)" +
"@4ZGPi2ITpTY@";

vst += "The best acustic guitar (2h 48m)" +
"@7e7zt-KcCIg@";

vst += "Latin Guitar (56m)" +
"@u-JXhEsvB24@";

vst += "Schubert Serenade" +
"@ZpA0l2WB86E@";

vst += "Chopin Tristesse - NO OTHER LOVE - James Last" +
"@KyBGSVfVRCY@";

vst += "Yesterday once more" +
"@fgzWWyLSNmk@";

vst += "Yesterday once more - Salem Dhiab" +
"@J-MrDdi_aug@";

vst += "Cicci Guitar Condor - Goodbye my love goodbye" +
"@Xwl7JIPE_TQ@";

vst += "Cicci Guitar - Fernando - playlist" +
"@5y92UyVDnOo@";

vst += "Cicci Guitar Condor - Ave Maria" +
"@lRL-Z8ZiGDg@";

vst += "Top of the world - Capenters" +
"@B9QaO5OToEE@";

vst += "Quiereme mucho karaoke" +
"@cbJ-hqvaPcM@";

vst += "Romanticos de Cuba Quiereme mucho" +
"@PessABvhVTs@";

vst += "Romeo and Juliet" +
"@GtmW0BfKpA8@";

vst += "Concerto de Aranjuez" +
"@sgbdOq-evhU@";

vst += "Organo Melodico" +
"@19WAs_llN80@";

vst += "Musica Elegante" +
"@z7ki0mqw0pc@";

vst += "Anniversary  Song" +
"@Ysv0_whyyQ8@";

vst += "RUMBA Besame mucho" +
"@PECAatbh5fY@";

vst += "HAWAIIAN´S GUITAR SIBONEY" +
"@W5vtizWEIrM@";

vst += "Frank Pourcel" +
"@uMZmQaPoQFI@";

vst += "Acustic Guitar Music" +
"@s1C9SGwvd6g@";

vst += "Italy/Napoli (Walking tour:Santa Lucia) Part 3"+     
"@G8RQZ_RmR_U@";

vst += "Frank Chacksfield - Come Back To Sorrento"+
"@MasOYWdgfa8@";

vst += "Rayuna pulau kelapa" +
"@ODqFv4b7TUA@";

vst += "An Der Schönen Blauen Donau, Op. 314" +
"@qKvzjkLzrsc@";

vst += "Romantic Music with Spectacular Views of Italy" +
"@jpRM6QHbBLI@";

vst += "Romantic Music with Spectacular Views of Italy" +
"@jpRM6QHbBLI#1738.0>1919.8>Top of the world@";

vst += "Romantic Music with Spectacular Views of Italy" +
"@jpRM6QHbBLI#1920.7>2171.2@";

vst += "Romantic Music with Spectacular Views of Italy" +
"@jpRM6QHbBLI#4742.8>4922.9>Cuando Calienta El Sol@";

vst += "Golden Instrumentals from 1961 - 1981" +
"@Lb_4xskRI38@";

vst += "Golden Instrumentals from 1961 - 1981" +
"@Lb_4xskRI38#362.3>555.3>Too Young@";

vst += "Golden Instrumentals from 1961 - 1981" +
"@Lb_4xskRI38#2486.3>2696.1>Tell Laura I Love Her@";

vst += "Soft Morning Guitar Music ☕ Elegant Coffee Music & Sweet Guitar Acoustic To Relax, Study and Work" +
"@ZWAAn0aoGDA@";

vst += "Ray Charles - I Can't Stop Loving You ( 1962 )" +
"@w-YqaTDDCDM@";

vst += "Tom Jones - Delilah - 1967-68" +
"@BvRUblJ_hqM@";

vst += "Helene Fischer - Ave Maria" +
"@7F_1kq5-6QE@";

vst += "Lobo - I'd Love You To Want Me (1972) 4K" +
"@1t2r-W-_FjI@";

vst += "Sealed With A Kiss Instrumental" +
"@PTzvj0pRZbk@" 

vst += "Barcelone- Cuando calienta el sol -Guittara Latina" +
"@VH8UzK_v6yI@";

vst += "B6. Cuando Calienta El Sol - The Ventures" +
"@mRmFCA649qw@";

vst += "Cuando calienta el sol Carlos y Mario Rigual instrumental remasterizado" +
"@bpZoi4753GM@";

vst += "SMOOTH JAZZ Cuando Calienta el Sol" +
"@YSxmKQWa7KY@";

vst += "Conquistador - El Lute \"Boney M\"- (Guitar Instrumental Version)" +
"@7MBRifqaI0I@";

vst += "A beautiful love song that everyone should listen to! Greatest Romantic Love Songs Ever" +
"@0v_xkq1pMOk@";

vst += "Maluku" +
"@kKb9Qad-UT0#2266>2426@";

vst += "In den Tiroler Bergen Mit Andreas Aschaber (Auner Andi) aus Westendorf Tirol" +
"@NzmMSxKR5GY@";

vst += "The best acustic guitar (2h 48m)" +
"@7e7zt-KcCIg@";

vst += "The best acustic guitar (2h 48m)" +
"@7e7zt-KcCIg#1927.4>2203.2>Million Roses@";

vst += "The best acustic guitar (2h 48m)" +
"@7e7zt-KcCIg#5925.9>6023.1@";

vst += "The best acustic guitar (2h 48m)" +
"@7e7zt-KcCIg#3736.0>3958.1@";

vst += "Latin Guitar (56m)" +
"@u-JXhEsvB24#980.4>1130.3>Manha de Carnaval@";

vst += "Grandes Boleros Orquestados En Guitarra y Piano Más Hermosa Del Mundo - Musica para relajarse" +
"@U9I0VEKDHCw#3613.6>3770.9>The sound of silence@";

vst += "Musica Elegante" +
"@z7ki0mqw0pc#504.7>759.1>I Started A Joke@";

vst += "Because I'm Stupid - Kim Huyn Joong" +
"@9l1ft6r_LQQ@";

vst += "Hasta Siempre,Comandante (Cuba)" +
"@JyhFe1A8hWQ@";

vst += "Smokie - Needles and Pins (Musikladen 08.10.1977)" +
"@ibtdJVjMHa0@";

vst += "Hana" +
"@8QA-SYL--80@";

vst += "ave maria SCHUBERT violin and flute" +
"@PgXC84yPlJ4@";

/* BEST */

vst += "Jian Wang playing Schubert Ave Maria" +
"@ipngcOXEn4Q@";

vst += "CAN'T HELP FALLING IN LOVE - ELVIS PRESLEY | Live at Steinway Spirio Studios + Sheet Music" +
"@Ti20iuR_yss@";

vst += "Elvis Presley - Can't Help Falling in Love (Official Lyric Video)" +
"@O-aavAlSYgc@";

vst += "TOUCH BY TOUCH-by-Joy(w/lyrics)created by:Zairah" +
"@2Lmqp2wpg-g@";

</script>
</body>
</html>
JAVASSCRIPT ON IPAD (to see the list click ← then click ≡ and ⌄)

CODE f1-photo-music

Popular posts from this blog

PHP JQUERY PROXY DEMO

EXAMPLE ON MODIFYING HTML5 MEDIAELEMENT.JS PLAYER

CHINESE COMIC
