xaloc/radio
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add webplayer

Browse Source
This commit is contained in:
Xaloc 2023-10-02 11:49:28 +02:00
parent 8e8ba47ac2
commit 119c3df0c9
4 changed files with 213 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="author" content="Xaloc"> <meta name="author" content="Xaloc">
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="player.css">
<title>Ràdios</title> <title>Ràdios</title>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"> <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
</head> </head>
@ -11,22 +13,22 @@
<body> <body>
<h3>Ràdios Lliures i comunitàries</h3> <h3>Ràdios Lliures i comunitàries</h3>
<p> <p>
<button onClick='vallekas.show()'>Radio Vallekas</button> <button onClick='vallekas.play()'>Radio Vallekas</button>
<button onClick='punk.show()'>Punk Irratia</button> <button onClick='punk.play()'>Punk Irratia</button>
<button onClick='irola.show()'>Irola Irratia</button> <button onClick='irola.play()'>Irola Irratia</button>
<button onClick='almaina.show()'>Radio Almaina</button> <button onClick='almaina.play()'>Radio Almaina</button>
</p> </p>
<h3>CCMA</h3> <h3>CCMA</h3>
<p> <p>
<button onClick='catRadio.show()'>Catalunya Ràdio</button> <button onClick='catRadio.play()'>Catalunya Ràdio</button>
<button onClick='catInfo.show()'>Catalunya Informació</button> <button onClick='catInfo.play()'>Catalunya Informació</button>
<button onClick='iCat.show()'>iCat</button> <button onClick='iCat.play()'>iCat</button>
<button onClick='catMusic.show()'>Catalunya Música</button> <button onClick='catMusic.play()'>Catalunya Música</button>
</p> </p>
<h3>RAC</h3> <h3>RAC</h3>
<p> <p>
<button onClick='rac1.show()'>Rac 1</button> <button onClick='rac1.play()'>Rac 1</button>
<button onClick='rac105.show()'>Rac 105</button> <button onClick='rac105.play()'>Rac 105</button>
</p> </p>
<h3>RNE</h3> <h3>RNE</h3>
<p> <p>
@ -38,10 +40,36 @@
</p> </p>
<h3>France</h3> <h3>France</h3>
<p> <p>
<button onClick='franceInfo.show()'>France Info</button> <button onClick='franceInfo.play()'>France Info</button>
</p> </p>
<div class="radio-player">
<audio src='http://shoutcast.ccma.cat/ccma/catalunyaradioHD.mp3' class="visually-hidden" id="stream">
</audio>
<div class="player-controls">
<button name="play-pause" class="button play-pause-button" aria-label="Play/pause">
<i class="fas fa-play" aria-hidden></i>
</button>
<div class="volume-and-title">
<div class="currently-playing" aria-label="Currently playing">
<span class="currently-playing-title" id="radio-title">Escoltant Catalunya Ràdio</span>
</div>
<div class="volume-controls">
<button name="mute" class="button mute-button" aria-label="Mute/unmute">
<i class="fas fa-volume-down" aria-hidden></i>
</button>
<input type="range" name="volume" class="volume" min="0" max="1" step="0.05" value="0.2" aria-label="Volume">
</div>
</div>
</div>
</div>
<script src='script.js'></script> <script src='script.js'></script>
<script src="player.js"></script>
</body> </body>
</html> </html>

72
player.css Normal file
View File

@ -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;
}

71
player.js Normal file
View File

@ -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
})

45
script.js
View File

@ -1,23 +1,40 @@
class station{ class station{
constructor(url){ constructor(url, radio){
this.url= url; 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(){ 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'); var win=window.open(this.url, '_blank');
win.focus(); win.focus();
} }
} }
var catRadio = new station('http://shoutcast.ccma.cat/ccma/catalunyaradioHD.mp3'); 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'); var catInfo = new station('http://shoutcast.ccma.cat/ccma/catalunyainformacioHD.mp3', 'Catalunya Informació');
var iCat = new station('http://shoutcast.ccma.cat/ccma/icatHD.mp3'); var iCat = new station('http://shoutcast.ccma.cat/ccma/icatHD.mp3', 'iCat');
var catMusic = new station('http://shoutcast.ccma.cat/ccma/catalunyamusicaHD.mp3'); var catMusic = new station('http://shoutcast.ccma.cat/ccma/catalunyamusicaHD.mp3', 'Catalunya Música');
var vallekas = new station('http://cervera.eldialdigital.com:8032/;'); var vallekas = new station('https://radio.radiobot.org/listen/rvk/rvk.mp3', 'Radio Vallekas');
var punk = new station('http://punkirratia.net:8000/punk'); var punk = new station('http://punkirratia.net:8000/punk', 'Punk Irratia');
var irola = new station('http://s.streampunk.cc/_stream/irola_irratia.mp3'); 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'); var almaina = new station('http://zeppelin.streampunk.cc/_stream/almaina.ogg', 'Radio Almaina');
var rac1 = new station('https://streaming.rac1.cat/'); var rac1 = new station('https://streaming.rac1.cat/', 'Rac 1');
var rac105 = new station('https://streaming.rac105.cat/'); var rac105 = new station('https://streaming.rac105.cat/', 'Rac 105');
var franceInfo = new station('https://icecast.radiofrance.fr/franceinfo-midfi.mp3'); var franceInfo = new station('https://icecast.radiofrance.fr/franceinfo-midfi.mp3', 'France Info');
var rne = new station('rne.html'); var rne = new station('rne.html', 'RNE');
var serCat = new station('sercat.html'); var serCat = new station('sercat.html', 'SER Catalunya');