71 lines
2.0 KiB
JavaScript
71 lines
2.0 KiB
JavaScript
|
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
|
||
|
|
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')
|
||
|
|
|
||
|
|
} else {
|
||
|
|
audio.play()
|
||
|
|
|
||
|
|
playPauseButtonIcon.classList.remove('fa-play')
|
||
|
|
playPauseButtonIcon.classList.add('fa-pause')
|
||
|
|
}
|
||
|
|
isPlaying = !isPlaying
|
||
|
|
})
|