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中提供令人满意的结果（未在歌剧和野生动物园中测试）。您可能希望回退到另一个解决方案以获得更高的兼容性。

如果您想要与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安装插件。

Answer 2

你的报价有问题。单引号不解析变量。另外，你在错误的地方有一些引用。

<?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';}";
        }
    }
    closedir($handle);
}
?>

但你会遇到另一个问题...你的歌曲可能不符合正确的功能名称......你将不得不重新考虑这个“每首歌的功能”...... / p>

如何从目录中获取所有文件，然后将它们变成javascript函数？

2 个答案: