0

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

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);
}
?>
4

2 回答 2

2

在您的页面中定义 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，请参阅：为什么 Firefox 不支持 <audio> 中的 MP3 文件格式

因此，此解决方案（使用您的<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 安装插件。

于 2012-05-27T19:42:51.683 回答
1

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

<?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);
}
?>

但是你会有另一个问题......你的歌曲可能不符合正确的功能名称......你将不得不重新考虑这个“每首歌的功能”的事情......

于 2012-05-27T19:38:17.953 回答