App Web (PWA) para Streaming de Radio
BIN
cadena100.jpg
Executable file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
europafm.png
Executable file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
iconos/logo-128x128.png
Executable file
|
After Width: | Height: | Size: 14 KiB |
BIN
iconos/logo-144x144.png
Executable file
|
After Width: | Height: | Size: 14 KiB |
BIN
iconos/logo-152x152.png
Executable file
|
After Width: | Height: | Size: 15 KiB |
BIN
iconos/logo-192x192.png
Executable file
|
After Width: | Height: | Size: 16 KiB |
BIN
iconos/logo-384x384.png
Executable file
|
After Width: | Height: | Size: 24 KiB |
BIN
iconos/logo-512x512.png
Executable file
|
After Width: | Height: | Size: 18 KiB |
BIN
iconos/logo-72x72.png
Executable file
|
After Width: | Height: | Size: 14 KiB |
BIN
iconos/logo-96x96.png
Executable file
|
After Width: | Height: | Size: 13 KiB |
21
index.html
Executable file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Radio-SCL</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<link rel="icon" href="./logo.png">
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
<link rel="manifest" href="manifest.json">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container text-center">
|
||||||
|
<main>
|
||||||
|
<div id="contenido">
|
||||||
|
</div>
|
||||||
|
<main>
|
||||||
|
</div>
|
||||||
|
<script src="./radio.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
kissfm.png
Executable file
|
After Width: | Height: | Size: 6.2 KiB |
BIN
logo.png
Executable file
|
After Width: | Height: | Size: 7.7 KiB |
BIN
los40classic.png
Executable file
|
After Width: | Height: | Size: 3 KiB |
BIN
los40principales.jpg
Executable file
|
After Width: | Height: | Size: 6 KiB |
51
manifest.json
Executable file
|
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "Radio-SCL",
|
||||||
|
"short_name": "Radio-SCL",
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff",
|
||||||
|
"display": "standalone",
|
||||||
|
"start_url": ".",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "iconos/logo-72x72.png",
|
||||||
|
"sizes": "72x72",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "iconos/logo-96x96.png",
|
||||||
|
"sizes": "96x96",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "iconos/logo-128x128.png",
|
||||||
|
"sizes": "128x128",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "iconos/logo-144x144.png",
|
||||||
|
"sizes": "144x144",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "iconos/logo-152x152.png",
|
||||||
|
"sizes": "152x152",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "iconos/logo-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "iconos/logo-384x384.png",
|
||||||
|
"sizes": "384x384",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "iconos/logo-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"splash_pages": null
|
||||||
|
}
|
||||||
BIN
ondacero.jpg
Executable file
|
After Width: | Height: | Size: 6.9 KiB |
166
radio.js
Executable file
|
|
@ -0,0 +1,166 @@
|
||||||
|
/*
|
||||||
|
-----------------------------------------------
|
||||||
|
Programa: radio.js
|
||||||
|
Autor: Luis G.L. (luisgulo@gmail.com)
|
||||||
|
Version: 1.0
|
||||||
|
MAIN - PROGRAMA PRINCIPAL
|
||||||
|
Se inicia automaticamente en la carga del html
|
||||||
|
-----------------------------------------------
|
||||||
|
*/
|
||||||
|
var contenidoweb='<p> \
|
||||||
|
<h3><span class="glyphicon glyphicon-music"> </span> <span id="NombreEmisora">EMISORA</span></h3> \
|
||||||
|
<img id="LogoEmisora" src="./vacio.png" width="300px" height="168px"><br> \
|
||||||
|
<audio id="UrlEmisora" autoplay controls src="">Audio no disponible</audio> \
|
||||||
|
<br> \
|
||||||
|
<h2> \
|
||||||
|
<a href="#" onclick="Retroceder()"> \
|
||||||
|
<span class="glyphicon glyphicon-backward"></span> \
|
||||||
|
</a> \
|
||||||
|
<a id="BotonPlay" href="#" onclick="AlternarPlay()"> \
|
||||||
|
<span class="glyphicon glyphicon-play-circle"></span> \
|
||||||
|
</a> \
|
||||||
|
<a id="BotonPause" href="#" hidden onclick="AlternarPlay()"> \
|
||||||
|
<span class="glyphicon glyphicon-pause"></span> \
|
||||||
|
</a> \
|
||||||
|
<a href="#" onclick="Avanzar()"> \
|
||||||
|
<span class="glyphicon glyphicon-forward"></span> \
|
||||||
|
</a> \
|
||||||
|
</h2> \
|
||||||
|
</p> \
|
||||||
|
<p id="ListaEmisoras"> \
|
||||||
|
</p>';
|
||||||
|
|
||||||
|
// Variables globales
|
||||||
|
let PosEmisora = 0;
|
||||||
|
let Sonando = false;
|
||||||
|
let r="./"; // Ruta de logotipos
|
||||||
|
// Array para gestion Emisoras
|
||||||
|
const eNombre = [];
|
||||||
|
const eUrl = [];
|
||||||
|
const eImg = [];
|
||||||
|
// Cargar el contenido
|
||||||
|
document.getElementById('contenido').innerHTML = contenidoweb;
|
||||||
|
// LLamada a funciones para inicializar la Radio
|
||||||
|
CargarArray();
|
||||||
|
EmisoraActiva();
|
||||||
|
// Esperamos a que todo este cargado ...
|
||||||
|
//document.addEventListener("DOMContentLoaded", EmisoraActiva);
|
||||||
|
// ----- Fin del programa principal -----------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// ----- FUNCIONES ----------------------------------------------------------
|
||||||
|
function Avanzar() {
|
||||||
|
// Incrementamos en uno la posicion de la emisora
|
||||||
|
// Revisamos 'desbordamiento' de la posicion y recargamos la emisora activa
|
||||||
|
PosEmisora++;
|
||||||
|
if (PosEmisora >= eNombre.length ) {
|
||||||
|
PosEmisora = 0;
|
||||||
|
};
|
||||||
|
EmisoraActiva();
|
||||||
|
};
|
||||||
|
|
||||||
|
function Retroceder() {
|
||||||
|
// Retrocedemos en uno la posicion de la emisora
|
||||||
|
// Revisamos 'desbordamiento' de la posicion y recargamos la emisora activa
|
||||||
|
PosEmisora = PosEmisora - 1;
|
||||||
|
if (PosEmisora < 0 ) {
|
||||||
|
PosEmisora = eNombre.length - 1;
|
||||||
|
};
|
||||||
|
EmisoraActiva();
|
||||||
|
};
|
||||||
|
|
||||||
|
function AlternarPlay() {
|
||||||
|
// Ocultar/Mostrar los botones de Play-Pause
|
||||||
|
// Ademas debemos para o iniciar el sonido
|
||||||
|
if (Sonando) {
|
||||||
|
Sonando=false;
|
||||||
|
document.getElementById("BotonPlay").hidden=false;
|
||||||
|
document.getElementById("BotonPause").hidden=true;
|
||||||
|
document.getElementById("UrlEmisora").pause();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
Sonando=true;
|
||||||
|
document.getElementById("BotonPlay").hidden=true;
|
||||||
|
document.getElementById("BotonPause").hidden=false;
|
||||||
|
document.getElementById("UrlEmisora").play();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function CargarArray() {
|
||||||
|
// Cargar en memoria la lista de Emisoras deseadas
|
||||||
|
eNombre[0]="Kiss FM";
|
||||||
|
eUrl[0]="https://kissfm.kissfmradio.cires21.com/kissfm.mp3";
|
||||||
|
eImg[0]="kissfm.png";
|
||||||
|
eNombre[1]="Los 40 Principales";
|
||||||
|
eUrl[1]="https://20103.live.streamtheworld.com/LOS40.mp3";
|
||||||
|
eImg[1]="los40principales.jpg";
|
||||||
|
eNombre[2]="Los 40 Classic";
|
||||||
|
eUrl[2]="http://20103.live.streamtheworld.com:3690/LOS40_CLASSIC.mp3";
|
||||||
|
eImg[2]="los40classic.png";
|
||||||
|
eNombre[3]="Cadena 100";
|
||||||
|
eUrl[3]="http://flucast-m02-04.flumotion.com/cope/cadena100.mp3";
|
||||||
|
eImg[3]="cadena100.jpg";
|
||||||
|
eNombre[4]="Rock FM";
|
||||||
|
eUrl[4]="https://rockfm-cope-rrcast.flumotion.com/cope/rockfm.mp3";
|
||||||
|
eImg[4]="rockfm.jpg";
|
||||||
|
eNombre[5]="RNE Clasica";
|
||||||
|
eUrl[5]="http://crtve-ice-edge-2002-fra-eco-cdn.cast.addradio.de/crtve/rnerc/main/mp3/high";
|
||||||
|
eImg[5]="rneclasica.jpg";
|
||||||
|
eNombre[6]="RNE (Madrid)";
|
||||||
|
eUrl[6]="https://crtve-rne1-mad.cast.addradio.de/crtve/rne1/mad/mp3/high";
|
||||||
|
eImg[6]="rne.png";
|
||||||
|
eNombre[7]="Onda Cero";
|
||||||
|
eUrl[7]="https://wecast-b02-03.flumotion.com/promecal/radio1";
|
||||||
|
eImg[7]="ondacero.jpg";
|
||||||
|
eNombre[8]="Europa FM";
|
||||||
|
eUrl[8]="https://str1.mediatelekom.net:9950/stream";
|
||||||
|
eImg[8]="europafm.png";
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
function ImprimirEmisoras() {
|
||||||
|
// Imprimir en el html en la columna 2 la lista de emisoras
|
||||||
|
let texto="";
|
||||||
|
l = document.getElementById("ListaEmisoras");
|
||||||
|
l.innerHTML=texto;
|
||||||
|
// bucle recorrer array emisoras
|
||||||
|
for (let i=0; i < eNombre.length; i++) {
|
||||||
|
// La emisora activa se muestra en color diferente (azul) y con icono de altavoz
|
||||||
|
// Hacemos que emisoras no activas sean clicables
|
||||||
|
if (i == PosEmisora) {
|
||||||
|
l.innerHTML += '<span id="0" style="color:blue"> ' + eNombre[i] + ' </span>' + ' <span id="1" style="color:blue" class="glyphicon glyphicon-volume-up"></span><br>';
|
||||||
|
} else {
|
||||||
|
l.innerHTML += '<span id="0" style="color:black" onclick="CambiarEmisora(' + i + ')"> ' + eNombre[i] + ' </span><br>';
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function CambiarEmisora(nuevaEmisora) {
|
||||||
|
PosEmisora = nuevaEmisora;
|
||||||
|
EmisoraActiva();
|
||||||
|
};
|
||||||
|
|
||||||
|
function EmisoraActiva() {
|
||||||
|
// Actualizar en el html la emisora activa
|
||||||
|
document.getElementById("NombreEmisora").innerHTML=eNombre[PosEmisora];
|
||||||
|
document.getElementById("UrlEmisora").src=eUrl[PosEmisora];
|
||||||
|
document.getElementById("LogoEmisora").src= r + eImg[PosEmisora];
|
||||||
|
ImprimirEmisoras();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
window.addEventListener('load', ()=>{
|
||||||
|
|
||||||
|
if('serviceWorker' in navigator){
|
||||||
|
try {
|
||||||
|
navigator.serviceWorker.register('serviceWorker.js');
|
||||||
|
console.log("Service Worker Registered");
|
||||||
|
} catch (error) {
|
||||||
|
console.log("Service Worker Registration Failed");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
BIN
rne.png
Executable file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
rne5.jpg
Executable file
|
After Width: | Height: | Size: 6.1 KiB |
BIN
rneclasica.jpg
Executable file
|
After Width: | Height: | Size: 5.5 KiB |
BIN
rockfm.jpg
Executable file
|
After Width: | Height: | Size: 4.2 KiB |
49
serviceWorker.js
Executable file
|
|
@ -0,0 +1,49 @@
|
||||||
|
const staticAssets=[
|
||||||
|
'./',
|
||||||
|
'./style.css',
|
||||||
|
'./radio.js',
|
||||||
|
'./cadena100.jpg',
|
||||||
|
'./los40principales.jpg',
|
||||||
|
'./ondacero.jpg',
|
||||||
|
'./rne5.jpg',
|
||||||
|
'./rneclasica.jpg',
|
||||||
|
'./rockfm.jpg',
|
||||||
|
'./vacio.png',
|
||||||
|
'./europafm.png',
|
||||||
|
'./kissfm.png',
|
||||||
|
'./los40classic.png',
|
||||||
|
'./rne.png'
|
||||||
|
];
|
||||||
|
|
||||||
|
self.addEventListener('install', async event=>{
|
||||||
|
const cache = await caches.open('static-cache');
|
||||||
|
cache.addAll(staticAssets);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener('fetch', event => {
|
||||||
|
const req = event.request;
|
||||||
|
const url = new URL(req.url);
|
||||||
|
|
||||||
|
if(url.origin === location.url){
|
||||||
|
event.respondWith(cacheFirst(req));
|
||||||
|
} else {
|
||||||
|
event.respondWith(newtorkFirst(req));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function cacheFirst(req){
|
||||||
|
const cachedResponse = caches.match(req);
|
||||||
|
return cachedResponse || fetch(req);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function newtorkFirst(req){
|
||||||
|
const cache = await caches.open('dynamic-cache');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(req);
|
||||||
|
cache.put(req, res.clone());
|
||||||
|
return res;
|
||||||
|
} catch (error) {
|
||||||
|
return await cache.match(req);
|
||||||
|
}
|
||||||
|
}
|
||||||
12
style.css
Executable file
|
|
@ -0,0 +1,12 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Lexend Exa', sans-serif;
|
||||||
|
color: wheat;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
BIN
vacio.png
Executable file
|
After Width: | Height: | Size: 7.7 KiB |