音频文件目录列表，需要音频播放器解决方案

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>
</section>
</div>

这是过滤器脚本：

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