音頻文件目錄列表，需要音頻播放器解決方案

Question

我爲我們的內部客戶構建了一個小型聲音存檔，以便他們可以查找聲音和效果並使用它們。爲此，我正在運行小工具MAMP，它通過網絡共享一個包含音頻文件的文件夾。 一個小小的PHP腳本列出了這些文件，讀取文件類型和文件大小，並將它們輸出到一個html表格中。我還包括一個表格過濾器腳本來搜索特定的文件名。

到目前爲止，我對解決方案非常滿意。

現在我做了一些測試，我想稍微調整一下，讓它更加用戶友好。

例如，當我發現我想聽到的聲音時，我必須點擊它，打開一個新窗口，並且集成的Safari瀏覽器播放器播放聲音。如果我喜歡它，我必須返回並通過右鍵單擊並「另存爲...」下載文件。

我想簡化它。

對我來說最好的將是在同一網站上的音頻播放器，所以我集成了一個簡單的html5播放器。

但是我怎樣才能讓播放器播放我從表格中點擊的文件？作爲來源？如果我選擇一個文件，請播放一個新文件？

這是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> 

這是在過濾器腳本：

(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); 

這是一個簡單的球員，更多的是佔位符的現在：

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

有沒有辦法點擊文件名和html5播放器播放它？

謝謝

Answer 1

我趕緊慌亂的，希望你可以從它把你需要的東西一起以下。當腳本運行"in-house"我認爲從源代碼中查看文件路徑對於用戶是否隱藏並不重要？

對於每個鏈路產生我添加了一個data屬性標記與路徑到用於由JavaScript事件處理程序播放的曲目/剪輯文件。希望它是有用的！這可以輕鬆地定位到播放器上可以看到控件的預定義音頻標籤。

<!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>