Bodieu

  HTML5 apporte une fonction audio qui simplifie la lecture des fichiers en mp3. Un peu de javascript permet de publier des albums complets.
La playlist se place dans une page statique.
Ce script fonctionne aussi sur IPAD, Androïd ...  

Démonstration 

• Créer le répertoire data/audio
• Créer les répertoires data/audio/liste 1, data/audio/liste 2...
• Copier les fichiers mp3 dans les nouveaux répertoires

Voici le code à mettre dans une page statique

 <?php

// CONFIGURATION EDITABLE -------------------------------------------
// Dossier Root (peut aussi être une URL, ex: http://www.monsite.com/gallery)
$root_dir = $PHPSELF.'data/audio'; // ( exemple: data/images )


// --begin preprocessing
$phpself = $_SERVER['PHP_SELF'];
extract($_POST);

// filetypes
$filetypes = array("mp3", "jpeg");
$k = sizeof($filetypes);
for ($i=0; $i<$k; $i++)
{
  $filetypes[] = strtoupper($filetypes[$i]);
}
// scanning directory for folders and check if they contain image files
if (!is_dir($root_dir))
{
  printError("Aucun r&eacute;pertoire racine. Sp&eacute;cifiez s'il vous pla&icirc;t un r&eacute;pertoire audio valide dans votre configuration.");
}
$root_handle = opendir($root_dir);
while ($dirname = readdir($root_handle))
{
  $var1 = strcmp($dirname,'.');
  $var2 = strcmp($dirname,'..');
  $var3 = is_dir($root_dir.'/'.$dirname);
  if (($var1!=0) && ($var2!=0) && ($var3==1))
  {
    $dir_handle = opendir($root_dir.'/'.$dirname);
    $postmp = 0;
    while ($filename = readdir($dir_handle))
    {
      for ($i=0;$i<sizeof($filetypes);$i++)
      {
        $postmp = strpos($filename, $filetypes[$i]);
        if ($postmp>0)
        {
          $folders[] = $root_dir.'/'.$dirname;
          break 2;
        }
      }
    }
    closedir($dir_handle);
  }
}
if (!$folders)
{
  printError("Les dossiers Recherch&eacute;s ne contiennent pas mp3! Changez s'il vous pla&icirc;t \$root_dir.");
}

// !!! if you don't want your folders in reverse order change rsort() to sort()
rsort($folders);

// set initial variable $ordner
if (!isset($ordner))
  $ordner = $folders[0];

// scanning directories for image files
if (is_dir($ordner)){
  $dir_handle = opendir($ordner);
  while ($filename = readdir($dir_handle))
  {
    for ($i=0; $i<sizeof($filetypes); $i++)
    {
      $pos = strpos($filename, $filetypes[$i]);
      $var1 = strcmp($filename,'.');
      $var2 = strcmp($filename,'..');
      $var3 = is_file($ordner.'/'.$filename);

      if (($var1 != 0) && ($var2 != 0) && ($var3 == 1) && ($pos > 0))
      {
        $files[] = $filename;
      }
    }
  }
  sort($files);

  echo"  $size";
  $size = sizeof($files);
  closedir($dir_handle);
  closedir($root_handle);
}
else
{
  printError("Aucun Dossier trouv&eacute;. Copiez s'il vous pla&icirc;t vos dossiers audio &agrave; l'emplacement indiqu&eacute; dans \$root_dir de votre configuration.");
}
// --end preprocessing

// --begin form
echo "<div id=\"plxGalerie\">\n";
echo "<form id=\"next\" method=\"post\" action=\"#next\">\n";
echo "<h3><strong>S&eacute;lectionnez un album de chants dans la liste</strong> <select name=\"ordner\" onchange=\"document.getElementById('next').submit();\">\n";
while ($folder = each($folders))
{
  if ($ordner == $folder["value"])
  {
    echo "<option selected=\"selected\" value=\"$ordner\">";
  }
  else
  {
    echo "<option value=\"";
    echo $folder["value"];
    echo "\">";
  }
  $text = $folder["value"];
  while (strrpos($text,"/"))
  {
    $text = substr($text, strrpos($text,"/")+1);
  }

  $text = str_replace("_", " ", $text); // Replace all _ with SPACE
  echo $text;
  echo " </option>\n";
}
echo "</select></h3>\n";
echo "</form>\n";
// --end form

// --begin print les chants

$count = 0;
echo '<audio tabindex="0" id="player" preload="auto" controls="controls">
    <source id="source" src="data/son/Jesu Salvator Mundi - Guegon 16 11 14.mp3">
  Votre navigateur ne reconnaît pas la balise audio HTML5
</audio> ';
echo '<ul id="playlist">';
for ($y=0;$y<count($files);$y++)
{
echo "<li>";
 $chant=explode("-",$files[$count]) ;

echo "<a href='$ordner/$files[$count]'>$chant[0]</a>";
// $console[]=MediaItemArraySuccess($ordner/$files[$count]) ;

echo "</li>";
  $count++;
}
echo "</ul>\n";
echo "<div style=\"clear:both;\"></div>\n";
echo "</div>\n";
?>
<script>
function loadSong(link,playerId)
{
  var player=document.getElementById(playerId);
  player.getElementsByTagName("source")[0].src=link.href;
  player.load();
  player.play();
}

function preparePlayer()
{
  var links=document.getElementById("playlist").getElementsByTagName("a");
  var player=document.getElementById('player');
  var z;
  for (z=0;z<links.length;z++)
    links[z].onclick=function(e)
    {
      var k,km=links.length;
      for (k=0;k<km;k++)
        if (this==links[k])
          {player.setAttribute("data-0",k);break;}
      loadSong(this,"player");
      return false;
    };
  player.addEventListener("play",function() {
    var k,km=links.length,x;
    x=parseInt(this.getAttribute("data-0"));
    links[x].style.color="red";
    for (k=0;k<km;k++)
    {
      if (this.getElementsByTagName("source")[0].src==links[k].href)
      {
        this.setAttribute("data-k",k);
        if (k!=x) links[k].style.color="black";
      }
      else
      {
        if (k!=x) links[k].style.color="grey";
      }
    }
  },false);
  player.addEventListener("ended",function() {
    var k=parseInt(this.getAttribute("data-k"));
    if (k<(links.length-1)) k++;else k=0;
    loadSong(links[k],"player");
  },false);
  player.setAttribute("data-0",0);
}

window.addEventListener("load",preparePlayer,false);
</script>
<script>
function onError(response) {
console.log( "The following error occurred: " + response.name);
}

// get the folder list as asynchronous calls
function MediaFolderArray(folders){
len = folders.length
for (var i = 0; i < len; i++) {
if (folders[i].storageType == "INTERNAL") {
folderArray.push(folders[i]);
 
console.log(i + ":" + " title: " + folders[i].title);
console.log("id: " + folders[i].id);
console.log("path : " + folders[i].folderURI);
console.log("storageType : " + folders[i].storageType);
console.log("modifiedDate : " + folders[i].modifiedDate);
}
}
</script>