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>
|