Répertoire Liste des fichiers audio, besoin d'une solution de lecteur audio

Question

Je construis une petite archive sonore pour nos clients internes, afin qu'ils puissent rechercher des sons et des effets et les utiliser. Pour cela je cours le petit outil MAMP, qui partage un dossier plein de fichiers audio sur le réseau. Un petit script php répertorie les fichiers, lit les types de fichiers et les tailles de fichier et les affiche dans une table html. J'ai également inclus un script de filtre de table pour rechercher des noms de fichiers spécifiques.

Je suis très heureux avec la solution jusqu'à présent.

Maintenant, j'ai fait quelques tests et je voudrais le modifier un peu et le rendre plus convivial. Par exemple, quand je trouve un son que je voudrais entendre, je dois le cliquer, une nouvelle fenêtre s'ouvre et le lecteur de safari intégré joue le son. Si je l'aime, je dois revenir en arrière et télécharger le fichier via un clic droit et "enregistrer sous ...".

Je voudrais simplifier cela. Le meilleur pour moi serait un lecteur audio sur le même site, j'ai donc intégré un simple lecteur html5. Mais comment puis-je faire jouer au lecteur le fichier que je suis en train de cliquer sur la table? Comme source? Et jouer un nouveau fichier si j'en choisis un?

Voici le script php:

<table id="table" class="sortable table active"> 
    <thead> 
    <tr class="header"> 
     <th> 
     <div>Name</div> 
     </th> 
     <th width="150px"> 
     <div>Type</div> 
     </th> 
     <th width="100px"> 
     <div>Size</div> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 

<?php 


// Adds pretty filesizes 
function pretty_filesize($file) { 
    $size = filesize($file); 
if ($size < 1024) { 
    $size = $size . " Bytes"; 
} elseif (($size < 1048576) && ($size > 1023)) { 
    $size = round($size/1024, 1) . " KB"; 
} elseif (($size < 1073741824) && ($size > 1048575)) { 
    $size = round($size/1048576, 1) . " MB"; 
} else { 
    $size = round($size/1073741824, 1) . " GB"; 
} 
return $size; 
} 

// Checks to see if veiwing hidden files is enabled 
if($_SERVER['QUERY_STRING']=="hidden") 
{$hide=""; 
$ahref="."; 
$atext="Hide";} 
else 
{$hide="."; 
$ahref="./?hidden"; 
$atext="Show";} 

// Opens directory 
$myDirectory=opendir("."); 

// Gets each entry 
while($entryName=readdir($myDirectory)) { 
    $dirArray[]=$entryName; 
} 

// Closes directory 
closedir($myDirectory); 

// Counts elements in array 
$indexCount=count($dirArray); 

// Sorts files 
sort($dirArray); 

