ppppppppppp

Entradas

Now playing on Some Radio Station Listen to Some Radio Station

.radio-player { margin: 30px; } .button { vertical-align: middle; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background-color: #F59E0B; color: #fff; border-radius: 100%; } .play-pause-button { width: 70px; height: 70px; font-size: 25px; margin-right: 24px; } .mute-button { width: 30px; height: 30px; margin-right: 12px; } .player-controls { display: flex; align-items: center; } .currently-playing { display: flex; flex-direction: column; margin-bottom: 12px; } .volume-controls { display: flex; align-items: center; } .currently-playing-label { font-size: 12px; font-weight: 300; } .currently-playing-title { font-size: 22px; } .volume { -webkit-appearance: none; appearance: none; border: 1px solid #000; border-radius: 50px; overflow: hidden; /* This will help with styling the thumb */ } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 15px; width: 15px; cursor: ew-resize; background: #F59E0B; box-shadow: -400px 0 0 390px #FDE68A; border-radius: 50%; } input[type="range"]::-moz-range-thumb { /* same as above */ } input[type="range"]::-ms-thumb { /* same as above */ } input[type="range"]:focus { border-radius: 50px; box-shadow: 0 0 15px -4px #F59E0B; } const audio = document.querySelector('#stream') const playPauseButton = document.querySelector('[name="play-pause"]') const playPauseButtonIcon = playPauseButton.querySelector('i.fas') const volumeControl = document.querySelector('[name="volume"]') const currentlyPlaying = document.querySelector('.currently-playing-title') const volumeButton = document.querySelector('[name="mute"]') const volumeButtonIcon = volumeButton.querySelector('i.fas') let isPlaying = false let fetchInterval = null let currentVolume = 0.2 audio.volume = currentVolume /** * Fetches the currently playing * @returns {Promise} */ const fetchCurrentlyPlaying = () => fetch('...') .then(response => response.json()) .then(data => currentlyPlaying.innerText = data.currentSong) /** * Adjusts the icon of the "mute" button based on the given volume. * @param volume */ const adjustVolumeIcon = volume => { volumeButtonIcon.classList.remove('fa-volume-off') volumeButtonIcon.classList.remove('fa-volume-down') volumeButtonIcon.classList.remove('fa-volume-up') volumeButtonIcon.classList.remove('fa-volume-mute') if (volume >= 0.75) { volumeButtonIcon.classList.add('fa-volume-up') } if (volume < 0.75 && volume >= 0.2) { volumeButtonIcon.classList.add('fa-volume-down') } if (volume < 0.2 && volume > 0) { volumeButtonIcon.classList.add('fa-volume-off') } if (volume === 0) { volumeButtonIcon.classList.add('fa-volume-mute') } } volumeControl.addEventListener('input', () => { const volume = parseFloat(volumeControl.value) audio.volume = currentVolume = volume currentVolume = volume adjustVolumeIcon(volume) }) volumeButton.addEventListener('click', () => { if (audio.volume > 0) { adjustVolumeIcon(0) audio.volume = 0 volumeControl.value = 0 } else { adjustVolumeIcon(currentVolume) audio.volume = currentVolume volumeControl.value = currentVolume } }) playPauseButton.addEventListener('click', () => { if (isPlaying) { audio.pause() playPauseButtonIcon.classList.remove('fa-pause') playPauseButtonIcon.classList.add('fa-play') clearInterval(fetchInterval) currentlyPlaying.innerText = 'Listen to Some Radio Station' } else { audio.play() playPauseButtonIcon.classList.remove('fa-play') playPauseButtonIcon.classList.add('fa-pause') fetchCurrentlyPlaying() fetchInterval = setInterval(fetchCurrentlyPlaying, 3000) } isPlaying = !isPlaying })