标签云

微信群

扫码加入我们

WeChat QR Code

I build a small sound archive for our in house customers, so that they can look up sounds and effects and use them. For this I am running the little tool MAMP, which is sharing a folder full of audio files over the network.A little PHP script lists the files, reads the file types and file sizes and outputs them into an HTML table. I also included a table filter script to search for specific filenames.Now I did some testing and I would like to tweak it a bit and make it more user friendly.For example, when I found a sound I would like to hear, I have to click it, a new window opens and the integrated Safari player plays the sound. If I like it, I have to go back and download the file via right click and "save as...".I would like to simplify this.The best for me would be an audio player on top of the same site, so I integrated a simple HTML5 player.But how can I make the player play the file which I am clicking from the table? As source? And play a new file if I choose one?This is the PHP script:<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 filesizesfunction 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 enabledif($_SERVER['QUERY_STRING']=="hidden"){$hide=""; $ahref="."; $atext="Hide";}else{$hide="."; $ahref="./?hidden"; $atext="Show";} // Opens directory $myDirectory=opendir(".");// Gets each entrywhile($entryName=readdir($myDirectory)) { $dirArray[]=$entryName;}// Closes directoryclosedir($myDirectory);// Counts elements in array$indexCount=count($dirArray);// Sorts filessort($dirArray);// Loops through the array of filesfor($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 directoriesif(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 .. directoriesif($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 operationselse{// Gets file extension$extn=pathinfo($dirArray[$index], PATHINFO_EXTENSION);// Prettifies file typeswitch ($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></section></div>This is the filter script:(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);And this is the simple player, more of a placeholder right now:<audio controls autoplay style="width:40%; max-height:100%;"></audio>Is there a way to click on the filename and the HTML5 player plays it?


use javascript to set the source of the audio - but there is not sufficient detail in the code posted to comment further

2019年04月19日04分08秒

I'm sorry, I postet the whole script now.

1970年01月01日00分03秒