// Loops through the array of files 
for($index=0; $index < $indexCount; $index++) { 

// Decides if hidden files should be displayed, based on query above. 
    if(substr("$dirArray[$index]", 0, 1)!=$hide) { 

// Resets Variables 
    $favicon=""; 
    $class="file"; 

// Gets File Names 
    $name=$dirArray[$index]; 
    $namehref=$dirArray[$index]; 


// Separates directories, and performs operations on those directories 
    if(is_dir($dirArray[$index])) 
    { 
      $extn="&lt;Directory&gt;"; 
      $size="&lt;Directory&gt;"; 
      $sizekey="0"; 
      $class="dir"; 

     // Gets favicon.ico, and displays it, only if it exists. 
      if(file_exists("$namehref/favicon.ico")) 
       { 
        $favicon=" style='background-image:url($namehref/favicon.ico);'"; 
        $extn="&lt;Website&gt;"; 
       } 

     // Cleans up . and .. directories 
      if($name=="."){$name=". (Current Directory)"; $extn="&lt;System Dir&gt;"; $favicon=" style='background-image:url($namehref/favicon.ico);'";} 
      if($name==".."){$name=".. (Parent Directory)"; $extn="&lt;System Dir&gt;";} 
    } 

// File-only operations 
    else{ 
     // Gets file extension 
     $extn=pathinfo($dirArray[$index], PATHINFO_EXTENSION); 

     // Prettifies file type 
     switch ($extn){ 
      case "png": $extn="PNG Image"; break; 
      case "jpg": $extn="JPEG Image"; break; 
      case "jpeg": $extn="JPEG Image"; break; 
      case "svg": $extn="SVG Image"; break; 
      case "gif": $extn="GIF Image"; break; 
      case "ico": $extn="Windows Icon"; break; 

      case "txt": $extn="Text File"; break; 
      case "log": $extn="Log File"; break; 
      case "htm": $extn="HTML File"; break; 
      case "html": $extn="HTML File"; break; 
      case "xhtml": $extn="HTML File"; break; 
      case "shtml": $extn="HTML File"; break; 
      case "php": $extn="PHP Script"; break; 
      case "js": $extn="Javascript File"; break; 
      case "css": $extn="Stylesheet"; break; 

      case "pdf": $extn="PDF Document"; break; 
      case "xls": $extn="Spreadsheet"; break; 
      case "xlsx": $extn="Spreadsheet"; break; 
      case "doc": $extn="Microsoft Word Document"; break; 
      case "docx": $extn="Microsoft Word Document"; break; 

      case "zip": $extn="ZIP Archive"; break; 
      case "htaccess": $extn="Apache Config File"; break; 
      case "exe": $extn="Windows Executable"; break; 

      default: if($extn!=""){$extn=strtoupper($extn)." File";} else{$extn="Unknown";} break; 
     } 

     // Gets and cleans up file size 
      $size=pretty_filesize($dirArray[$index]); 
      $sizekey=filesize($dirArray[$index]); 
    } 



// Output 
echo(" 
    <tr class='$class'> 
     <td><a href='$namehref'$favicon' class='name'>$name</a></td> 
     <td><a href='$namehref'>$extn</a></td> 
     <td sorttable_customkey='$sizekey'><a href='$namehref' align='right'>$size</a></td> 
    </tr>"); 
    } 
} 
?> 

    </tbody> 
</table> 

Voici le script de filtre:

(function(document) { 
'use strict'; 

var LightTableFilter = (function(Arr) { 

    var _input; 

    function _onInputEvent(e) { 
     _input = e.target; 
     var tables = document.getElementsByClassName(_input.getAttribute('data-table')); 
     Arr.forEach.call(tables, function(table) { 
      Arr.forEach.call(table.tBodies, function(tbody) { 
       Arr.forEach.call(tbody.rows, _filter); 
      }); 
     }); 
    } 

    function _filter(row) { 
     var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase(); 
     row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row'; 
    } 

    return { 
     init: function() { 
      var inputs = document.getElementsByClassName('filter'); 
      Arr.forEach.call(inputs, function(input) { 
       input.oninput = _onInputEvent; 
      }); 
     } 
    }; 
})(Array.prototype); 

document.addEventListener('readystatechange', function() { 
    if (document.readyState === 'complete') { 
     LightTableFilter.init(); 
    } 
});})(document); 

Et c'est le joueur simple, plus d'un espace réservé en ce moment:

<audio controls autoplay style="width:40%; max-height:100%;"></audio> 

Y at-il un moyen de cliquer sur le nom de fichier et le joueur html5 le joue?

Merci

Answer 1

Je viens rapidement Rattled les éléments suivants ensemble dans l'espoir que vous pouvez prendre de ce que vous avez besoin. Comme le script est exécuté "in-house" je présume qu'il n'est pas critique que les chemins de fichiers sont cachés aux utilisateurs devraient-ils regarder dans le code source?

Pour chaque lien généré, j'ai ajouté un tag d'attribut data avec le chemin d'accès au fichier utilisé par le gestionnaire d'événements javascript pour lire la piste/le clip. J'espère que c'est utile! Cela pourrait facilement cibler une étiquette audio prédéfinie pour laquelle vous avez des contrôles visibles sur le lecteur.

<!doctype html> 
<html> 
    <head> 
     <meta charset='utf-8'/> 
     <title>Audio tracks</title> 
     <script type='text/javascript'> 

      function evtHandler(event){ 
       event.preventDefault(); 
       var el=event.target || event.srcElement; 

       var clip=document.createElement('audio'); 
        clip.src=el.dataset.track; 
        clip.play(); 
      } 

      function bindEvents(){ 
       var col=document.querySelectorAll('td > a.play'); 
       if(col){ 
        for(var n in col)if(col[n].nodeType==1){ 
         col[n].addEventListener('click', evtHandler,false); 
        } 
       } 
      } 

      document.addEventListener('DOMContentLoaded', bindEvents, false); 
     </script> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <th scope='col'>Track</th> 
       <th scope='col'>Size</th> 
       <th scope='col'>Options</th> 
      </tr> 
      <?php 

       $base='c:/wwwroot'; 
       $dir=$base . '/sfx/wav/'; 

       if(realpath($dir)){ 

        $col=glob($dir . '{*.wav,*.mp3}', GLOB_BRACE); 

        if($col){ 
         foreach($col as $file) { 

          $filename=pathinfo($file, PATHINFO_BASENAME); 
          $path=str_replace($base, '', $file); 
          $filesize=pretty_filesize(filesize($file)); 

          echo " 
          <tr> 
           <td>{$filename}</td> 
           <td>{$filesize}</td> 
           <td><a class='play' data-track='{$path}' href='#'>Play</a></td> 
          </tr>"; 
         } 
        } 
       } 
      ?> 
     </table> 
    </body> 
</html>