Каталог аудио-файлов, нужен аудио-плеер

Я создаю небольшой звуковой архив для наших собственных клиентов, чтобы они могли искать звуки и эффекты и использовать их. Для этого я использую небольшой инструмент MAMP, который делит папку, полную аудиофайлов, по сети.
Небольшой скрипт php перечисляет файлы, читает типы файлов и размеры файлов и выводит их в HTML-таблицу. Я также включил сценарий фильтра таблицы для поиска определенных имен файлов.

Я очень доволен решением до сих пор.

Сейчас я провел некоторое тестирование и хотел бы немного его настроить и сделать его более удобным для пользователя.

Например, когда я нашел звук, который хотел бы услышать, я должен щелкнуть по нему, открывается новое окно, и встроенный проигрыватель сафари воспроизводит звук. Если мне это нравится, я должен вернуться и загрузить файл правой кнопкой мыши и «сохранить как …».

Я хотел бы упростить это.

Лучшим для меня был бы аудиоплеер поверх того же сайта, поэтому я интегрировал простой проигрыватель 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 проигрывает его?

Спасибо