https://www.radiocodogno.com/

1<!DOCTYPE html>
2<html lang="it">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Radio Codogno FM 100.350 MHz</title>
8
9  <!-- Include font -->
10  <link href="https://fonts.googleapis.com/css?family=Lato:400,400i" rel="stylesheet">
11
12  <!-- Include Style Sheet -->
13  <style>
14    body {
15      display: flex;
16      justify-content: center;
17      align-items: center;
18      flex-direction: column;
19      height: 100vh;
20      margin: 0;
21      background: url(img/cover.jpg) no-repeat center center fixed;
22      background-size: cover;
23      color: #fff;
24      text-align: center;
25      font-family: "Open Sans", sans-serif;
26    }
27
28    #single-song-player {
29      border-radius: 10px;
30      margin: auto;
31      box-shadow: none;
32      width: 80%;
33      -webkit-font-smoothing: antialiased;
34    }
35
36    .bottom-container {
37      background-color: #202136;
38      border-radius: 10px;
39      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
40      padding: 20px;
41    }
42
43    .header-text {
44      font-size: 5vw;
45      font-family: "Open Sans", sans-serif;
46      color: #fff;
47      margin-bottom: 20px;
48    }
49
50    .middle-text {
51      font-size: 2vw;
52      font-family: "Open Sans", sans-serif;
53      color: #fff;
54      margin-bottom: 20px;
55    }
56
57    .middle-text a {
58      color: white;
59      text-decoration: none;
60    }
61
62    .middle-text a:hover {
63      text-decoration: underline;
64    }
65
66    .small-text a {
67      font-size: 0.5vw;
68      font-family: "Open Sans", sans-serif;
69      color: #fff;
70      margin-bottom: 10px;
71    }
72
73    .control-container {
74      display: flex;
75      align-items: center;
76      justify-content: center;
77      margin-top: 20px;
78    }
79
80    .amplitude-play-pause {
81      width: 30vw;
82      max-width: 148px;
83      height: 30vw;
84      max-height: 148px;
85      cursor: pointer;
86      background-size: contain;
87      background-repeat: no-repeat;
88    }
89
90    .amplitude-play-pause.amplitude-paused {
91      background: url("img/play.svg");
92      width: 30vw;
93      max-width: 148px;
94      height: 30vw;
95      max-height: 148px;
96      cursor: pointer;
97      background-size: contain;
98      background-repeat: no-repeat;
99    }
100
101    .amplitude-play-pause.amplitude-playing {
102      background: url("img/pause.svg");
103      width: 30vw;
104      max-width: 148px;
105      height: 30vw;
106      max-height: 148px;
107      cursor: pointer;
108      background-size: contain;
109      background-repeat: no-repeat;
110}
111
112    .meta-container {
113      text-align: center;
114      margin-left: 20px;
115      color: white;
116    }
117
118    .meta-container span {
119      display: block;
120    }
121
122    .meta-container span[data-amplitude-song-info="name"] {
123      font-size: 4vw;
124      font-family: "Open Sans", sans-serif;
125    }
126
127    .meta-container span[data-amplitude-song-info="artist"] {
128      font-size: 1vw;
129      font-family: "Open Sans", sans-serif;
130    }
131
132    /* Responsive adjustments */
133    @media (max-width: 768px) {
134      .header-text {
135        font-size: 6vw;
136      }
137
138      .middle-text {
139        font-size: 4 vw;
140      }
141
142      .amplitude-play-pause {
143        width: 20vw;
144        height: 20vw;
145      }
146
147      .meta-container span[data-amplitude-song-info="name"] {
148        font-size: 5vw;
149      }
150
151      .meta-container span[data-amplitude-song-info="artist"] {
152        font-size: 4vw;
153      }
154    }
155
156    @media (max-width: 480px) {
157      .header-text {
158        font-size: 7vw;
159      }
160
161      .middle-text {
162        font-size: 5vw;
163      }
164
165      .amplitude-play-pause {
166        width: 25vw;
167        height: 25vw;
168      }
169
170      .meta-container span[data-amplitude-song-info="name"] {
171        font-size: 6vw;
172      }
173
174      .meta-container span[data-amplitude-song-info="artist"] {
175        font-size: 5vw;
176      }
177    }
178  </style>
179</head>
180
181<body>
182  <div id="single-song-player">
183    <div class="header-text">Radio Codogno</div>
184    <div class="middle-text">
185      <a href="https://www.sanbiagiocodogno.it/" target="_blank">Qui trovi informazioni sulla vita della parrocchia</a>
186      <br>
187    </div>
188    <div class="bottom-container">
189      <div class="control-container">
190        <div class="amplitude-play-pause" id="play-pause"></div>
191        <div class="meta-container">

192          <span data-amplitude-song-info="name" class="song-name"></span>
193          <span data-amplitude-song-info="artist"></span>
194        </div>
195      </div>
196    </div>
197    <div id="nowp" class="middle-text">
198      <p></p>
199    </div>
200    <div class="middle-text">
201      <p>La radio &eacute; attiva in FM 100.350 ed in streaming</p>
202    </div>
203    <div class="small-text">
204      <p>v1.3</p>
205      <p id="resolution">. . .</p>
206    </div>
207  </div>
208
209  

209<script src="js/amplitude.min.js"></script>

209
210  

210<script>
211    let nowPlayingInterval;
212
213    async function nowPlaying() {
214      const playerState = Amplitude.getPlayerState();
215      if (playerState !== 'playing') {
216        document.getElementById("nowp").innerText = "";
217        console.log("Player is not playing, stopping nowPlaying updates.");
218        clearInterval(nowPlayingInterval);
219        return;
220      }
221
222      try {
223        const response = await fetch('https://ice.veryant.it:8443/status-json.xsl');
224        if (!response.ok) {
225          throw new Error(`HTTP error! Status: ${response.status}`);
226        }
227        const data = await response.json();
228        const sources = data.icestats.source;
229        let title = "N/A";
230
231        if (Array.isArray(sources)) {
232          const radioSource = sources.find(source => source.server_name === "Radio Codogno");
233          if (radioSource && radioSource.title) {
234            title = radioSource.title;
235          }
236        } else if (sources.server_name === "Radio Codogno") {
237          title = sources.title;
238        }
239
240        document.getElementById("nowp").innerText = title;
241        console.log(`Now playing: ${title}`);
242      } catch (error) {
243        console.error("Error fetching now playing information:", error);
244      }
245    }
246
247    Amplitude.init({
248      "bindings": {
249        37: 'prev',
250        39: 'next',
251        32: 'play_pause'
252      },
253      "songs": [
254        {
255          "name": "",
256          "url": "https://ice.veryant.it:8443/radio",
257          "live": true
258        }
259      ],
260      "callbacks": {
261        "play": function() {
262          console.log("Player is now playing");
263          nowPlayingInterval = setInterval(nowPlaying, 10000);
264          nowPlaying();
265        }
266      }
267    });
268
269    window.onkeydown = function (e) {
270      return !(e.keyCode == 32);
271    };
272  </script>

272
273
274  

274<script>
275    document.addEventListener('DOMContentLoaded', () => {
276      const resolutionElement = document.getElementById('resolution');
277      const width = window.screen.width;
278      const height = window.screen.height;
279      resolutionElement.textContent = `${width} x ${height}`;
280    });
281  </script>

281
282
283</body>
284
285</html>