:root { --primary-color: #ff5722; --secondary-color: #ffd700; --text-color: #ffffff; --background-color: #1a1a1a; } body { font-family: Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .radio-slider-container { max-width: 1140px; width: 100%; } .radio-selector-container { display: flex; justify-content: center; gap: 15px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 20px; } .radio-item { flex: 0 0 15%; max-width: 15%; cursor: pointer; border: 2px solid #ddd; border-radius: 10px; overflow: hidden; transition: transform 0.2s, border-color 0.2s; position: relative; } .radio-item:hover { transform: scale(1.05); } .radio-item.active { border-color: var(--primary-color); transform: scale(1.1); } .radio-item img { width: 100%; height: auto; display: block; } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); opacity: 0; transition: opacity 0.3s, transform 0.3s; color: var(--text-color); font-size: 3em; z-index: 2; } .radio-item:hover .play-icon { opacity: 1; } .player-container { display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(25px); padding: 20px; border-radius: 15px; margin-top: 15px; } .cover-art-container { flex: 0 0 14%; } .cover-art { max-width: 100%; border-radius: 5px; } .song-info { flex: 1; margin-left: 20px; overflow: hidden; } #song-title { margin: 8px 0; font-size: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #artist-name { margin: 5px 0; font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #volume-control { width: 100%; margin-top: 10px; } #play-button { background-color: var(--primary-color); color: var(--text-color); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } #play-button:hover { background-color: var(--secondary-color); } class RadioPlayer { constructor() { this.stations = [ { name: 'Más Vida Clásicos Cristianos', streamUrl: 'https://masvida.radionline.com.es/listen/m%C3%A1s_vida_cl%C3%A1sicos_cristianos/radio.mp3', apiUrl: 'https://masvida.radionline.com.es/api/nowplaying/m%C3%A1s_vida_cl%C3%A1sicos_cristianos', image: 'https://xn--msvida-pta.com/wp-content/uploads/2024/08/clasicos-cristianos.jpg' }, { name: 'Más Vida Cristianos Inolvidables', streamUrl: 'https://masvida.radionline.com.es/listen/m%C3%A1s_vida_cristianos_inolvidables/radio.mp3', apiUrl: 'https://masvida.radionline.com.es/api/nowplaying/m%C3%A1s_vida_cristianos_inolvidables', image: 'https://xn--msvida-pta.com/wp-content/uploads/2024/08/cristianos-inolvidables.jpg' }, { name: 'Más Vida Pop Suave', streamUrl: 'https://masvida.radionline.com.es/listen/m%C3%A1s_vida_pop_suave/radio.mp3', apiUrl: 'https://masvida.radionline.com.es/api/nowplaying/m%C3%A1s_vida_pop_suave', image: 'https://xn--msvida-pta.com/wp-content/uploads/2024/08/pop-suave.jpg' }, { name: 'Más Vida Pop Urbano', streamUrl: 'https://masvida.radionline.com.es/listen/mas_vida_radio/radio.mp3', apiUrl: 'https://masvida.radionline.com.es/api/nowplaying/mas_vida_radio', image: 'https://xn--msvida-pta.com/wp-content/uploads/2024/08/tu-zona-urbana.jpg' }, { name: 'Más Vida Radio Cristiana', streamUrl: 'https://masvida.radionline.com.es/listen/m%C3%A1s_vida_rock_and_pop/radio.mp3', apiUrl: 'https://masvida.radionline.com.es/api/nowplaying/m%C3%A1s_vida_rock_and_pop', image: 'https://xn--msvida-pta.com/wp-content/uploads/2025/01/TU-RADIO-CRISTIANA-1.jpg' }, { name: 'Más Vida Rock and Pop', streamUrl: 'https://masvida.radionline.com.es/listen/m%C3%A1s_vida_rock_and_pop_interactivo/radio.mp3', apiUrl: 'https://masvida.radionline.com.es/listen/m%C3%A1s_vida_rock_and_pop_interactivo', image: 'https://xn--msvida-pta.com/wp-content/uploads/2024/08/Mas-Vida-Rock-and-Pop.jpg' } ]; this.audio = new Audio(); this.currentStation = null; this.initElements(); this.renderStations(); this.setupEventListeners(); } initElements() { this.radioSelectorContainer = document.querySelector('.radio-selector-container'); this.coverArt = document.getElementById('cover-art'); this.songTitle = document.getElementById('song-title'); this.artistName = document.getElementById('artist-name'); this.playButton = document.getElementById('play-button'); this.volumeControl = document.getElementById('volume-control'); } renderStations() { this.stations.forEach((station, index) => { const stationElement = document.createElement('div'); stationElement.classList.add('radio-item'); stationElement.dataset.streamUrl = station.streamUrl; stationElement.dataset.apiUrl = station.apiUrl; if (index === 3) stationElement.classList.add('active'); const img = document.createElement('img'); img.src = station.image; img.alt = station.name; const playIcon = document.createElement('div'); playIcon.classList.add('play-icon'); playIcon.innerHTML = ` `; stationElement.appendChild(img); stationElement.appendChild(playIcon); this.radioSelectorContainer.appendChild(stationElement); }); } setupEventListeners() { this.radioSelectorContainer.addEventListener('click', (e) => { const stationElement = e.target.closest('.radio-item'); if (stationElement) this.selectStation(stationElement); }); this.playButton.addEventListener('click', () => this.togglePlay()); this.volumeControl.addEventListener('input', () => this.setVolume()); } selectStation(stationElement) { const activeStation = this.radioSelectorContainer.querySelector('.radio-item.active'); if (activeStation) activeStation.classList.remove('active'); stationElement.classList.add('active'); const streamUrl = stationElement.dataset.streamUrl; const apiUrl = stationElement.dataset.apiUrl; this.audio.src = streamUrl; this.fetchNowPlaying(apiUrl); if (this.audio.paused) { this.audio.play(); this.playButton.textContent = 'Pausar'; } } async fetchNowPlaying(apiUrl) { try { const response = await fetch(apiUrl); const data = await response.json(); this.coverArt.src = data.nowplaying.artwork || ''; this.songTitle.textContent = data.nowplaying.song.title || 'Título desconocido'; this.artistName.textContent = data.nowplaying.song.artist || 'Artista desconocido'; } catch (error) { console.error('Error fetching now playing:', error); } } togglePlay() { if (this.audio.paused) { this.audio.play(); this.playButton.textContent = 'Pausar'; } else { this.audio.pause(); this.playButton.textContent = 'Reproducir'; } } setVolume() { this.audio.volume = this.volumeControl.value / 100; } } document.addEventListener('DOMContentLoaded', () => { new RadioPlayer(); });