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>

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

1 个答案: