Formación para aprender a transmitir audio por streaming.
Comenzamos el taller describiendo brevemente el funcionamiento de Internet y las diferencias entre los servidores para alojar contenido (como una página web) y los que necesitamos para transmitir por streaming. En este gráfico están resumidos los conceptos principales:
A continuación, resumimos en tres pasos lo requerimientos para operar una radio en línea: (1) instalar un software de transmisión como Butt (hay versiones para cualquier sistema operativo de escritorio) CoolMic (Android); (2) abrir una cuenta en un servicio de streaming; (3) ofrecer un link o un reproductor para que la audiencia escuche la transmisión.
Aquí está el video completo de la sesión. Recuerda que tienes todos estos pasos descritos en detalle en este artículo. Además, en nuestra web tienes una sección completa que agrupa todos los artículos sobre el tema donde comparamos software y servidores de streaming, o enseñamos el paso a paso de cómo colocar un reproductor HTML para la web que muestre las canciones que están sonando. ¡Visítala!
Sólo tienes que entrar a este enlace el día y hora indicados, con cualquier navegador web (Firefox, Chromium, Chrome, etc.), tanto desde la computadora como desde el celular.
En la nueva pantalla pegamos el código del reproductor. Algunos proveedores de servicios te ofrecen sus propios reproductores. Si no lo tienes, de los que hemos probado (y han sido varios) los que mejor funcionan son los más sencillos HTML5. Además, funcionan en teléfonos celulares. Siempre y cuando el protocolo de tu streaming sea seguro sea seguro, es decir, comience con https://
[Recomendamos que una vez pegado el código sustituyas a mano todas las comillas (“)]
En source colocas la URL de tu streaming (la misma que usas para enviar la señal al servidor) y el type de transmisión. Si es mp3 escribes type=”audio/mpeg” si es ogg será type=”audio/ogg”. Si quieres que la radio comience a escucharse al abrise la página web deberás indicarlo con la palabra autoplay. Si lo borras tendrán que pulsar play para comenzar a escuchar.
Si estás usando un servidor Shoutcast, tendrás que añadir un punto y coma (;) al final de la barra invertida de la URL, tal como se indica a continuación. Si tuviera “punto de montaje” como /stream o /live no hará falta el punto y coma.
Si tienes nociones de CSS o diseño puedes jugar mucho más con la etiqueta de video. Meter una imagen de fondo, un marco de color. Por ejemplo, con este código quedaría algo así:
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.
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.
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.
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.
