Reproductor para radio en línea con el título de la canción
Desde que publicamos el tutorial sobre cómo instalar una radio en línea con un
reproductor propio en HTML5, recibimos varias solicitudes sobre cómo incluir en
el reproductor el título de la canción que está sonando en la radio. ¡Aquí
tienes una posible solución para implementar aún sin saber mucho de programación
web!
1. PASOS PREVIOS Y REQUISITOS
Es importante aclarar que, para que este título aparezca, cada tema debe tener
la metadata correspondiente (metatags ID3). Son esas meta-etiquetas internas que
tiene el archivo de audio (que no se escuchan) que indican al reproductor el
título de la canción, artista que la interpreta, género, etc.
Los editores de audio como Audacity, al guardar el archivo, ofrecen la
posibilidad de completarlas. Para editarlas puedes usar KID3, una aplicación
-que viene instalada por defecto en Etertics GNU/Linux– que nos permite hacerlo
fácilmente y en bloque para los archivos generales, tal como explica Pablo López
en este titurial. Hay otras alternativas como EasyTag o MusicBrainz Picard.
EL REPRODUCTOR SIRVE EN ESTOS CASOS:
* Un streaming que tenga instalado en el servidor Icecast, no para los que usan
Shoutcast.
* Un radio en línea que tenga un servidor propio, no para servicios gratuitos
como Zeno, Listen2MyRadio o similares.
* Es necesario que el servidor funcione bajo protocolo seguro https, suele
fallar en los que no tienen la “s” (http).
* Debe tener accesibles los datos a través de un archivo json (la mayoría tiene
activada esta opción, de lo contrario habla con el adminsitrador).
* El script está programado en javascript. Debes asegurarte de que tu sitio web
permite este tipo de lenguaje.
* Tienes que contar con persmisos de administración de tu página web y algunos
conocimientos sobre HTML como, por ejemplo, saber colocar bloques HTML en tu
CMS (WordPress, Drupal, o el que uses).
2. COMPROBACIONES
1.1. UBICA LA DIRECCIÓN DEL STREAMING DE TU RADIO
La dirección del streaming es la URL de transmisión. Si ya tienes un
reproductor, es la dirección https configurada para el streaming. Esta dirección
varía mucho en función de cómo esté configurado el servidor de streaming. Para
confirmar que es correcta pega esa URL en un navegador y comprueba que se
escucha la transmisión.
Por ejemplo: https://radios.liberaturadio.org/luisbeltran
O este otro: https://giss.tv:667/LaGaboneta.mp3 (La diferencia entre un
reproductor y otro es el navegador. El de arriba es el nativo de Chrome y este
de aquí abajo es el de Firefox).
1.2. VERIFICA QUE LA PÁGINA DE DATOS DEL SERVIDOR ESTÁ ACTIVA
Se conoce como server_status y, en principio, debería funcionar en todos los
servidores Icecast. Sólo necesitas sustituir en la dirección anterior el punto
de montaje de tu radio por status-json.xsl y pegarlo en el navegador.
En nuestro primer ejemplo sería:
https://radios.liberaturadio.org/status-json.xsl
Y en el segundo: https://giss.tv:667/status-json.xsl
Esto mostrará todos los puntos de montaje disponibles en esa instancia, es
decir, todas las radios en línea (streamings) existentes en el servidor. Si ves
algo parecido a la imagen de aquí abajo significa que el archivo está disponible
y puedes continuar (en Chrome se verá similar pero sin colores).
3. CÓDIGO
Ahora sólo tienes que pegar el código javascrip de aquí abajo en tu página web
para visualizar el reproductor. Si es WordPress utiliza un “bloque HTML”.
En este ejemplo estamos colocando un reproductor sencillo. Si quieres algo más
elaborado en el que cambiar colores o incluir el logo de la emisora, consulta
este manual.
Tu navegador no soporta el elemento de audio.
Cargando información…
Código a copiar. En la línea const streamUrl =
'https://radios.liberaturadio.org/luisbeltran'; tendrás que remplazar la URL
https://radios.liberaturadio.org/luisbeltran con tu dirección de streaming.
Recuerda no borrar las comillas ni el punto y coma.
<!-- Este es el reproductor de audio genérico que toma la URL del streaming por javascript -->
<audio id="audioPlayer" controls>
<source id="audioSource" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
<!-- Aquí se mostrará la canción que está sonando -->
<div id="currentSong">Cargando información...</div>
<script type="text/javascript">
// Coloca aquí la URL de tu streaming, comprueba si pegas esa URL en un navegador la transmisión se escucha. No borres las comillas o el punto y coma final.
const streamUrl = 'https://radios.liberaturadio.org/luisbeltran';
async function fetchStreamInfo(streamUrl) {
const url = new URL(streamUrl); // Extrae de la URL del streaming las disntitas partes
const streamMount = url.pathname.split('/').pop(); // Obtener el punto de montaje
const statusUrl = `${url.protocol}//${url.host}/status-json.xsl`; // Construye la URL del status-json
try {
const response = await fetch(statusUrl);
if (!response.ok) throw new Error('Error en la red');
let data;
// Comprueba que el JSON existe
try {
data = await response.json(); // Para servidores con múltiples streams
} catch {
const text = await response.text(); // Para servidores con un único stream
data = JSON.parse(text);
}
// Verifica la estructura de datos
let stream;
if (data.icestats && Array.isArray(data.icestats.source)) {
// Para múltiples streams busca el correcto identificando el punto de montaje en el campo "listenurl"
stream = data.icestats.source.find(s => s.listenurl.includes(streamMount));
} else if (data.icestats.source) {
// Para servidores con un único stream la estructura json es diferente
stream = data.icestats.source;
} else {
throw new Error('Estructura de datos inesperada: ' + JSON.stringify(data));
}
// Mostramos la información del stream
const title = stream.title || 'Sin título';
// El texto previo al título de la canción se puede modificar o eliminar, por defecto "Sonando:"
document.getElementById('currentSong').innerText = 'Sonando: ' + title;
} catch (error) {
console.error('Error al obtener la información del stream:', error);
document.getElementById('currentSong').innerText = 'Error al cargar la información: ' + error.message;
}
}
function setUpPlayer(streamUrl) {
document.getElementById('audioSource').src = streamUrl;
document.getElementById('audioPlayer').load();
fetchStreamInfo(streamUrl); // Llama a la función con la URL del stream
}
// Configuramos finalmente el reproductor
setUpPlayer(streamUrl);
</script>
4. OTROS TUTORIALES
Quizás te pueden interesar estos artículos sobre radio en línea donde puedes
aprender cómo instalar una radio en línea en 5 minutos o adaptar el reproductos
con tu propia imagen.
Imagen: Gaelle Marcel en Unsplash