Add files via upload
This commit is contained in:
GitHub
parent
807849d847
commit
7dc3902f72
7 changed files with 155 additions and 0 deletions
7
Leeme.txt
Normal file
7
Leeme.txt
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
LEEME.TXT
|
||||||
|
|
||||||
|
1) La lista de urls de stramings de radio se puede obtener en: "http://fmstream.org/index.php?c=E&o=top"
|
||||||
|
2) Hay que incluir en el fichero radio.js en formato Array las emisoras que deseemos
|
||||||
|
(posteriormente se incluirá como fichero externo para facilitar la carga)
|
||||||
|
3) El directorio logos es donde se deja el logotipo de cada emisora.
|
||||||
|
Si no hay logotipo indicar en el array como logo la imagen "vacio.jpg"
|
||||||
BIN
logos/kissfm.jpg
Normal file
BIN
logos/kissfm.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
logos/logo.png
Normal file
BIN
logos/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
logos/los40principales.jpg
Normal file
BIN
logos/los40principales.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 KiB |
BIN
logos/vacio.jpg
Normal file
BIN
logos/vacio.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
44
radio.html
Normal file
44
radio.html
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<title>Emisoras de Radio</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="icon" href="./logos/logo.png">
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-8">
|
||||||
|
<p>
|
||||||
|
<h3><span class="glyphicon glyphicon-music"> </span> <span id="NombreEmisora">EMISORA</span></h3>
|
||||||
|
<img id="LogoEmisora" src="./logos/vacio.jpg" width="300px" height="168px"><br>
|
||||||
|
<audio id="UrlEmisora" autoplay controls src="">Audio no disponible</audio>
|
||||||
|
<br>
|
||||||
|
<!-- Controles de Emisora -->
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<p id="ListaEmisoras">
|
||||||
|
... lista de emisoras ...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./radio.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
104
radio.js
Normal file
104
radio.js
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
/*
|
||||||
|
-----------------------------------------------
|
||||||
|
Programa: radio.js
|
||||||
|
Autor: Luis G.L. (luisgulo@gmail.com)
|
||||||
|
Version: 1.0
|
||||||
|
MAIN - PROGRAMA PRINCIPAL
|
||||||
|
Se inicia automaticamente en la carga del html
|
||||||
|
-----------------------------------------------
|
||||||
|
*/
|
||||||
|
// Variables globales
|
||||||
|
let PosEmisora = 0;
|
||||||
|
let Sonando = false;
|
||||||
|
let r="./logos/"; // Ruta de logotipos
|
||||||
|
// Array para gestion Emisoras
|
||||||
|
const eNombre = [];
|
||||||
|
const eUrl = [];
|
||||||
|
const eImg = [];
|
||||||
|
// LLamada a funciones para inicializar la Radio
|
||||||
|
CargarArray();
|
||||||
|
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]="http://kissfm.kissfmradio.cires21.com/kissfm.mp3";
|
||||||
|
eImg[0]="kissfm.jpg";
|
||||||
|
eNombre[1]="Los 40 Principales";
|
||||||
|
eUrl[1]="http://23543.live.streamtheworld.com/LOS40.mp3";
|
||||||
|
eImg[1]="los40principales.jpg";
|
||||||
|
};
|
||||||
|
|
||||||
|
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();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in a new issue