From 119c3df0c9303c0fe7ec1c0f21697516bae2e96d Mon Sep 17 00:00:00 2001 From: xaloc Date: Mon, 2 Oct 2023 11:49:28 +0200 Subject: [PATCH] add webplayer --- index.html | 50 ++++++++++++++++++++++++++++--------- player.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ player.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 45 +++++++++++++++++++++++----------- 4 files changed, 213 insertions(+), 25 deletions(-) create mode 100644 player.css create mode 100644 player.js diff --git a/index.html b/index.html index b7582a6..fa32804 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,8 @@ + + Ràdios @@ -11,22 +13,22 @@

Ràdios Lliures i comunitàries

- - - - + + + +

CCMA

- - - - + + + +

RAC

- - + +

RNE

@@ -38,10 +40,36 @@

France

- +

+
+ +
+ + +
+
+ Escoltant Catalunya Ràdio +
+ +
+ + + +
+
+
+
+ + + diff --git a/player.css b/player.css new file mode 100644 index 0000000..4ac2e71 --- /dev/null +++ b/player.css @@ -0,0 +1,72 @@ +.radio-player { + margin: auto; + width: 30%; + } +.button { + vertical-align: middle; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border: none; + background-color: #a514aa; + 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-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: #a514aa; + box-shadow: -400px 0 0 390px #fd8afd; + 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 #a514aa; + } + \ No newline at end of file diff --git a/player.js b/player.js new file mode 100644 index 0000000..cb5a573 --- /dev/null +++ b/player.js @@ -0,0 +1,71 @@ +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 +}) \ No newline at end of file diff --git a/script.js b/script.js index 4fa263c..a06218f 100644 --- a/script.js +++ b/script.js @@ -1,23 +1,40 @@ class station{ - constructor(url){ + constructor(url, radio){ this.url= url; + this.radio= radio; + } + play(){ + var title = document.getElementById('radio-title') + var stream = document.getElementById('stream'); + title.innerText = "Escoltant " + this.radio; + stream.src = this.url; + stream.play(); + const playPauseButtonIcon = playPauseButton.querySelector('i.fas') + playPauseButtonIcon.classList.remove('fa-play') + playPauseButtonIcon.classList.add('fa-pause') } show(){ + var stream = document.getElementById('stream'); + stream.pause(); + const playPauseButtonIcon = playPauseButton.querySelector('i.fas') + playPauseButtonIcon.classList.remove('fa-pause') + playPauseButtonIcon.classList.add('fa-play') var win=window.open(this.url, '_blank'); win.focus(); + } } -var catRadio = new station('http://shoutcast.ccma.cat/ccma/catalunyaradioHD.mp3'); -var catInfo = new station('http://shoutcast.ccma.cat/ccma/catalunyainformacioHD.mp3'); -var iCat = new station('http://shoutcast.ccma.cat/ccma/icatHD.mp3'); -var catMusic = new station('http://shoutcast.ccma.cat/ccma/catalunyamusicaHD.mp3'); -var vallekas = new station('http://cervera.eldialdigital.com:8032/;'); -var punk = new station('http://punkirratia.net:8000/punk'); -var irola = new station('http://s.streampunk.cc/_stream/irola_irratia.mp3'); -var almaina = new station('http://zeppelin.streampunk.cc/_stream/almaina.ogg'); -var rac1 = new station('https://streaming.rac1.cat/'); -var rac105 = new station('https://streaming.rac105.cat/'); -var franceInfo = new station('https://icecast.radiofrance.fr/franceinfo-midfi.mp3'); -var rne = new station('rne.html'); -var serCat = new station('sercat.html'); +var catRadio = new station('http://shoutcast.ccma.cat/ccma/catalunyaradioHD.mp3', 'Catalunya Ràdio'); +var catInfo = new station('http://shoutcast.ccma.cat/ccma/catalunyainformacioHD.mp3', 'Catalunya Informació'); +var iCat = new station('http://shoutcast.ccma.cat/ccma/icatHD.mp3', 'iCat'); +var catMusic = new station('http://shoutcast.ccma.cat/ccma/catalunyamusicaHD.mp3', 'Catalunya Música'); +var vallekas = new station('https://radio.radiobot.org/listen/rvk/rvk.mp3', 'Radio Vallekas'); +var punk = new station('http://punkirratia.net:8000/punk', 'Punk Irratia'); +var irola = new station('http://s.streampunk.cc/_stream/irola_irratia.mp3', 'Irola Radio'); +var almaina = new station('http://zeppelin.streampunk.cc/_stream/almaina.ogg', 'Radio Almaina'); +var rac1 = new station('https://streaming.rac1.cat/', 'Rac 1'); +var rac105 = new station('https://streaming.rac105.cat/', 'Rac 105'); +var franceInfo = new station('https://icecast.radiofrance.fr/franceinfo-midfi.mp3', 'France Info'); +var rne = new station('rne.html', 'RNE'); +var serCat = new station('sercat.html', 'SER Catalunya');