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