How to create a dynamic playlist from files in a folder with HTML5

Question

I'm attempting to convert my HTML5 script of an mp3 player so that it reads mp3 files from a folder dynamically, instead of me statically typing the file names into the script. I'm still a neophyte when it comes html and php. So, I appreciate any direction given. Here is a snippet of my original code that works flawlessly:

</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>

This is the code that I have attempted, but it does not display the files. If I put the $file variable in between "...>$file<..." it displays the files with the intended style of my css sheet. But, the files will not play when selected. I wouldn't think that I would need to change my Javascript file:

</audio>


<!--Audio in our Playlist-->
<div class="Playlist">
<ul class="playlist">
<?php $files = scandir( "data/" ); ?>
     <?php foreach ( $files as $file )
     if ( $file != '.' && $file != '..' )
         echo "<li audiourl=\"data/$file\"></li>"; ?>

</ul>
</div>

I appreciate any direction....

tomaroo · Accepted Answer · 2016-12-04T23:19:08.857

2

You can use the $file variable in your echo statement more than once:

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

This will print something like:

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

To get rid of the file extension, you can use rtrim:

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

Which will give you:

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

edited Dec 04 '16 at 23:19

answered Dec 04 '16 at 23:10

tomaroo

2,524
1
19
22

Yeah, but when I try that, it displays the files, but they will not play – suffa Dec 04 '16 at 23:12
Can you get the files to play at all? Sounds like there's a different problem. – tomaroo Dec 04 '16 at 23:13
I take that back, it does work. I thought I could only use the variable once.... Thanks. – suffa Dec 04 '16 at 23:14
I have only one question, how can I move the .mp3 extension from the files that are displayed? I tried basename(), but that did not work. – suffa Dec 04 '16 at 23:15
Also you may want to use `data-` attributes in your HTML (i.e. `data-audiourl` instead of `audiourl`). Custom attributes like that are non-standard. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes – tomaroo Dec 04 '16 at 23:23
Okay, thanks for the tip. One other question, why did you use the dots on both sides of ". rtrim(...) ."? – suffa Dec 04 '16 at 23:26
That's how you connect two strings into one in PHP. [See string concatenation](http://stackoverflow.com/questions/8336858/how-to-combine-two-strings-together). Can't use `rtrim()` from within the double quotes. – tomaroo Dec 04 '16 at 23:30
Another way of writing the echo statement would be `echo "
" . rtrim($file, ".mp3") . "

tomaroo

Dec 04 '16 at 23:34

How to create a dynamic playlist from files in a folder with HTML5

1 Answers1