Javascript 如何使用HTML5从文件夹中的文件创建动态播放列表

我正在尝试转换我的mp3播放器的HTML5脚本，以便它动态地从文件夹中读取mp3文件，而不是静态地在脚本中键入文件名。对于html和php，我还是个新手。所以，我很感激你给我的指导。下面是我的原始代码片段，它可以完美地工作：

</audio>


<!--Audio in our Playlist-->
<div class="Playlist">
<ul class="playlist">

     <li audiourl ="data/Song1.mp3">Song1</li>
     <li audiourl ="data/Song2.mp3">Song2</li>
     <li audiourl ="data/Song3.mp3">Song3</li>
     <li audiourl ="data/Song4.mp3">Song4</li>
     <li audiourl ="data/Song5.mp3">Song5</li>
     <li audiourl ="data/Song6.mp3">Song6</li>


</ul>
</div>

Song1
歌曲2
Song3
Song4
Song5
歌曲6

---

这是我尝试过的代码，但它不显示文件。如果我将$file变量放在“…>$file之间，则可以在echo语句中多次使用

$file

变量：

echo "<li audiourl=\"data/$file\">$file</li>";

echo“
$file
”；

这将打印如下内容：

<li audiourl ="data/Song1.mp3">Song1.mp3</li>

Song1.mp3

要删除文件扩展名，可以使用：

echo“
”.rtrim（$file，.mp3”）。“
”；

这将给你：

<li audiourl ="data/Song1.mp3">Song1</li>

Song1

是的，但当我尝试这样做时，它会显示文件，但不会播放。你能让文件播放吗？听起来好像有另一个问题。我收回这一点，它确实有效。我想我只能使用变量一次……谢谢。我只有一个问题，如何从显示的文件中移动.mp3扩展名？我尝试了basename（），但这不起作用。此外，您可能希望在HTML中使用

data-

属性（即

data audiourl

而不是

audiourl

）。类似的自定义属性是非标准的。

echo "<li audiourl=\"data/$file\">" . rtrim($file, ".mp3")  . "</li>";

<li audiourl ="data/Song1.mp3">Song1</li>