Javascript 自动列出目录中的特定文件并在页面上显示
我创建了一个网络MP3播放器，它工作得很好，只是每次在我的网络服务器上添加新歌时我都要编辑我的脚本。我希望列表在我添加更多歌曲时自动更新。我的脚本基本上如下所示：Javascript 自动列出目录中的特定文件并在页面上显示,javascript,php,html,Javascript,Php,Html,我创建了一个网络MP3播放器，它工作得很好，只是每次在我的网络服务器上添加新歌时我都要编辑我的脚本。我希望列表在我添加更多歌曲时自动更新。我的脚本基本上如下所示： <body> <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg"> </audio> <ul id="playlist"> <li clas
<body>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
</audio>
<ul id="playlist">
<li class="active"><a href="usb/music1.mp3">Music 1</a></li>
<li><a href="usb/music2.mp3">Music 2</a></li>
<li><a href="usb/music3.mp3">Music 3</a></li>
<li><a href="usb/music4.mp3">Music 4</a></li>
</ul>
</body>
<?php
...............
echo '
<body>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
</audio>
<ul id="playlist">';
exec('find /www/usb/ -name "*.mp3"',$list);
$x=0;
while($x<count($list)){
if($list[$x]==$h[0]){
echo '<li class="active"><a href="$list[$x]">$list[$x]</a></li>';
$x++;
}
}
echo '
</ul>
</body>
</html>';
?>
<?php
echo '
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#playlist,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;}
</style>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var audio;
var playlist;
var tracks;
var current;
$(document).ready(function() {
init();
});
function init(){
current = 0;
audio = $("audio");
playlist = $("#playlist");
tracks = playlist.find("li a");
len = tracks.length - 1;
audio[0].volume = .10;
audio[0].play();
playlist.find("a").click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener("ended",function(e){
current++;
if(current == len){
current = 0;
link = playlist.find("a")[0];
}else{
link = playlist.find("a")[current];
}
run($(link),audio[0]);
});
}
function run(link, player){
player.src = link.attr("href");
par = link.parent();
par.addClass("active").siblings().removeClass("active");
audio[0].load();
audio[0].play();
}
</script>
</head>
<body>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
</audio>
<ul id="playlist">';
exec('find /www/usb/ -name "*.mp3"',$list);
$x=0;
while($x<count($list)){
if($list[$x]==$h[0]){
echo '<li class="active"><a href="$list[$x]">$list[$x]</a></li>';
$x++;
}
}
echo '
</ul>
</body>
</html>';
?>
以下函数允许您扫描主目录及其所有子目录，并仅列出具有$allowedExtensions数组中所示的允许文件类型的结果 通过调用要在其中显示列表的函数来使用 您可以通过将要扫描的根路径传递给函数来更改它 例如： 这将循环遍历目录中的每个文件，并删除这些文件。和可能存在的文件，只留下您的音乐文件 正如Hobo Sapien所指出的，如果返回错误，您的循环将变得无限，这可能是导致执行时间耗尽的原因
通过使用这个简单的脚本，您可以提取目录/子目录中的每个文件，而不管它是如何命名的，而无需将脚本放入无限循环。if块中增加$x可能是重复的。如果条件为false，则$x永远不会递增，循环变为无穷大。您为什么不使用glob或scandir而不是使用系统实用程序？他可以这样做，但这不能解释他为什么想这样做，或者他自己的方法有什么问题。@HoboSapiens感谢您的反馈。我补充了一点理由。我尝试了你的建议，但没有成功，请查看我的后期更新。请记住，我只想列出*.mp3only@Don显然，您必须更新链接路径。我会更新代码。给我一点时间。
<?php
function getFiles($path = '/www/usb') {
// Open the path set
if ($handle = opendir($path)) {
// Loop through each file in the directory
while ( false !== ($file = readdir($handle)) ) {
// Remove the . and .. directories
if ( $file != "." && $file != ".." ) {
// Check to see if the file is a directory
if( is_dir($path . '/' . $file) ) {
// The file is a directory, therefore run a dir check again
getFiles($path . '/' . $file);
}
// Get the information about the file
$fileInfo = pathinfo($file);
// Set multiple extension types that are allowed
$allowedExtensions = array('mp3', 'wav', 'ogg', 'flac');
// Check to ensure the file is allowed before returning the results
if( in_array($fileInfo['extension'], $allowedExtensions) ) {
echo '<li class="active"><a href="' . $path . '/' . $file . '">' . $file . '</a></li>';
}
}
}
// Close the handle
closedir($handle);
}
}
?>