📻 Conectar Emisoras de Radio Browser

Filtra por país, género y calidad; reproduce el stream directamente en tu web

📋 ¿Qué aprenderás?

🚀 Guía Paso a Paso

1

Conocer la API de Radio Browser

Radio Browser es una API gratuita y abierta que proporciona acceso a miles de emisoras de radio de todo el mundo.

Base URL: https://de1.api.radio-browser.info/json/
2

Obtener lista de países

Primero obtén los países disponibles para filtrar:

// Obtener países async function getCountries() { const response = await fetch('https://de1.api.radio-browser.info/json/countries'); const countries = await response.json(); // Ordenar alfabéticamente return countries.sort((a, b) => a.name.localeCompare(b.name)); } // Obtener géneros (tags) async function getGenres() { const response = await fetch('https://de1.api.radio-browser.info/json/tags'); const tags = await response.json(); // Filtrar tags más comunes return tags.filter(tag => tag.stationcount > 100) .sort((a, b) => b.stationcount - a.stationcount); } // Uso const countries = await getCountries(); const genres = await getGenres();
3

Buscar emisoras con filtros

Filtra emisoras por país, género, calidad y más:

// Buscar emisoras con filtros async function searchStations(filters = {}) { let url = 'https://de1.api.radio-browser.info/json/stations/search?'; const params = new URLSearchParams(); if (filters.country) params.append('country', filters.country); if (filters.genre) params.append('tag', filters.genre); if (filters.language) params.append('language', filters.language); if (filters.codec) params.append('codec', filters.codec); if (filters.minBitrate) params.append('bitrateMin', filters.minBitrate); if (filters.maxBitrate) params.append('bitrateMax', filters.maxBitrate); if (filters.limit) params.append('limit', filters.limit); if (filters.offset) params.append('offset', filters.offset); // Ordenar por popularidad (votes) params.append('order', 'votes'); params.append('reverse', 'true'); url += params.toString(); const response = await fetch(url); const stations = await response.json(); return stations; } // Ejemplos de uso const spanishStations = await searchStations({ country: 'Spain', limit: 20 }); const rockStations = await searchStations({ genre: 'rock', minBitrate: 128, limit: 10 });
4

Reproducir streams de audio

Los streams de radio se pueden reproducir directamente con HTML5 Audio:

// Reproductor de radio class RadioPlayer { constructor() { this.audio = new Audio(); this.currentStation = null; this.isPlaying = false; } async playStation(station) { try { this.currentStation = station; // Verificar que el stream esté activo if (station.lastcheckok === 1) { this.audio.src = station.url_resolved || station.url; await this.audio.play(); this.isPlaying = true; return true; } else { console.log('Stream no disponible'); return false; } } catch (error) { console.error('Error al reproducir:', error); return false; } } pause() { this.audio.pause(); this.isPlaying = false; } stop() { this.audio.pause(); this.audio.currentTime = 0; this.isPlaying = false; this.currentStation = null; } setVolume(volume) { this.audio.volume = Math.max(0, Math.min(1, volume)); } getVolume() { return this.audio.volume; } } // Uso const player = new RadioPlayer(); const stations = await searchStations({ country: 'Spain', limit: 5 }); if (stations.length > 0) { await player.playStation(stations[0]); }
5

Control avanzado y metadata

Obtén información adicional sobre las emisoras y controla la reproducción:

// Obtener información detallada de una emisora async function getStationInfo(stationUuid) { const response = await fetch(`https://de1.api.radio-browser.info/json/stations/byuuid/${stationUuid}`); const station = await response.json(); return station[0]; } // Verificar el estado de una emisora async function checkStationStatus(stationUuid) { const response = await fetch(`https://de1.api.radio-browser.info/json/stations/check/${stationUuid}`); const status = await response.json(); return status; } // Obtener estadísticas async function getStationStats(stationUuid) { const response = await fetch(`https://de1.api.radio-browser.info/json/stats/${stationUuid}`); const stats = await response.json(); return stats; } // Función completa de búsqueda con validación async function findWorkingStations(filters = {}) { const stations = await searchStations(filters); // Filtrar solo emisoras activas const workingStations = stations.filter(station => station.lastcheckok === 1 && station.url_resolved && station.bitrate > 0 ); return workingStations; }

🎯 Demo en Vivo

Explora y reproduce emisoras de radio de todo el mundo:

💡 Mejores Prácticas

🚀 Próximos Pasos

Una vez que domines la integración básica, puedes:

← Volver a Tutoriales