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 |