How to get all files from a directory and then make them into a javascript function?

Question

For a project I'm working on now I have to manually add the functions to play songs like this

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

But I want to be able to search a directory with php, and generate those functions from php, so I don't have to manually add each song. This is my test code, I know I did it wrong but I can't seem to get it right!

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

Also, what error messages are you getting? Please [edit] your question and add those as well. Thank you. — jamesmortensen, May 27 '12 at 19:33
If you use a single-quoted string (`'`), that variables inside will not be replaced with their accual values. So, use a double-quote (`"`) for the first echo. — Lukas Knuth, May 27 '12 at 19:36

score 2 · Answer 1 · edited May 23 '17 at 11:49

~~Have the JS function defined in your page, with a parameter for the song source:~~

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

In your PHP, you'll most likely want to echo a link to play each of the songs inside that folder, right?
Do this:

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

Note that this will show the file's path name with extension, for better display you'd just have to do some string manipulation with php/js substr/substring and explode/split.

Alright, I rewrote the code to work with your given example:

JS (head)

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

PHP + HTML (body)

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

This will work for mp3 files played in browsers with HTML5 support.

Note that Firefox doesn't support .mp3 playback inside <audio> tags, see: Why doesn't Firefox support the MP3 file format in <audio>

Thus this solution (with your <audio>) will give satisfying results in Chrome only (not tested on opera and safari). You may want to fallback to another solution for more compatibility.

If you want compatibility with IE and Firefox, you can try using an <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>

This will be effectively cross-browser, but may request a plugin installation for Firefox.

Now I have the code thank you, but I keep getting an error "Uncaught type error: cannot set src to null" — Zachrip, May 27 '12 at 20:08
Here [link](http://zachrip.tk/getsongs.php) use chrome, inspect element, and look at the php file. It will show errors when clicking the link. — Zachrip, May 27 '12 at 20:17
Oh, you're using the `audio` tag. Give me a minute to rewrite the code. — Fabrício Matté, May 27 '12 at 20:20
I know it does, I'm going to have something else for other browsers, I just want this to work — Zachrip, May 30 '12 at 07:04
Then I don't know man, both of the code samples which I posted above (js + php + html) are working perfectly fine on my end. — Fabrício Matté, May 30 '12 at 07:29

score 1 · Answer 2 · answered May 27 '12 at 19:38

1

you have an issue with your quotes. Single quotes do not parse variables. Also, you have some quotes in the wrong place.

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

but you will have another issue with this...your songs probably aren't going to conform to proper function names...you're going to have to rethink this "function for each song" thing...

answered May 27 '12 at 19:38

CrayonViolent

32,111
5
56
79

Are you sure that `justin bieber - baby.mp3` is a good name for JavaScript function? :) – VisioN May 27 '12 at 19:39
well no, but that's a different issue, he'll find out soon enough :P – CrayonViolent May 27 '12 at 19:40
Well I'm open for other suggestions on this guys! – Zachrip May 27 '12 at 19:44

How to get all files from a directory and then make them into a javascript function?

2 Answers2