php - 如何从目录中获取所有文件，然后将它们放入 JavaScript 函数中？

Question

对于我现在正在进行的项目，我必须手动添加播放这样的歌曲的功能

function song(){
    mySong.src="song1.mp3";
    mySong.play();
    document.getElementById("p2").innerHTML="Now Playing:Song1";
}

但是我希望能够使用 php 搜索目录，并从 php 生成这些函数，这样我就不必手动添加每首歌曲。这是我的测试代码，我知道我做错了，但我似乎无法做对!

<?php
Header("content-type: application/x-javascript");
if ($handle = opendir('/wamp/www/songs/')) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != "..") {
            echo 'function $entry(){mySong.src=$entry; mySong.play();       
            document.getElementById("p2").innerHTML="Now Playing:" $entry;}';
            echo "$entry";
        }
    }
    closedir($handle);
}
?>

Answer 1

在页面中定义 JS 函数，并带有歌曲源的参数:

function song(entry){
    mySong.src=entry;
    mySong.play();
    document.getElementById("p2").innerHTML="Now Playing: " + entry;
}

在 PHP 中，您很可能希望回显一个链接来播放该文件夹中的每首歌曲，对吗？
这样做:

<?php
//Header("content-type: application/x-javascript");
if ($handle = opendir('/wamp/www/songs/')) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != "..") {
            echo '<a href="javascript:void(0)" onclick="song(\'' . $entry . '\')">' . $entry . '</a><br />';
        }
    }
    closedir($handle);
}
?>

请注意，这将显示带有扩展名的文件路径名，为了更好地显示，您只需使用 php/js substr 进行一些字符串操作即可。/substring和explode/split .

好吧，我重写了代码以适用于您给定的示例:

JS(头)

function song(entry){
    var mySong=document.getElementById("song1");
    mySong.src=entry;
    mySong.play();
    document.getElementById("p2").innerHTML="Now Playing: " + entry;
}

PHP + HTML(正文)

<?php
//Header("content-type: application/x-javascript");
$path = '/wamp/www/songs/';
if ($handle = opendir($path)) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != "..") {
            echo '<a href="javascript:void(0)" onclick="song(\'' . $path . $entry . '\')">' . $entry . '</a><br />';
        }
    }
    closedir($handle);
}
?>
<p id="p2"></p>
<audio id="song1" controls="controls">
    <source src="" type="audio/mpeg" />
</audio>

这适用于在支持 HTML5 的浏览器中播放的 mp3 文件。

请注意，Firefox 不支持 <audio> 内的 .mp3 播放标签，请参阅:Why doesn't Firefox support the MP3 file format in <audio>

因此，这个解决方案(使用您的 <audio> )将仅在 Chrome 中给出令人满意的结果(未在 Opera 和 safari 上进行测试)。您可能需要回退到另一个解决方案以获得更高的兼容性。

如果您想与 IE 和 Firefox 兼容，您可以尝试使用 <embed> :

JS

function song(entry){
    var mySong=document.createElement('embed');
    mySong.src=entry;
    mySong.width='250px';
    mySong.height='60px';
    document.getElementById("song1").innerHTML= '';
    document.getElementById("song1").appendChild(mySong);
    document.getElementById("p2").innerHTML="Now Playing: " + entry;
}

PHP + HTML

<?php
//Header("content-type: application/x-javascript");
$path = '/wamp/www/songs/';
if ($handle = opendir($path)) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != "..") {
            echo '<a href="javascript:void(0)" onclick="song(\'' . $path . $entry . '\')">' . $entry . '</a><br />';
        }
    }
    closedir($handle);
}
?>
<p id="p2"></p>
<div id="song1"></div>

这将有效地跨浏览器，但可能会要求安装 Firefox 插件。