Un fanzine con las nociones básicas de tecnologías libres para diseñadores de comunicación visual.
Navegando por Mastodon, nos encontramos con este interesantísimo proyecto (¡además nos encanta los fanzines!). Diseñado por Gastón Hannay y Cristian Recoba (en el marco del Proyecto final de carrera de la Licenciatura en diseño de comunicación visual, FADU-FARTES, Universidad de la República de Uruguay), este fanzine tiene como objetivo que la comunidad estudiantil del diseño de comunicación visual incorpore las nociones del software libre como parte de su práctica y discurso crítico.
En Radios Libres, como hemos comentado en anteriores ocasiones, creemos fundamental promover las tecnologías libres en el ámbito académico. Con la excusa de que “enseñamos el que usa el mercado”, terminan generando dependencia e incitando a los consumidores a emplear un determinado software o marca (siempre privativos), en vez de desarrollar capacidades generales para que quien estudia tenga la capacidad de elegir la herramienta que más le convenga o se ajuste. En vez de educar desde valores como la colaboración, la cultura libre o los bienes comunes. Terminan “encerrando la educación en una caja”, como describen en el fanzine. Eso sin contar que se termina promoviendo la piratería al obligar a los estudiantes a comprar licencias para practicar en sus computadoras, algo imposible en la mayoría de nuestros países.
El texto aborda los fundamentos del software libre y la usabilidad y la experiencia de proyectos hechos con software libre. La idea es abordar el proceso de un proyecto de diseño de comunicación visual desde una metodología colaborativa, abierta y con el uso de herramientas de software libre.
Desde la web del proyecto puedes descargar el fanzine, conocer la metodología y ponerte en contacto con les autores. (Si en algún momento fallara el enlace, acá tienes un link alterativo).
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.
