In un mondo dominato da internet qualsiasi radio permette l’ascolto in streaming della diretta sul proprio sito web.
È altrettanto diffusa l’integrazione delle informazioni sul brano in onda: titolo, artista e talvolta la copertina dell’album da cui è tratto il pezzo.
Oltre che un servizio per l’utente che spesso vuole appuntarsi i brani che gradisce, si tratta di una pratica che può invogliare un visitatore del sito che sta facendo altro (ad esempio leggere un articolo) ad aprire il player se vede in onda qualcosa che lo attira.
Con poche righe di codice è facile estrapolare queste informazion dal server di streaming audio più diffuso: IceCast (https://www.icecast.org).
Questo espone una serie di informazioni e statistiche di funzionamento tramite un endopoint Json all’indirizzo del server a cui aggiungere /status-json.xsl (ad esempio https://radiovegit.radioca.st/status-json.xsl).
Con un semplice script php che chiameremo onair.php andiamo a decodificarne il contenuto e a ricercare tramite le API di Itunes la copertina corrispondente:
<?php
$json = file_get_contents('https://radiovegit.radioca.st/status-json.xsl');
$obj = json_decode($json, true);
$titolo = ucwords(mb_strtolower(utf8_decode($obj[icestats][source][0][title])));
$url = 'https://itunes.apple.com/search?limit=1&term=' . urlencode($titolo);
$result = file_get_contents($url);
$obj2 = json_decode($result, true);
$artwork = $obj2["results"]["0"]['artworkUrl100'];
echo $titolo, "<br><img src=\"", $artwork, "\">";
?>Quando viene richiamato questo script espone titolo, artista e copertina, ma come fare ad inserirlo nel sito in modo che si aggiorni automaticamente?
Ci viene in aiuto la libreria jQuery: ecco una pagina di esempio in cui ogni 5 secondi viene automaticamente controllato il contenuto di onair.php ed inserito in un tag DIV:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function loadNowPlaying(){
jQuery("#now_playing").load("/onair.php");
}
setInterval(function(){loadNowPlaying()}, 5000);
</script>
</head>
<body>
<div id="now_playing"></div>
</body>
</html>