Pensée du jour

Grâce à l'ordinateur, on peut faire plus rapidement des choses qu'on n'aurait pas eu besoin de faire sans ordinateur.

Afficher les informations Shoutcast en temps réel

le .

La question que beaucoup de développeurs de sites Web se posent est de savoir comment intégrer le flux d'une radio sur leur site. Rien de plus facile : il existe plusieurs players que l'on peut intégrer. Par contre, afficher le titre et l'artiste de la chanson qui passe, ou le nombre d'auditeurs, ce n'est pas aussi simple. Surtout si l'on veut que ces informations se rafraîchissent en temps réel. Voici une solution.

Un exemple d'application de ce code est visible sur le site de Radio-Prod (multiplié par les 12 stations diffusées).

Il suffit de deux fichiers. Le fichier JavaScript qui va rafraîchir les informations grâce à Ajax :

<script language="JavaScript">
function updateSpan(url, info)
{
  document.getElementById(url).innerHTML = info;
}
function getTitle(url)
{
  var Result;
  Result = goXhr('shoutcast.php?url=' + url);
  updateSpan(url, Result);
}
function getXhr()
{
  var xhr = null;
  if (window.XMLHttpRequest)
  {
    xhr = new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    try
    {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (aError)
    {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  else
  {
    xhr = false;
  }
  return xhr;
}
function goXhr(aUrl)
{
  var xhr = getXhr();
  xhr.open("GET", aUrl, false);
  xhr.send(null);
  if (xhr.readyState == 4 && xhr.status == 200)
  {
    return(xhr.responseText);
  }
}
</script>

Et le fichier shoutcast.php, appelé par le script précédent, qui va chercher les informations du flux :

<?php
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
header("meta http-equiv: content-type");

function streamInformation($url, &$titre)
{
  $surl = substr($url, 6);
  $sep = strpos($surl, ':');
  $ip = substr($surl, 1, $sep - 1);
  $port = substr($surl, $sep + 1, 4);
  $fp = @fsockopen($ip, $port, $errno, $errstr, 30);
  if(!$fp)
  {
    $auditeurs = "0";
    $places = "0";
  }
  else
  {
    fputs($fp, "GET /7.html HTTP/1.0\r\nUser-Agent: Mozilla/4.0\r\n\r\n");
    $rpcontent = "";
    while(!feof($fp))
    {
      $rpcontent .= fgets($fp,128);
    }
    fclose($fp);
    $debut = strpos($rpcontent, '<body>') + strlen('<body>');
    $fin = strpos($rpcontent, '</body>', $debut);
    $servi = substr($rpcontent, $debut, $fin - $debut);
    $option = explode(',', $servi);
    if ($option[1] == 0)
    {
      $auditeurs = "0";
      $places = "0";
    }
    else
    {
      $auditeurs = $option[0];
      $pointe = $option[2];
      $places = $option[3];
      $bitrate = $option[5];
      $titre = $option[6];
    }
  }
}
$url = $_GET['url'];
streamInformation($url, $titre);
echo $titre;

?>

Et bien sûr l'appel aux fonctions qui vont bien en passant le flux ShoutCast en paramètre (il faut bien sûr remplacer "http://url:port" par l'adresse et le port de la radio) :

<?php $url = 'http://url:port'; ?>
<br /><span id="<?php echo $url; ?>"><script language="JavaScript">getTitle('<?php echo $url; ?>')</script></span>
<script language="JavaScript">
setInterval("getTitle('<?php echo $url; ?>')", 10000);
</script>

Et comme d'habitude, je ne mets pas de commentaires dans le code : ça a été dur à écrire, ça doit être dur à comprendre ;-)