encrypt
/
generic-webradio-player


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
							<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="theme-color" content="#ffffff">
    <title>Test player</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/player.css">
  </head>
  <body>
    <audio id="radio"></audio>
    <div id="player">
      <div id="contents" hidden>
	<div id="altreRadio" class="tags">	 
	</div>
	<div id="programmi">
	  <div class="show-list">
	    <img id="prev-show" class="arrow arrow-left" alt="Scorri a sinistra" src="/icons/ico-arrow.png" />
	    <div id="programmi-lista"></div>
            <img id="next-show" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png" />
	  </div>
	  <div class="show-content">
	    <img id="prev-show-card" class="arrow arrow-left" alt="Scorri a sinistra" src="/icons/ico-arrow.png"/>
	    <div id="programmi-content"></div>
	    <img id="next-show-card" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png"/> 
	  </div>
	</div>
      </div>
      <div id="controls" class="controls">
	<div class="controlBlock controlLeft">
	  <div class="info-content">
	    <span id="radio-name">Radio Spore</span>
	    <br/>
	    <span id="program-name">Un programma a caso</span>
	  </div>
	</div>
	<div class="controlBlock controlCenter">
	  <span id="prev" class="prev-step control">
	    <img alt="Indietro di 15 secondi" src="/icons/15_sec_prima.svg">
	  </span>
	  <span id="play" class="play-pause control" label="Premi per iniziare la riproduzione del player">
	    <img alt="Ascolta la diretta" src="/icons/playIcon.svg">
	  </span>
	  <span id="next" class="prev-step control">
	    <img alt="Avanti di 15 secondi" src="/icons/15_sec_dopo.svg">
	  </span>
	</div>
	<div class="controlBlock controlRight">
	  <div>
	    <span class="live">· LIVE</span>
	    <span class="live">TORNA AL LIVE</span>
	    <img id="volume-button" src="/icons/volume.svg" />
	    <input id="volume" type="range" min="0" max="1" step="0.01" value="1" />
	    <img id="contents-button" class="arrow-up" alt="Apri il player" src="/icons/ico-arrow.png" />
	  </div>
	</div>
      </div>
    </div>
    <script>
      const leRadio = [
	{ "name": "Radio Spore", "stream": "https://stream.radiospore.oziosi.org:8003/spore.ogg" },
	{ "name": "Radio Wombat", "stream": "https://s.streampunk.cc/wombat.ogg"},
	{ "name": "RadioGramma", "stream": "https://stream.radiospore.oziosi.org:8003/radiogramma.ogg"},
	{ "name": "RadioForte", "stream": "http://stream.s.streampunk.cc/player/RadioForte.ogg"},
	{ "name": "RadioEustachio", "stream": "https://stream.radiospore.oziosi.org:8003/radioeustachio.ogg"}]
      let playlist = {}
      let radio = document.getElementById("radio");      
      radio.src =  leRadio[0]["stream"] + "?" + Math.floor((Math.random() * 10000) + 1) ;
      const playButton = document.getElementById("play")
      const nextButton = document.getElementById("next")
      const prevButton = document.getElementById("prev")
      const contents = document.getElementById("contents")
      const contentsButton = document.getElementById("contents-button")
      const showContentsEl = document.getElementById("programmi-content")
      const showListEl = document.getElementById("programmi-lista")
      let currentStatus
      async function playPauseRadio() {
	try {
	  if(radio.paused) {
	    await radio.play();
	  }
	  else {
	    await radio.pause();
	  }
	}
	catch(err) {
	  console.log(err);
	}
      }
      function onVolumeChange(e) {
	console.log(e.target)
	radio.volume = e.target.value;
      }
      function setupPlayer() {
	playButton.addEventListener("click", playPauseRadio, false);
	prevButton.addEventListener("click",(e) => {
	  radio.setCurrentTicurrentTime -= 15;
	}, false)
	nextButton.addEventListener("click",(e) => {
	  radio.setCurrentTicurrentTime += 15;
	}, false)
	volume.addEventListener('change', onVolumeChange);
	contentsButton.addEventListener("click", (e) => {
	  contents.hidden = !contents.hidden;
	  e.target.classList.toggle("arrow-up");
	})
      }
      function setupRadios() {
	for(r of leRadio) {
	  let el = document.createElement("span")
	  el.innerHTML = r.name;
	  document.getElementById("altreRadio").appendChild(el)
	}
      }
      function setupShowButtons() {
	let scrollFwd = (el) => {
	  let scrollAmount = 0;
	  let timer = setInterval( () => {
            el.scrollLeft += 10;
            scrollAmount += 10;
            if(scrollAmount >= 100){
              window.clearInterval(timer);
            }
          }, 25);	  

	}
	let scrollBack = (el) => {
	  let scrollAmount = 0;
	  let timer = setInterval( () => {
            el.scrollLeft -= 10;
            scrollAmount -= 10;
            if(scrollAmount <= -100){
              window.clearInterval(timer);
            }
          }, 25);	  
	}
	document.getElementById("prev-show").addEventListener("click", (e) => {
	  scrollBack(showListEl)
	})
	document.getElementById("next-show").addEventListener("click", (e) => {
	  scrollFwd(showListEl)
	})
	document.getElementById("next-show-card").addEventListener("click", (e) => {
          scrollFwd(showContentsEl.querySelector("div.content-box:not(.hidden)"))
	})
	document.getElementById("prev-show-card").addEventListener("click", (e) => {
          scrollBack(showContentsEl.querySelector("div.content-box:not(.hidden)"))
	})

      }
      async function setupProgrammi() {
	const res = await fetch("https://www.arkiwi.org/path64/cmFkaW9zcG9yZQ/shows");
	const shows = Array.from(await new window.DOMParser().parseFromString(await res.text(), "text/xml").getElementsByTagName("show"));
	programmi = shows.map(show => Array.from(show.childNodes).reduce((data, node) => {
	  if(node.localName) {
	    data[node.localName] = node.textContent // + ( node.localName == 'feed' ? '?limit=6' : '')
	  }
	  return data;
	}, {}))

	for(let p of programmi) {
	  let el = document.createElement("span")
	  el.innerHTML = p.name;
	  el.addEventListener('click', (e) => {
	    const id = p.name.replaceAll(/[\W_]+/g," ").replaceAll(' ','-');	    
	    for(let box of document.getElementById("programmi-content").getElementsByClassName("content-box")) {
	      if(box.id != id) {
		box.classList.add("hidden");
	      }	   
	    }
	    document.getElementById(id).classList.toggle("hidden");	    
	  })
	  showListEl.appendChild(el)
	  fetch(p.feed)
	    .then(res => res.text())
	    .then(res => new window.DOMParser().parseFromString(res, "text/xml"))
	    .then(xml => {
	      let data = Array.from(xml.getElementsByTagName("item")).
		  map(item =>  Array.from(item.childNodes)
		      .reduce((data, node) => {
			if(node.localName) {
			  if(node.prefix){
			    if(!data[node.prefix]) {
			      data[node.prefix] = {}
			    }
			    data[node.prefix][node.localName] = node.textContent
			  }
			  else {
			    data[node.localName] = node.textContent
			    // if(localName == "pubDate") {
			    //   data[node.localName] = new Date(data[node.localName])
			    // }
			  }}
			return data;
		      }, {}))
	      let programma = document.createElement("div")
	      programma.setAttribute("id", p.name.replaceAll(/[\W_]+/g," ").replaceAll(' ', '-'));
	      programma.classList.add("content-box");
	      programma.classList.add("hidden");
	      document.getElementById("programmi-content").append(programma);
	      for( a in data) {
		let puntata = document.createElement("div")
		let playPause = document.createElement("img")
		playPause.src = '/icons/playIcon.svg'
		playPause.classList.add("play-pause")
		let keywords = ''
		if(data[a]['itunes'] && data[a].itunes.keywords) {
		  data[a]['itunes']['keywords'].split(',').map((k) => `<span>${k}</span>`).join('')
		}
		puntata.innerHTML = `<span><b>${data[a].title}</b></span> <div class="small-tags">${keywords}</div> <br/> <br/><div>${data[a].description}</div>`;
		puntata.appendChild(playPause)
		programma.appendChild(puntata)	      
	      }
	    })	
	}
      }
      setupPlayer();
      setupRadios();
      setupShowButtons();
      setupProgrammi();
    </script>
  </body>
</html>