encrypt
/
generic-webradio-player


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
							<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" controls></audio>
    <div id="player">
      <div id="contents" hidden>
	<div id="menu" class="tags">
	  <input type="radio" name="tab-selector" id="tab-other-radios" checked/>
	  <label for="tab-other-radios"> Altre Radio</label>
	  <input type="radio" name="tab-selector" id="tab-programmi"/>
	  <label for="tab-programmi"> Programmi</label>
	  <input type="radio" name="tab-selector" id="tab-playlist"/>
	  <label for="tab-playlist"> Playlist</label>
	</div>
	<div class="tabs">
	  <div id="other-radios" class="tags">	 
	  </div>
	  <div id="programmi" class="hidden">
	    <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">
		<template id="show-card-template">
		  <div class="show-card">
		    <span class="title"></span>
		    <div class="small-tags"></div><br>
		    <div class="description"></div>
		    <div class="controls">
		      <img src="/icons/plus.png" class="add-to-playlist">
		      <img src="/icons/playIcon.svg" class="play-pause">
		    </div>		  
		  </div>
		</template>
	      </div>
	      <img id="next-show-card" class="arrow arrow-right" alt="Scorri a destra" src="/icons/ico-arrow.png"/> 
	    </div>
	  </div>
	  <div id="playlist" class="hidden">
	    Qui ci va la playlist, ancora non puoi riprodurla, però puoi scaricarle l'<span onclick="downloadPlaylist"><b>m3u 📥</b></span>
	  </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="is-live live">· LIVE</span>
	    <span class="back-to-live live hidden">TORNA AL LIVE</span>
	    <img id="volume-on" src="/icons/volume.svg" />
	    <img id="volume-off" src="/icons/volume_off.svg" class="hidden"/>	    
	    <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>
      let 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.querySelector("#radio");
            leRadio = leRadio.map((r) => {
	r.stream  += "?" + Math.floor((Math.random() * 10000) + 1)
	return r
      });
      radio.src =  leRadio[0].stream
      const playButton = document.querySelector("#play")
      const nextButton = document.querySelector("#next")
      const prevButton = document.querySelector("#prev")
      const contents = document.querySelector("#contents")
      const contentsButton = document.querySelector("#contents-button")
      const volumeOn = document.querySelector("#volume-on")
      const volumeOff = document.querySelector("#volume-off")
      const showContentsEl = document.querySelector("#programmi-content")
      const showListEl = document.querySelector("#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) {
	if(e.target.value == 0) {
	  volumeOn.classList.add("hidden");
	  volumeOff.classList.remove("hidden")
	}
	else {
	  volumeOff.classList.add("hidden");   
	  volumeOn.classList.remove("hidden")
	}
	radio.volume = e.target.value;
      }
      function setupTabs() {
	for(let el of document.querySelectorAll("#menu > input")){
	  console.log(el)
	  el.addEventListener('change', (e) => {
	    for(let ce of document.querySelectorAll("#menu > input")) {
	      if(ce.checked) {
		document.querySelector("#"+ce.id.split('-').slice(1).join('-')).classList.remove("hidden")
	      }
	      else {
		document.querySelector("#"+ce.id.split('-').slice(1).join('-')).classList.add("hidden")
	      }
	    }
	  })
	}
      }
      function setupPlayer() {
	playButton.addEventListener("click", playPauseRadio, false);
	volumeOff.addEventListener("click", (e) => {
	  volume.disabled = false;
	  e.target.classList.add("hidden");
	  volumeOn.classList.remove("hidden");
	  radio.volume = volume.value;
	});
	volumeOn.addEventListener("click", (e) => {
	  volume.disabled = true;
	  e.target.classList.add("hidden");
	  volumeOff.classList.remove("hidden");
	  radio.volume = 0;
	});
	volume.addEventListener('change', onVolumeChange);
	contentsButton.addEventListener("click", (e) => {
	  contents.hidden = !contents.hidden;
	  e.target.classList.toggle("arrow-up");
	})
	let showBackToLive = () => {
	  document.querySelector(".is-live").classList.add("hidden");
	  document.querySelector(".back-to-live").classList.remove("hidden");
	}
	prevButton.addEventListener("click",(e) => {
	  radio.currentTime -= 15;
	  showBackToLive() 
	}, false)
	nextButton.addEventListener("click",(e) => {
	  radio.currentTime += 15;
	  showBackToLive() 
	}, false)

	radio.addEventListener('pause', (e) => {
	  showBackToLive() 
	})
	document.querySelector(".back-to-live").addEventListener('click', (e) => {
	  document.querySelector(".is-live").classList.remove("hidden")
	  e.target.classList.add("hidden")
	  radio.currentTime = radio.duration
	  radio.play()
	})
      }
      function downloadPlaylist() {
	let m3u = "#EXTM3U\n"
	m3u = playlist.reduce((data, track) => {
	  data += `#EXTINF:${track.itunes.duration},${track.itunes.name} \n`
	  data += `${track.guid}\n`
	  return data
	}, m3u)
	console.log(m3u)
	const blob = new Blob([m3u], { 'type': 'audio/x-mpegurl'});
	const m3uFile = window.URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.style = "display: none";
	document.body.appendChild(a);
        url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = "playlist.m3u";
        a.click();
        window.URL.revokeObjectURL(url);
      }
      function setupRadios() {
	for(let r of leRadio) {
	  let el = document.createElement("span")
	  el.innerHTML = r.name;
	  el.addEventListener('click', (e) => {
	    radio.src = r.stream;
	    document.querySelector("#radio-name").textContent = r.name
	    radio.play()
	  })
	  document.querySelector("#other-radios").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");
	      }	   
	    }
	    console.log(id)
	    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(let s of data) {
		let template = document.querySelector("#show-card-template");
		let puntata = template.content.cloneNode(true);
		let keywords = ''
		if(s['itunes'] && s.itunes.keywords) {
		  s['itunes']['keywords'].split(',').map((k) => `<span>${k}</span>`).join('')
		}
		puntata.querySelector(".title").textContent = s.title;
		puntata.querySelector(".description").textContent = s.description;
		//puntata.innerHTML = `<span><b>${data[a].title}</b></span> <div class="small-tags">${keywordso}</div> <br/> <br/><div>${data[a].description}</div>`;
		puntata.querySelector(".play-pause").addEventListener('click', (e) => {
		  radio.src = s.guid;
		  playPauseRadio();
		  document.querySelector("#radio-name").textContent = p.name;
		  document.querySelector("#program-name").textContent = s.title;
		})
		puntata.querySelector(".add-to-playlist").addEventListener('click', (e) => {
		  playlist.push(s)
		})
		programma.appendChild(puntata)	      
	      }
	    })	
	}
      }
      setupPlayer();
      setupRadios();
      setupTabs();
      setupShowButtons();
      setupProgrammi();
    </script>
  </body>
</html>